手把手带你学微信小程序 —— 如何开发属于自己的第三方微信小程序组件库

Author：Gorit
Date：2022年5月15日

前言：大家可能见惯了各种 Vue，React 等前端组件库的开发教程，但是 微信小程序组件库的 开发教程可能就很少见到了，今天我将从自己踩的各种坑，总结出如下最佳开发实践

而且网上关于微信小程序组件库开发的教程都比较老了，所以我准备新发布一套内容

目前主要以自己的团队开发为主，后续如果有机会话，我会把每一期的组件库开发都记录下来

基本流程

一、前期准备

1.1 开发环境准备

下面的所有储备知识默认大家都会了

1. node.js >= 14.15.3
2. npm >= 7.21.0
3. git >= git version 2.33.1.windows.1
4. 开发工具
   1. vscode
   2. 微信开发者工具
5. Github 仓库（基本的 git 命令，仓库管理等操作）
6. NPM 账户支持
7. vitepress or vuepress（非必要，给自己的组件库一个展示的平台，会用到 Github Pages 功能）
   

1.2 查阅资料

在微信小程序官方文档中，正好看到了有提供这一块的脚手架。同时也有一些代码示例

我们可以将其 down 下来，先看看脚手架生成的示例。具体就不演示了。必要情况，可以将其生成的代码放进微信小程序开发工具中运行起来看看效果

二、使用脚手架开发

2.1 脚手架环境初始化

npm install -g @wechat-miniprogram/miniprogram-cli

miniprogram init --type custom-component

npm install

编译组件库 npm run dev的时候，可能会遇到这个问题.

[18:10:26] Error: File not found with singular glob: C:\Users\Gorit\Desktop\test\miniprogram_dev\package.json (if this was purposeful, use `allowEmpty` option)
at Glob.<anonymous> (C:\Users\Gorit\Desktop\test\node_modules\glob-stream\readable.js:84:17)
at Object.onceWrapper (events.js:422:26)
at Glob.emit (events.js:315:20)
at Glob.EventEmitter.emit (domain.js:467:12)
at Glob._finish (C:\Users\Gorit\Desktop\test\node_modules\glob-stream\node_modules\glob\glob.js:194:8)
at done (C:\Users\Gorit\Desktop\test\node_modules\glob-stream\node_modules\glob\glob.js:179:14)
at Glob._processSimple2 (C:\Users\Gorit\Desktop\test\node_modules\glob-stream\node_modules\glob\glob.js:688:12)
at C:\Users\Gorit\Desktop\test\node_modules\glob-stream\node_modules\glob\glob.js:676:10
at Glob._stat2 (C:\Users\Gorit\Desktop\test\node_modules\glob-stream\node_modules\glob\glob.js:772:12)
    at lstatcb_ (C:\Users\Gorit\Desktop\test\node_modules\glob-stream\node_modules\glob\glob.js:764:12)

解决方案已经提 issue 了： https://github.com/wechat-miniprogram/miniprogram-cli/issues/7 ，就是要手动更换一下 devDepenecies 了

网络不好的话可以替换 node_modules 如下
[node_modules.zip]

PS: 源文件需要在最下方的*原文链接* 可以下载哦

然后替换了 node_modules 后，重新执行 npm run dev

编译成功可以看到这样的信息

然后我们就可以看到如下目录结构了

2.2 编写我们的第一个组件

编写组件之前，我们要看一下，这个模板项目是怎么构建出最终小程序的？

①熟悉代码结构

② 编写一个 tag 组件

具体编写组件的方式参考微信官方文档，这里就不展示了

要实现的功能：

1. 传入 tagText 属性即为 tag 内容
2. 设置 type，实现内置样式
3. 支持自定义背景颜色

预览效果

组件源码

<view class="tag {{type}}" style="background-color: {{bgColor}}">
    <text>{{tagText}}</text>
</view>

组件样式

