小程序開發-WeUI組件庫使用

WeUI組件庫簡介

這是一套基於樣式庫weui-wxss開發的小程序擴展組件庫，同微信原生視覺體驗一致的UI組件庫，由微信官方設計團隊和小程序團隊為微信小程序量身設計，令用戶的使用感知更加統一。

1. 引入組件

推薦方式1， 可以省略后面import方式

• 方法1： 可以在app.json中通過引入擴展庫的方式

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

• 方法2： 通過npm下載構建，npm包名為 weui-miniprogram

2. 使用方法

如果是方式1 引入的，不用什么操作

如果是方式2 引入的， 首先要在 app.wxss 里面引入 weui.wxss，如果是通過 npm 引入，需要先構建 npm（“工具”菜單 --> “構建 npm”）

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

然后可以在任何頁面的json文件中加入要使用的組件庫

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

最后就可以在頁面的wxml中直接使用該組件

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

3. 其他組件的效果可以掃描觀看