一、前言
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
二、下载
- git 下载:weui
点击链接进入 GitHub ,进入下面的页面,点击 Code 选择方式进行下载。
下载好打开应该是这个样子的:
使用:
样式文件可直接引用dist/style/weui.wxss,或者单独引用dist/style/widget下的组件的wxss
组件的wxml结构请看dist/example/下的组件
2. 官网按需下载:
勾选自己需要用到的组件,直接下载就可以,下载好放到自己的项目中就可以直接使用。非常方便,不需要下载其他额外组件文件。
三、引入 weui.wxss
- 手动引入:
将 dist/style/weui.wxss 下的 weui.wxss 样式文件复制到项目根目录下;
在全局 app.wxss 中加入 @import “weui.wxss”,完成样式文件的引入
/**app.wxss**/
@import 'weui.wxss';
page { ... }
以下两种方式使用方法见官网就可以:
- useExtendedLib 扩展库 :useExtendedLib 扩展库
{
"useExtendedLib": {
"weui": true
}
}
- npm构建:npm包名为 weui-miniprogram
具体使用方式见:npm构建支持
四、使用dist/example/下的组件
这个文件夹下的就是 WeUI 组件库的所有组件了,我们可以在 WeUI 上查看相关组件的样式展示,然后根据我们的具体需求来选择某个组件的使用。
因为example 下的组件文件太多,我们不可能全都用到,因此不可能全部放到我们的小程序中,这样会导致我们的小程序体积会变大,所以我们要按需引入即可。
比如,我们要在某个页面中用到button组件,我们就需要在这个页面的json文件中引入该组件:
// index.json
"usingComponents": {
"botton": "../example/botton/botton"
},
五、示例代码
使用一个组件的完整示例代码:Dialog组件
// index.json
{
"usingComponents": {
"mp-dialog": "../example/dialog/dialog"
}
}
// index.wxml
<mp-dialog title="弹窗" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
<view>提示内容</view>
</mp-dialog>
// index.js
Page({
data: {
dialogShow: false,
buttons: [{text: '取消'}, {text: '确定'}],
},
openConfirm: function () {
this.setData({
dialogShow: true
})
},
tapDialogButton(e) {
this.setData({
dialogShow: false,
})
}
});
六、参考文档
WeUI 官网:WeUI 官网
WeUI 官网按需下载:WeUI 官网按需下载
GitHub WeUI:GitHub WeUI
微信小程序 npm 支持:微信小程序 npm 支持
useExtendedLib 扩展库:useExtendedLib 扩展库
参考博客:
微信小程序之WeUI组件库的使用