1.useExtendedLib引入
優(yōu)點(diǎn):
1.引入簡單
2.不占用包體積
缺點(diǎn):
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頁面的使用，對應(yīng)page頁面的json頁面添加引用肆饶，注意組件引用路徑
"usingComponents": {
"mp-dialog": "weui-miniprogram/dialog/dialog",
"mp-cells": "weui-miniprogram//cells/cells"
}
}
2.通過npm引入
優(yōu)點(diǎn):
1.穩(wěn)定性良好(版本固定)
2.自由化程度高改衩，可以自由改造或者增減組件的持有
3.分包依舊可以使用
缺點(diǎn):
1.占用包體積
2.組件樣式需要全局引用
引入步驟:
1.cd到項(xiàng)目根路徑 npm install 初始化項(xiàng)目
npm install
然后按照提示完成初始化
2.下載weui-miniprogram到本地
npm install --save weui-miniprogram
3.通過編譯器構(gòu)建npm模塊
截屏2020-06-18 下午3.36.33.png
4.編譯本地設(shè)置勾選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: '確認(rèn)'}]}}">
<view>test content</view>
</mp-dialog>
