文章目录
Author:Gorit
Date:2022年5月15日
前言:大家可能见惯了各种 Vue,React 等前端组件库的开发教程,但是 微信小程序组件库的 开发教程可能就很少见到了,今天我将从自己踩的各种坑,总结出如下最佳开发实践
而且网上关于微信小程序组件库开发的教程都比较老了,所以我准备新发布一套内容
目前主要以自己的团队开发为主,后续如果有机会话,我会把每一期的组件库开发都记录下来
基本流程
一、前期准备
1.1 开发环境准备
下面的所有储备知识默认大家都会了
- node.js >= 14.15.3
- npm >= 7.21.0
- git >= git version 2.33.1.windows.1
- 开发工具
- vscode
- 微信开发者工具
- Github 仓库(基本的 git 命令,仓库管理等操作)
- NPM 账户支持
- 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 组件
具体编写组件的方式参考微信官方文档,这里就不展示了
要实现的功能:
- 传入 tagText 属性即为 tag 内容
- 设置 type,实现内置样式
- 支持自定义背景颜色
预览效果
组件源码
<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
- 注册 NPM 账号,在 https://www.npmjs.com/ 注册一个账号即可
- 然后在你的项目里输入如下指令
PS:你的镜像源一定要换到官方 npm:https://registry.npmjs.org/
npm login //即你在 npm 中注册的账号
// 编写 .npmignore 可以选择性的忽略一下用不到的文件
// 修改两个地方
npm publish
要修改的名称,你的项目要简短好记,然后就是版本,每次提交一次,都要更新版本号
这是我已经提交过的版本,写了两个测试小用例
发布成功后,就可以让其他人下载我们发布的组件库了:
输入改命令即可npm i fmin-ui
PS:
小程序 npm 包,必须包含 miniprogram 字段,不然会有问题,这个是默认生成的,所以前面没提
五、小程序引入我们自定义的组件库
5.1 文档直达
对于喜欢看文档的小伙伴,可以通过下方链接直达
5.2 引入第三方 npm
- 新建小程序项目 js、ts 都可,名称随意,我的叫 fmin-ui
这是最终的预览效果
新建的项目是没有
- miniprogram_npm
- node_modules
- package
- 创建 package.json
npm init -y
npm i fmin-ui
安装好之后,就可以看到 node_modules 了,同时 package.json 也新增了我们刚刚发布的 npm 小程序包
- 修改 project.config.json
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
],
- 构建 npm(目前最新版本的微信开发者工具【2022/5】可以直接这样使用)
- 然后就生成了 miniprogram_npm 的路径
- 然后我们就可以在项目中使用我们自定义的组件库了
{
"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 详情配置