WeUI组件库简介
这是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。
微信官方文档提供两种方式引入组件
1、 通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。
2、 可以通过npm方式下载构建，npm包名为weui-miniprogram
推荐使用useExtendedLib 扩展库的方式引入
一、【useExtendedLib】
注意：前提是APPID是真实有效的，游客模式只能npm导入。
第一步
在小程序根目录的app.json里添加：
"useExtendedLib": {
"weui": true
},
第二步
在需要使用weui的页面引入，首先在页面的 json 文件加入 usingComponents 配置字段：
{
"usingComponents": {
"mp-icon": "weui-miniprogram/icon/icon"
}
}
在对应页面的 wxml 中直接使用该组件：
<mp-icon icon="add" color="green" size="{{26}}"></mp-icon>
编译即可看到图片！
注意事项
1、weui-miniprogram/icon/icon 前面不要加miniprogram_npm、components等等
2、需要使用真实APPID，游客模式新建的项目都会报错。
编译报错
Failed to load resource: the server responded with a status of 500 (Internal Server Error)(env: Windows,mp,1.05.2108130; lib: 2.19.2)
如果没有登录，是游客模式进入的，APPID是虚拟的，刚开启就会报错：
"useExtendedLib": {
"weui": true
},
Error: Component is not found in path "miniprogram_npm/weui-miniprogram/icon/icon" (using by "pages/person/info")
at e (VM72 WAService.js:2)APPID是虚拟的，引用不到WeUI。
二、【npm方式】
因为需要npm下载组件库，需要nodeJS环境，先去命令行查看是否已安装node，npm是否可用：
npm --version
如果没有安装，请去 Node.js 安装配置
第一步
命令行到项目文件夹下，运行：
npm install --save weui-miniprogram
这时项目文件夹下多了个node_modules
第二步
在微信开发者工具的“工具”菜单 --> “构建 npm”，项目文件夹下就多了个miniprogram_npm文件夹，这时node_modules可用删除掉了。
第三步
在需要使用weui的页面引入，首先在页面的 json 文件加入 usingComponents 配置字段：
{
"usingComponents": {
"mp-icon": "weui-miniprogram/icon/icon"
}
}
在对应页面的 wxml 中直接使用该组件：
<mp-icon icon="add" color="green" size="{{26}}"></mp-icon>
编译即可看到图片！
PS:
微信官方文档说要在根目录app.wxss 里面引入 weui.wxss：
@import 'weui-miniprogram/weui-wxss/dist/style/weui.wxss';
但是我没有引入也没有报错，使用的icon也能正常显示出来。
三、【直接导入miniprogram_npm】
第一步
将其他人已经构建npm的miniprogram_npm文件夹，拷贝到项目目录下。（文末有下载地址）
第二步
在需要使用weui的页面引入，首先在页面的 json 文件加入 usingComponents 配置字段：
{
"usingComponents": {
"mp-icon": "weui-miniprogram/icon/icon"
}
}
在对应页面的 wxml 中直接使用该组件：
<mp-icon icon="add" color="green" size="{{26}}"></mp-icon>
编译即可看到图片！
miniprogram_npm压缩包，百度云盘：
链接:https://pan.baidu.com/s/1bjKo1Y8dOmJFb2xHtpBq0A
提取码:9fm3
