1.useExtendedLib引入

優(yōu)點:

1.引入簡單
2.不占用包體積

缺點:

1.自由化低，不能直接修改組件庫，增加功能
2.不穩(wěn)定，不同版本W(wǎng)eUI相同組件暴露的方法都會有較大差異，會發(fā)現(xiàn)突然有些功能不好使。(暫未發(fā)現(xiàn)指定版本配置，猜測是動態(tài)獲取最新的)
3.不支持分包使用

引入步驟:

1.app.json添加配置json字符串

"useExtendedLib": {
    "weui": true
  }

2.在page頁面的使用，對應page頁面的json頁面添加引用，注意組件引用路徑

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

2.通過npm引入

優(yōu)點:

1.穩(wěn)定性良好(版本固定)
2.自由化程度高，可以自由改造或者增減組件的持有
3.分包依舊可以使用

缺點:

1.占用包體積
2.組件樣式需要全局引用

引入步驟:

1.cd到項目根路徑 npm install 初始化項目

npm install

然后按照提示完成初始化
2.下載weui-miniprogram到本地
npm install --save weui-miniprogram
3.通過編譯器構建npm模塊

截屏2020-06-18 下午3.36.33.png

4.編譯本地設置勾選npm模塊

截屏2020-06-18 下午3.44.52.png

5.全局樣式引用
app.wxss文件中引入WeUI.樣式

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

6.組件引用

//index.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>