微信小程序使用WeUI组件库

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 中直接使用该组件：

编译即可看到图片！

注意事项

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 中直接使用该组件：

编译即可看到图片！

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 中直接使用该组件：

编译即可看到图片！

miniprogram_npm压缩包，百度云盘：
链接:https://pan.baidu.com/s/1bjKo1Y8dOmJFb2xHtpBq0A
提取码:9fm3