1.useExtendedLib引入
优点:
1.引入简单
2.不占用包体积
缺点:
1.自由化低，不能直接修改组件库，增加功能
2.不稳定，不同版本WeUI相同组件暴露的方法都会有较大差异，会发现突然有些功能不好使。(暂未发现指定版本配置，猜测是动态获取最新的)
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引入
优点:
1.稳定性良好(版本固定)
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>
