一、前情提要成

1.1 改造的目的概述

在开发小程序的完成项目流程当中，免不了需要上传代码到微信平台，这个处理在以前是只能通过小程序开发者工具界面进行人工手动点击按钮进行；这个过程是十分枯燥并且一定程度上消耗了宝贵的人力资源。后续微信提供了小程序的 CI 工具，正式进入通过跑脚本命令来自动化上传代码的阶段。

自动化上传代码很大程度上解放了工程师的人力资源，将有限的资源能够投入到其他更加有价值的创造活动当中，这个也就是这篇文章想要进行优化改造的最主要的目的。

1.2 小程序 CI 工具的了解

上图是截取自腾讯小程序官方文档，说明了 miniprogram-ci 的主要功能是能够通过不打开微信小程序开发者工具便能实现小程序代码上传和预览的操作。

miniprogram-ci 具体的功能

随着工具包的不断升级，目前 miniprogram-ci 已经能够实现除了小程序页面代码的上传与预览，云能力相关的能力也被覆盖集成在这个 miniprogram-ci 的工具包里面了。不过该篇文章主要还是以上传小程序页面代码为重点功能围绕展开，其他云能力也是类似的，不再累赘讲述。

---

二、落地实践

2.1 使用 miniprogram-ci 实现自动化上传代码

密钥及 IP 白名单配置

通过 miniprogram-ci 上传代码需要通过小程序秘钥已经配置的网络白名单的校验，因此在真正进行代码上传之前还需要做一些前置的校验配置工作。

获取秘钥并且下载秘钥文件：

---

访问 "微信公众平台 - 开发 - 开发设置" 后下载代码上传密钥文件。代码上传密钥拥有预览、上传代码的权限。

小程序的密钥不会明文存储在微信公众平台上，一旦遗失必须重置，请开发者妥善保管。

白名单配置：

同样在 "微信公众平台 - 开发 - 开发设置" 内配置 IP 白名单 开发者可选择打开 IP 白名单，打开后只有白名单中的 IP 才能调用相关接口，该白名单能够有效降低小程序运维发布的风险。

安装 CI 工具包

npm install miniprogram-ci --save-dev

工具包的基本使用

IProject

miniprogram-ci 的基本操作都是基于“IProject”这个实例对象之上。这里简单描述几个在实例化对象时候使用到的参数，具体其他的参数这里就不累赘描述了，可自行查看官方文档。

• type：项目的类型 - miniProgram/miniProgramPlugin/miniGame/miniGamePlugin
• appid：小程序的 appid
• projectPath：小程序项目代码文件根目录路径
• privateKeyPath：对应小程序的秘钥文件路径
• ignores：需要忽略的目录路径

const ci = require('miniprogram-ci')

const project = new ci.Project({
	type: 'miniProgram', // 项目的类型 - miniProgram/miniProgramPlugin/miniGame/miniGamePlugin
  appid: 'wxappid', // 各自小程序的 appid
  projectPath: 'weapp/project/path', // 小程序项目代码文件根目录路径
  privateKeyPath: 'weapp/privatekey/path', // 对应小程序的秘钥文件路径
  ignores: ['node_modules/**/*'], // 需要忽略的目录
})

上传代码

在创建 IProject 对象实例后，我们便可以利用该对象实例来调用ci.uploadapi来进行代码上传了。这里同样也是简单的介绍 upload 的简单配置属性使用，具体可自行查看官方文档。

• project：前面提及到的 IProject 实例化对象
• version：自定义上传代码的版本号
• desc：上传代码版本的备注
• setting：编译设置 - 具体查看腾讯小程序文档
• onProgressUpdate：上传进度更新的回调函数，可以利用该回调函数来整花里胡哨的进度条

const ci = require('miniprogram-ci')
  
;(async () => {
  const project = new ci.Project({
  	type: 'miniProgram',
    appid: 'wxappid', // 小程序的 appid
    projectPath: 'weapp/project/path', // 小程序项目代码文件根目录路径
    privateKeyPath: 'weapp/privatekey/path', // 对应小程序的秘钥文件路径
    ignores: ['node_modules/**/*'], // 需要忽略的目录
  })
  
  const uploadResult = await ci.upload({
    project, // IProject 对象实例
    version: '1.1.1', // 自定义上传代码的版本号
    desc: '测试 miniprogram-ci 自动化上传代码', // 上传代码版本的备注
    setting: { // 上传代码时候的设置
      es6: true,
      es7: true,
      minify: true,
    },
    onProgressUpdate: console.log,
  })
  
  console.log(uploadResult)
})()

这里展示一下通过 miniprogram-ci 自动化上传代码的运行结果：

2.2 结合 Jenkins 进行项目持续化集成

