@
WeUI组件库简介
这是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。
一、引入组件
- 通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小。
- 可以通过npm方式下载构建,npm包名为weui-miniprogram
如何使用npm方式下载构建,可参考:《设置微信小程序支持npm(解决微信小程序npm构建时提示“没有找到可以构建的NPM包,请确认需要参与构建的npm都在miniprogramroot目录内,或配置project...”错误)的方法》
二、如何使用
- 首先要在 app.wxss 里面引入 weui.wxss,如果是通过 npm 引入,需要先构建 npm(“工具”菜单 --> “构建 npm”)。如果是通过 useExtendedLib 扩展库 的方式引入,可省略 import 步骤。
@import \'weui-miniprogram/weui-wxss/dist/style/weui.wxss\';
-
然后可以在页面中引入 dialog 弹窗组件
在页面的 json 文件加入 usingComponents 配置字段
{
"usingComponents": {
"mp-dialog": "weui-miniprogram/dialog/dialog"
}
}
在对应页面的 wxml 中直接使用该组件
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: \'取消\'}, {text: \'确认\'}]}}">
<view>test content</view>
</mp-dialog>
至此,即已引入并可使用WeUI组件。
总结
以上便是如何引入和使用WeUI组件库的过程。