全栈应用指南 | 基于 miniprogram-ci 实现微信小程序的自动打包预览和上传

hauk0101
1,609 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

背景

团队里之前开发微信小程序时，是通过微信开发者工具压缩代码，然后提交到微信后台，设置为体验版，之后让测试同学参与测试。这种方式在人数较少的时候，还不算麻烦。但是当团队人数变多时，意味着并发的迭代可能也会变多。比如最常见的就是当一个需求正在测试中，而线上有一个临时问题需要修复，这时候就存在一个体验码无法满足两个测试的同时进行。

除此之外，不同人打包都可以打包上传，甚至有时候会不小心把正在测试的代码，当做已经测试通过的代码给误操作提审。

以我之前折腾 Jenkins 任务的经验，在思考小程序是否也能做到自动化构建，同时能够支持多迭代并行开发、测试。最终我把目光放到了微信小程序官方提供的 miniprogram-ci 上，最终配合现有的 Jenkins 任务解决了团队中上述问题，同时也整理出整个过程中核心点，也希望可以给有同样困扰的同学一些思路。

目录

  • 核心原理
    • 利用 nodejs 调用 miniprogram-ci 包提供的 api
    • 利用 Jenkins 执行自己封装的脚本
    • 通过调用预览的 api ，打包出预览的二维码，以实现多个版本的代码本地测试
    • 通过调用上传的 api，自动提交代码至微信后台，便于小程序提审
    • 核心代码封装：
    /**
 * @Description: 用于小程序 CI 命令执行，通过 npm 命令的方式上传代码至微信服务器
 * @Author: hauk0101
 * @Date: 2022-06-3
 * 说明：参考文档 https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html
 */
const index = require('miniprogram-ci');
const path = require('path');
// 版本信息，可以通过命令的方式输入
const versionInfo = require('./versionCode');
// 小程序 AppId
const appId = 'xxx';

// 上传逻辑，执行后会上传至微信后台，可以被选为体验版
;(async () => {
  // ci 初始化
  const project = new index.Project({
    appid: appId,
    type: 'miniProgram',
    projectPath: path.resolve(__dirname, '..','..','dist'),
    privateKeyPath: path.resolve(__dirname,'./private.xxx.key'), // 此处引入小程序对应的私钥
    ignores: ['node_modules/**/*']
  });
  console.log('===================== 微信小程序代码上传开始 ===================');
  const uploadResult = await index.upload({
    project,
    robot:1,
    version: versionInfo.versionCode,
    desc: versionInfo.versionDesc,
    setting: {
      es6: true,
      minify: true
    },
    onProgressUpdate: console.log,
  })
  console.log(uploadResult)
  console.log('===================== 微信小程序代码上传结束 ===================')
})()

// 预览逻辑，执行后会返回一个二维码，可以理解为开发者工具的预览功能
await index.preview({
    project,
    desc: '本次迭代的改动', 
    setting: {
      es6: !cliConfig.isNotPreview ? true : false,
      minify: !cliConfig.isNotPreview ? true : false,
      es7:!cliConfig.isNotPreview ? true : false,
    },
    qrcodeFormat: 'image',
    qrcodeOutputDest: path.resolve(`./dest/preview.jpg`), // 预览二维码的输出目录
    onProgressUpdate: console.log,
  })
  • 基础步骤
    • 配置微信后台相关数据
      • 获取小程序的 appid
      • 下载私钥文件
      miniprogram-ci-1.jpg
      • 配置域名白名单（即执行 api 脚本对应的外网 ip 地址）
      miniprogram-ci-2.jpg
    • 编写调用 api 的 js 文件，参考上述核心原理中的核心代码封装，或直接参考微信小程序的官方文档
    • 配置 Jenkins 的构建任务，可以查看参考资料中配置 Jenkins 任务的相关文档
  • 注意事项
    • 要保存好从微信后台下载的密钥文件，可以根据实际情况做一些文件的权限限制或是构建任务的权限控制
    • 打包服务填写的是对外的地址，而非内网地址
    • 预览的二维码有时效性，和开发者工具中的预览功能类似，所以每次在本地开发或测试时，要即时执行预览的构建操作
  • 拓展
    • 除了 Jenkins 也可以基于 gitlab 的 webhook，或是其他 CI/CD 工具
    • 可以添加企业内部IM的通知（钉钉、飞书的 hooks，将每次构建的结果反馈到沟通群，很方便）
    • 可以将二维码对应的文件目录，通过内网 IP 映射的方式，返回链接，方便使用者访问

杂谈

  • 本文没有花太多时间去讲解如何利用 Jenkins 搭建一套 CI/CD 环境，感兴趣的同学可以查看参考资料中的相关说明
  • 通篇看完之后，会发现整个流程并不复杂，因为核心都是基于微信官方提供的 miniprogram-ci 包的 api 调用，尤其是在掌握了之前分享的 Jenkins 配置 CI/CD 打包流程之后，就变的更加简单
  • 在我看来，更关键的是如何能够利用 miniprogram-ci 和 Jenkins 这两个核心要素，组装成一个便于用户（开发人员、测试人员）使用的服务，即方便团队使用的方案
  • 在查找资料的过程中，发现了由 https://coding.net/ 这个 DevOps 的 SASS 服务，技术核心原理其实是一样的，但是在去查看它所提供的配置页面时，让我意识到一个问题，其实在我们很多基础的技术方案（如：CI/CD ），在做好通用的抽离之后，很多东西都是可以做成平台化，服务更多其他团队，甚至是技术角度的一个产品化方案。比如围绕微信平台的有赞、微伴助手等等
  • 在查找资料时，还找到了一个有意思的方案，并不是利用 miniprogram-ci 的 api ，而是用服务器命令执行的方式，模拟了一个微信开发者工具的调用，从而也实现了自动化的构建预览和上传。这个给我一个很大的收获就是，要敢去想，敢去尝试，不同人对技术的理解是不同的，不要拘泥于已有的经验

参考资料

浏览知识共享许可协议

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

avatar
文章
阅读
粉丝