在通过 miniprogram-ci 进行代码自动化脚本上传已经成功的给解放了工程师们一定程度的工作量，不用再繁琐的打开对应的微信开发者工具点击上传按钮就能够上传相关的项目代码。但是是否能够有进一步的更加快捷方便的进行自动化的构建呢，例如结合着 git 的项目仓库来进行提交合并某个分支的代码后能够通过某项技术自动化进行小程序代码的构建与上传，进一步的简化整个项目的持续性集成流程？答案肯定是有的，目前较为流行的两种形式为 git 相关的 CI/CD 以及 Jenkins 的持续集成工具（笔者相对于 CI/CD 来说对 Jenkins 较为熟悉，这里以 Jenkins 为例子简单讲述）。

因为这篇文章着重讲述还是小程序 miniprogram-ci 的使用而不是 Jenkins 的扫盲贴，因此这里就不着重篇幅讲述 Jenkins 的安装与基本使用了，直接就是两个工具之间的结合使用了。

小程序 CI 上传代码脚本

前面各个章节其实已经讲述了一个轮廓大概了，这里就简单讲述 CI 脚本和项目构建脚本之间的链接关系，为后续小程序项目接入 Jenkins 实现项目持续化集成做铺垫。

1. 配置域名和安装相关 CI 依赖

• 平台关闭上传代码校验域名白名单（也可以明确了域名后开启校验，这里简单操作就直接关闭校验
• 获取 ci 上传秘钥 key 并下载文件（后续使用
• 项目执行npm i miniprogram-ci -D命令安装 CI 工具依赖

2. 编写相关上传代码和

在项目的根目录当中创建 build 文件夹并且在该文件夹创建两个文件ci.key与ci.js

ci.key：前面下载的上传秘钥 key 文件直接将内容拷贝过来，这里涉及相关隐私信息就不展示内容了

ci.js：主要编写调用 CI 上传代码的逻辑

const ci = require('miniprogram-ci')
const minimist = require('minimist')

/**
 * @typedef {object} CIParams
 * @prop {string} version 小程序版本
 */

/**
 * @type {CIParams}
 */
const args = minimist(process.argv.slice(2))

/**
 * 上传版本到小程序管理后台，可以选择提审
 */
function uploadWeapp() {
  ci.upload({
    project: new ci.Project({
    appid: 'xxxx',
    privateKeyPath: 'build/ci.key',
    projectPath: 'dist',
  }),
    version: args.version,
    desc: args.env === 'prod' ? '生产环境CI 上传' : '测试环境CI 上传',
    robot: args.env === 'prod' ? 2 : 1,
  })
    .then((uploadResult) => {
      console.log('上传结果：', uploadResult)
    })
    .catch((err) => {
      console.error(err)
    })
}

uploadWeapp()

至此，小程序上传代码端已经处理完了，接下来就是 Jenkins 自动化构建配置的相关步骤了。

Jenkins 构建项目配置流程

1. 项目源码配置

创建了一个 Jenkins 构建项目后，首先就是要对这个构建项目绑定一个 git 仓库。主要配置 git 仓库的访问路径链接、身份认证（账号或者 ssh 等）、构建项目时候使用的分支。

2. 构建触发器配置

配置仓库后需要配置该项目以一种什么形式进行触发自动化构建。这里项目当中选择的是每天的早上 7:30 左右进行构建，当然也可以利用 Jenkins 来监听 git hook 进而实现 commit/push 后自动对代码进行构建；这里就不展开，有兴趣的自行查阅相关资料。

3. 构建环境配置

当然要构建的话肯定需要配置相关的一个构建的环境，小程序项目主要是需要 node.js 来安装 package.json 进行源码的打包构建操作，因此这里需要配置的就是 node 环境，至于需要安装的 node 版本是多少就需要结合着自身的小程序项目来进行配置。

4. 构建命令配置

配置了触发时机后需要配置相关的构建操作了，这里更多还是需要以自己项目的实际情况进行配置，这里简述下这块主要的命令的相关逻辑：

1. 执行 npm install 安装小程序项目 package.json 的依赖；
2. 执行 build 命令来进行项目源码的打包构建操作；
3. 执行前面章节所讲述编写的小程序 CI 自动上传代码的脚本；

小结与展望：

经过上述编写的小程序 CI 脚本和在 Jenkins 里面配置相关的打包构建项目，我们算是简易实现了对小程序项目的持续化集成构建的改造操作了。哎，是不是发现其实还是有点东西还没完全整完，对，目前也仅仅是做到了能够自动化构建和利用 CI 上传代码；小程序的提审测试及发布等后续一系列操作目前腾讯微信官方还是没有相关能够自动化处理的脚本、api 等开放功能，后续希望腾讯微信能够开放相关的更大权限的 api 功能方便我们这些底层搬砖劳动人民。

---

参考资料：

同系列文章：

• 小程序优化之旅(一) -- 接入分包实践：juejin.cn/post/713991…
• 小程序优化之旅(二) -- 分包与启动加载优化：juejin.cn/post/715696…
• 小程序优化之旅(三) -- 预请求优化：juejin.cn/post/716332…

相关知识参考资料：

• 概述 | 微信开放文档：developers.weixin.qq.com/minigame/de…
• Jenkins - 打造强大的前端自动化工作流：juejin.cn/post/717132…