小程序WeUI的引入方式使用

估计是小白的节奏,在引入WeUI时看官方看得一愣一愣的。下面记录一下。
原文简书参考: https://www.jianshu.com/p/1d645078b326

一.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"
  }
}

二.通过npm引入
优点:
1.稳定性良好(版本固定)
2.自由化程度高，可以自由改造或者增减组件的持有
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.样式

@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