.tag {
  min-width: 100rpx;
  max-width: 120rpx;
  width: fit-content;
  height: 45rpx;
  line-height: 45rpx;
  text-align: center;
  font-size: 20rpx;
  color: white;
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.primary {
  background-color: rgb(47, 47, 218);
}

.danger {
  background-color: rgb(217, 117, 117);
}

.success {
  background-color: rgb(107, 206, 107);
}

js业务逻辑

// import _ from 'util'

Component({
  properties: {
    bgColor: {
      type: String,
      value: '',
    },
    type: {
      type: String,
      value: 'primary'
    },
    tagText: {
      type: String,
      value: '我是tag'
    }
  },
  data: {

  },
  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached() {

  }, // 此处attached的声明会被lifetimes字段中的声明覆盖

  methods: {
    a() {
    }
  }
})

json 配置

{
    "component": true,
    "usingComponents": {}
}

③主页面引用

{
  "component": true,
  "usingComponents": {
    "tag": "./other"
  }
}

<view class="index other">{{prop}}-{{flag}}</view>
<text>文本</text>
dddd
<view>
  <tag type="primary" tagText="hello"></tag>
  <tag type="danger" tagText="aaaa"></tag>
  <tag bgColor="#e3e" tagText="自定义颜色"></tag>
</view>

三、单元测试

3.1 方案一

参考官方给的单元测试的方案处理

3.2 方案二

基于 miniprogram-cli 生成的项目，使用 Jest 进行单元测试

npm run build

nom run test

官方给了两个案例，即默认生成的用例，因为是在组件的 prop 中定义字段，所以很明确知道结果是什么

但是由于自定义组件的单元测试 的调试方式还没摸清楚，只能含泪跳过

四、发布 NPM

1. 注册 NPM 账号，在 https://www.npmjs.com/ 注册一个账号即可
2. 然后在你的项目里输入如下指令

PS：你的镜像源一定要换到官方 npm：https://registry.npmjs.org/

npm login	//即你在 npm 中注册的账号

// 编写 .npmignore 可以选择性的忽略一下用不到的文件

// 修改两个地方
npm publish

要修改的名称，你的项目要简短好记，然后就是版本，每次提交一次，都要更新版本号

这是我已经提交过的版本，写了两个测试小用例

发布成功后，就可以让其他人下载我们发布的组件库了：
输入改命令即可npm i fmin-ui

PS：
小程序 npm 包，必须包含 miniprogram 字段，不然会有问题，这个是默认生成的，所以前面没提

五、小程序引入我们自定义的组件库

5.1 文档直达

对于喜欢看文档的小伙伴，可以通过下方链接直达

5.2 引入第三方 npm

1. 新建小程序项目 js、ts 都可，名称随意，我的叫 fmin-ui

这是最终的预览效果

新建的项目是没有

• miniprogram_npm
• node_modules
• package

2. 创建 package.json

npm init -y

npm i fmin-ui

安装好之后，就可以看到 node_modules 了，同时 package.json 也新增了我们刚刚发布的 npm 小程序包

3. 修改 project.config.json

    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ],

4. 构建 npm（目前最新版本的微信开发者工具【2022/5】可以直接这样使用）

5. 然后就生成了 miniprogram_npm 的路径
6. 然后我们就可以在项目中使用我们自定义的组件库了

{
  "usingComponents": {
    "my-tag": "fmin-ui/tag/index"
  }
}

<!--pages/index/index.wxml-->
<text>pages/index/index.wxml</text>

<view>
  Hello World
</view>

<view>
  <my-tag></my-tag>
</view>

然后就能看到前面第一步中的预览效果了，怎么样？是不是很简单

六、参考文档

[1] https://www.npmjs.com/ NPM 支持
[2] https://vitejs.cn/vitepress/ VitePress 支持，问为啥用这个，问就是 vite 构建，支持 Vue3，比 VuePress 构建更快
[3] https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/trdparty.html 官方提供的第三方组件开发文档
[4] https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/unit-test.html 官方提供的单元测试方案
[5] https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html 微信小程序如何引入第三方 npm
[6] https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html project.config.json 详情配置

七、原文链接

手把手带你学微信小程序 —— 如何开发属于自己的第三方微信小程序组件库