微信小程序 WePY 引入WeUI
什么是WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一
安装WeUI
我们在上一节中安装了 WePY ,那么在WePY中如何使用 WeUI 呢?
官方有一个 wepy-weui-demo 例子,我们可以直接使用
下载
代码语言:javascript复制git clone git@github.com:wepyjs/wepy-weui-demo.git
or
git clone https://github.com/wepyjs/wepy-weui-demo.git
集成到 WePY 项目中
代码语言:javascript复制cp -r wepy-weui-demo/src/style/ my-project/src/style
my-project 为 上一节 安装的WePY 项目
引入样式文件
修改 app.wpy
中的 style
部分
<style lang="less">
@import 'style/weui.less';
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
</style>
其中 主要引入的weui 的样式文件
编辑pages/index.wpy
代码语言:javascript复制<template>
<view class="container">
<button class="weui-btn" type="primary">页面主操作 Normal</button>
<button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button>
<button class="weui-btn" type="default">页面次要操作 Normal</button>
<button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button>
<button class="weui-btn" type="warn">警告类操作 Normal</button>
<button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</button>
</view>
</template>
查看是否生效
代码语言:javascript复制wepy build --watch
具体使用方法可以参考克隆下来的代码,进入到 example 目录查看每一个组件的使用方式。