开发微信小程序之WeUI组件库的引入和使用

时间:2024-03-07 09:20:50

@


WeUI组件库简介

这是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。


一、引入组件

  1. 通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小。
  2. 可以通过npm方式下载构建,npm包名为weui-miniprogram

如何使用npm方式下载构建,可参考:《设置微信小程序支持npm(解决微信小程序npm构建时提示“没有找到可以构建的NPM包,请确认需要参与构建的npm都在miniprogramroot目录内,或配置project...”错误)的方法》

二、如何使用

  1. 首先要在 app.wxss 里面引入 weui.wxss,如果是通过 npm 引入,需要先构建 npm(“工具”菜单 --> “构建 npm”)。如果是通过 useExtendedLib 扩展库 的方式引入,可省略 import 步骤。
@import \'weui-miniprogram/weui-wxss/dist/style/weui.wxss\';
  1. 然后可以在页面中引入 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组件库的过程。