微信小程序——引入拓展组件库weui

一、通过 useExtendedLib 扩展库的方式引入

1、在微信公众平台设置里面添加weui插件

设置 -> 第三方设置 -> 插件管理 -> 添加插件

2、在全局 app.json 中添加如下内容

"useExtendedLib": {
    "weui": true
},

3、在所要引用的页面 json 文件中添加对应组件名称（不需要在wxss中导入）

{
  "usingComponents": {
    "mp-uploader": "weui-miniprogram/uploader/uploader"
  }
}

4、最后在 wxml 中像基础组件一样使用就可以啦

<view>
  <mp-uploader max-count="5"></mp-uploader>
</view>

二、npm 构建

1、npm init，全程默认回车，会得到 package.json 文件

npm init

2、安装 weui 依赖

npm i weui-miniprogram -S --production

3、在开发者工具中，工具 -> 构建npm，得到一个新的文件夹 miniprojram_npm

4、在开发者工具中，详情 -> 本地设置 -> 勾选使用 npm 模块

5、在全局 app.wxss 中引入 weui 组件库样式

@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

6、在所要引用的页面 json 文件中添加对应组件名称

{
  "usingComponents": {
    "mp-uploader": "weui-miniprogram/uploader/uploader"
  }
}

7、最后在 wxml 中像基础组件一样使用就可以啦

<view>
  <mp-uploader max-count="5"></mp-uploader>
</view>