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>