[移动开发]通过 useExtendedLib 扩展库的方式引入 WeUI

引入并使用 WeUI

1、引入 WeUI 有两种方式

• 方式一：通过 useExtendedLib 扩展库的方式引入 WeUI
• 方式二：通过 npm 下载的方式引入 WeUI

说明：
官方推荐使用方式一，主要优点是：引入方式简便，同时也不占用小程序的包体积。

2、相关文档

https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/weui/quickstart.html
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib

3、通过 useExtendedLib 扩展库的方式引入 WeUI

步骤1: 配置 weui

在 app.json 中添加如下配置：

"useExtendedLib": {
    "weui": true
},

步骤2: 在页面的 JSON 文件中引入要使用的 WeUI 组件

{
  "usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  }
}

步骤3：在页面中使用 weui

<view class="container">
  <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
  </mp-dialog>
</view>

效果