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

2022-05-18 09:23:18 浏览数 (1)

文章目录

    • 基本流程
    • 一、前期准备
      • 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 等前端组件库的开发教程，但是 微信小程序组件库的 开发教程可能就很少见到了，今天我将从自己踩的各种坑，总结出如下最佳开发实践

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

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

基本流程

一、前期准备

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 脚手架环境初始化

代码语言：javascript复制
npm install -g @wechat-miniprogram/miniprogram-cli

miniprogram init --type custom-component

npm install

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

代码语言：javascript复制
[18:10:26] Error: File not found with singular glob: C:UsersGoritDesktoptestminiprogram_devpackage.json (if this was purposeful, use `allowEmpty` option)
at Glob.<anonymous> (C:UsersGoritDesktoptestnode_modulesglob-streamreadable.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:UsersGoritDesktoptestnode_modulesglob-streamnode_modulesglobglob.js:194:8)
at done (C:UsersGoritDesktoptestnode_modulesglob-streamnode_modulesglobglob.js:179:14)
at Glob._processSimple2 (C:UsersGoritDesktoptestnode_modulesglob-streamnode_modulesglobglob.js:688:12)
at C:UsersGoritDesktoptestnode_modulesglob-streamnode_modulesglobglob.js:676:10
at Glob._stat2 (C:UsersGoritDesktoptestnode_modulesglob-streamnode_modulesglobglob.js:772:12)
    at lstatcb_ (C:UsersGoritDesktoptestnode_modulesglob-streamnode_modulesglobglob.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. 支持自定义背景颜色

预览效果

组件源码

代码语言：javascript复制
<view class="tag {{type}}" style="background-color: {{bgColor}}">
    <text>{{tagText}}text>
view>

组件样式

代码语言：javascript复制
.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业务逻辑

代码语言：javascript复制
// 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 配置

代码语言：javascript复制
{
    "component": true,
    "usingComponents": {}
}
③主页面引用
代码语言：javascript复制
{
  "component": true,
  "usingComponents": {
    "tag": "./other"
  }
}
代码语言：javascript复制
<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 进行单元测试

代码语言：javascript复制
npm run build

nom run test

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

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

四、发布 NPM

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

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

代码语言：javascript复制
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
  1. 创建 package.json
代码语言：javascript复制
npm init -y

npm i fmin-ui

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

  1. 修改 project.config.json
代码语言：javascript复制
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ],
  1. 构建 npm（目前最新版本的微信开发者工具【2022/5】可以直接这样使用）
  1. 然后就生成了 miniprogram_npm 的路径
  2. 然后我们就可以在项目中使用我们自定义的组件库了
代码语言：javascript复制
{
  "usingComponents": {
    "my-tag": "fmin-ui/tag/index"
  }
}
代码语言：javascript复制
<text>pages/index/index.wxmltext>

<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 详情配置

七、原文链接

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

小程序 单元测试 node.js 微信 npm

0 人点赞