估計是小白的節奏,在引入WeUI時看官方看得一愣一愣的。愛掏網 - it200.com下面記錄一下。愛掏網 - it200.com
原文簡書參考: https://www.jianshu.com/p/1d645078b326
一.useExtendedLib引入
優點:
1.引入簡單
2.不占用包體積
缺點:
1.自由化低&＃xff0c;不能直接修改組件庫&＃xff0c;增加功能
2.不穩定&＃xff0c;不同版本WeUI相同組件暴露的方法都會有較大差異&＃xff0c;會發現突然有些功能不好使。愛掏網 - it200.com(暫未發現指定版本配置&＃xff0c;猜測是動態獲取最新的)
3.不支持分包使用
引入步驟:
1.app.json添加配置json字符串
"useExtendedLib": {"weui": true}
2.在page頁面的使用&＃xff0c;對應page頁面的json頁面添加引用&＃xff0c;注意組件引用路徑
"usingComponents": {"mp-dialog": "weui-miniprogram/dialog/dialog","mp-cells": "weui-miniprogram//cells/cells"}
}
二.通過npm引入
優點:
1.穩定性良好(版本固定)
2.自由化程度高&＃xff0c;可以自由改造或者增減組件的持有
3.分包依舊可以使用
缺點:
1.占用包體積
2.組件樣式需要全局引用
引入步驟:
1.cd到項目根路徑含app.json的文件夾 npm init 初始化項目
npm init
然后按照提示完成初始化
2.下載weui-miniprogram到本地
npm i weui-miniprogram -S --production
3.通過編譯器構建npm模塊
4.編譯本地設置勾選npm模塊
5.全局樣式引用
app.wxss文件中引入WeUI.樣式
&＃64;import &＃39;/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss&＃39;;
6.組件引用
//index.json
{"usingComponents": {"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"}
}
//wxml
mp-dialog title&＃61;"test" show&＃61;"{{true}}" bindbuttontap&＃61;"tapDialogButton" buttons&＃61;"{{[{text: &＃39;取消&＃39;}, {text: &＃39;確認&＃39;}]}}">view>test content/view>
/mp-dialog