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

@

目录

• WeUI组件库简介
• 一、引入组件
• 二、如何使用
• 总结

---

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';

2. 然后可以在页面中引入 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组件库的过程。