开发一个ci工具 一键集成编译发布uniapp微信小程序

1,295 阅读4分钟

首先回顾一下一般的uniapp项目是怎么开发并发布微信小程序的:

  1. 在hbuild中打开项目并运行到小程序模拟器进行日常开发和调试
  2. 在hbuild点击发行点击发行会编译出小程序发布代码运行到小程序模拟器预览,然后在模拟器中点击发布输入版本号和更新信息
  3. 下载sourcemap文件

这样的开发流程里会遇到的问题

  1. hbuild一次只能打开一个调试项目
  2. 点击发布时可能在开发分支上
  3. 点击发布时可能有未提交git的代码或者测试代码
  4. 手动打git tag同步记录发布信息
  5. 一切流程都是手动操作,能自动为什么还要手动

于是就有了uniapp-weixin-ci

使用 npm install 安装即用

npm install -D uniapp-weixin-ci

uniapp-weixin-ci 有什么功能

  • 编译微信小程序项目
  • 检查项目中是否为未提交git仓库的代码,避免发布了测试代码
  • 检查git分支是否在指定的生产分支上
  • 自动增加加版本号或者通过命令行参数设置,并且同步git tag
  • 依赖更新检查
  • miniprogram-ci 上传微信小程序代码
  • 自动sourceMap 保存

先来看看使用效果

使用 npx wxci-publish 或者 npm run wxci-publish 命令执行ci程序
执行前记得在 manifest.json 文件里配置好小程序的appid mp-weixin.appid,和小程序ci上传密钥文件,没有配置的话ci程序会提醒

npx wxci-publish.gif

参考项目

github.com/thetime50/u…

使用方法

为了实现ci功能,我们需要能够使用脚本编译项目,所以使用要使用通过命令行初始化的项目
通过vue-cli创建uniapp项目

vue create -p dcloudio/uni-preset-vue my-project

安装uniapp-weixin-ci

npm install -D uniapp-weixin-ci

安装完成后package.json 会自动添加 wxci-publish 命令

package.png

配置 /src/manifest.json 小程序appid
参考文件查看参考项目的 /src/manifest.json.back 文件

{
	"mp-weixin": { /* 微信小程序特有相关 */
		"appid": "wx6666666666666666",
    }
}

在小程序后台 开发-> 开发管理 -> 开发设置
在小程序代码上传模块中 获取密钥 并 配置ip白名单
密钥路径 /keys/wx-private.key
格式参考参考项目的 /keys/wx-private.key.back

运行 npm run wxci-publish 发布小程序

npm run wxci-publish
:: or
npx wxci-publish

支持那些配置参数

> npx wxci-publish -h

Usage: index [options]

Options:
  -V, --version                  output the version number
  -a, --annotate <string>        tag 名称 版本号 (default: "")
  -m, --message <string>         版本更新信息 (default: "")
  -b, --branch <string>          选择分支 (default: "")
  -ep --err-path <path>          错误文件目录 (default: "")
  -smp --sourcemap-path <path>   sourcemap 文件目录 (default: "")
  -sp --src-path <path>          uniapp 项目目录 (default: "")
  -kf --private-key-file <file>  miniprogram-ci 微信小程序ci代码上传密钥文件 (default: "")
  -pp --project-path <path>      微信小程序目录,uniapp 编译后的目录 (default: "")  
  -i, --ignore <type...>         跳过的操作步骤:
          git: 跳过所有git操作
          gb: 跳过git branch 检查
          gf: 跳过git fetch origin
          gd: 跳过git diff
          gt: 跳过git tag

          build/b: 跳过npm run build:mp-weixin 编译小程序

          ci: 跳过所有ci操作 (上传 下载sourceMap)
          cs: 跳过下载sourceMap
       (default: {})
  -no --npm-outdated             开启npm outdated依赖更新检查 (default: false)
  -h, --help                     display help for command

可以使用 -a -m 参数直接在命令行设置小程序版本号和信息
使用-b 分支设置发布分支,可以在package.json 文件里配置wxci-publish脚本
-ep 指定输出错误文件的目录
-smp 指定上传小程序后sourcemap文件保持目录
-sp uniapp 项目目录
-kf 微信小程序ci代码上传密钥文件参考微信小程序ci 文档获取
-pp 执行build命令后该从哪里获取编译后的小程序用来上传 -i 命令可以跳过你不想执行的步骤 例如 npm -i gb gf 就会跳过git的branch检查和提交检查
-no 命令可以开启npm outdated依赖更新检查, 因为uniapp的更新兼容性不太好,所以默认是不开启的

项目地址

npm www.npmjs.com/package/uni…
ci工具 github.com/thetime50/u…
参考示例项目 github.com/thetime50/u…

示例项目里还记录了ci工具用的的知识点和开发过程中遇到的问题
欢迎大家使用,喜欢的话点个star和收藏把