0
点赞
收藏
分享

微信扫一扫

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



文章目录

  • ​​基本流程​​
  • ​​一、前期准备​​
  • ​​1.1 开发环境准备​​
  • ​​1.2 查阅资料​​
  • ​​二、使用脚手架开发​​
  • ​​2.1 脚手架环境初始化​​
  • ​​2.2 编写我们的第一个组件​​
  • ​​①熟悉代码结构​​
  • ​​② 编写一个 tag 组件​​
  • ​​③主页面引用​​
  • ​​三、单元测试​​
  • ​​3.1 方案一​​
  • ​​3.2 方案二​​
  • ​​四、发布 NPM​​
  • ​​五、小程序引入我们自定义的组件库​​
  • ​​5.1 文档直达​​
  • ​​5.2 引入第三方 npm​​
  • ​​六、参考文档​​
  • ​​七、原文链接​​


Author:Gorit


Date:2022年5月15日

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

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

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

基本流程

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

一、前期准备

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. 微信开发者工具
  1. Github 仓库(基本的 git 命令,仓库管理等操作)
  2. NPM 账户支持
  3. vitepress or vuepress(非必要,给自己的组件库一个展示的平台,会用到 Github Pages 功能)

1.2 查阅资料

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


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

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


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

二、使用脚手架开发

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​

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

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

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

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

2.2 编写我们的第一个组件

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

①熟悉代码结构

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


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

② 编写一个 tag 组件


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


要实现的功能:

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

预览效果

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

组件源码

<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​​ 中定义字段,所以很明确知道结果是什么

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

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

四、发布 NPM

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

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

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

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

// 修改两个地方
npm publish

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

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

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

发布成功后,就可以让其他人下载我们发布的组件库了:

输入改命令即可​​npm i fmin-ui​

PS:

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

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

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

5.1 文档直达

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

5.2 引入第三方 npm

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

这是最终的预览效果

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

新建的项目是没有

  • miniprogram_npm
  • node_modules
  • package
  1. 创建 package.json
npm init -y

npm i fmin-ui

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

  1. 修改 project.config.json
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
],
  1. 构建 npm(目前最新版本的微信开发者工具【2022/5】可以直接这样使用)

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

  1. 然后就生成了 miniprogram_npm 的路径
  2. 然后我们就可以在项目中使用我们自定义的组件库了
{
"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>

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



举报

相关推荐

0 条评论