关于javascript:Taro-小程序持续集成

大家好，我是杨胜利。

传统意义上的继续集成，是在 Web 端通过自动化的形式将我的项目打包并上传到服务器，这一过程须要 Git 参加。继续集成的目标是为了免去手动打包、手动上传这一繁琐且容易出错的步骤，进步部署效率和部署的安全性。

而小程序部署形式与 Web 端不同，它不须要在本地打包，点击开发者工具中的上传按钮就会公布版本，版本能够在小程序管理后盾看到。当须要其他人测试时，将某个版本设置为体验版，而后分享体验版二维码即可。

为什么小程序也须要继续集成？

在理论开发中咱们遇到了这样的问题：每个前端人员上传后会产生一个新版本，不同的人上传后须要测试时，就要登录到治理后盾切换体验版，在频繁测试场景下这个过程十分繁琐。

那么如何解决呢？解决方案就是将某个固定的版本号设置为体验版（如上图中的 v1.1.0），每个人都在这个版本号下上传，这样就不须要在后盾切换版本了。多人在一个版本号下上传，开发者工具办不到，此时须要集成 CI 的能力。

Taro 集成 CI

我司小程序是基于 Taro 开发的，Taro 提供了官网插件 @tarojs/plugin-mini-ci 来反对继续集成。应用形式也很不便，文档在 [这里]。(https://docs.taro.zone/docs/plugin-mini-ci)

咱们以微信小程序为例，介绍接入继续集成的正确姿态。

留神：小程序继续集成至多须要 Taro v3.6.2 的版本，之前的版本会报错，请留神降级。

1. 小程序后盾升成上传密钥。

用代码的形式上传小程序，必然须要微信提供一个凭证，这个凭证就是上传密钥。在小程序后盾找到【开发 -> 开发治理 -> 开发设置】，会看到“小程序代码上传”面板。点击“生成”按钮，依据步骤创立密钥并下载。

下载后将密钥命名为 private.key，而后将其保留在我的项目的 config 目录下。

2. 装置插件并配置

在终端执行命令：

$ yarn add @tarojs/plugin-mini-ci -D

在配置文件 config/index.js 中引入插件并配置：

const ciPlugin = {
  // 微信小程序
  weapp: {
    appid: 'xxxxx',
    privateKeyPath: 'config/private.key',
  },
  // 版本号
  version: '1.1.0',
  // 版本公布形容
  desc: 'CI 主动公布',
}

const config = {
  ...
  plugins: [['@tarojs/plugin-mini-ci', ciPlugin]
  ],
}

配置中的 weapp 选项示意微信小程序配置，传入小程序的 appid，属性 privateKeyPath 示意下载后的上传密钥的门路（相对路径）。简略两步，配置就实现了。

3. 增加上传命令

Taro 编译微信小程序时，通过命令 taro build --type weapp 来实现。如果要在编译之后主动上传代码，也就是触发咱们上一步集成的 CI 插件，只须要增加一个 --upload 参数。

咱们将编译并上传独自设置为一个命令，在 package.json 中设置如下：

{
  "scripts": {"upload": "taro build --type weapp --upload"}
}

在终端执行 yarn run upload 命令，控制台开始执行打包，实现后会主动将代码上传并设置为体验版，同时在控制台中主动打印出体验版的二维码，如图：

当初咱们间接截图分享二维码即可，再也不须要登录治理后盾了。

@tarojs/plugin-mini-ci 原理解密

在 Taro 中应用该插件集成 CI 很简略，但如果你的小程序不是应用 Taro 开发，应该如何实现继续集成呢？上面咱们解析下该插件的原理。

1. miniprogram-ci

小程序代码上传是微信反对的性能，微信团队公布了一个叫 miniprogram-ci 的 NPM 包，反对在 Node.js 中上传小程序代码。应用 @tarojs/plugin-mini-ci 插件时咱们传入的配置，其实就是 miniprogram-ci 的配置。

在 Node.js 中，miniprogram-ci 的用法如下：

const ci = require('miniprogram-ci');
// ci 我的项目实例
const project = new ci.Project({
  appid: 'wxsomeappid',
  type: 'miniProgram',
  projectPath: 'the/project/path',
  privateKeyPath: 'the/path/to/privatekey',
});
// 开始上传
const uploadResult = await ci.upload({
  project,
  version: '1.1.0',
  desc: 'CI 主动公布',
  onProgressUpdate: console.log,
});
console.log(uploadResult);

上传代码之后，咱们还须要将体验码生成并输入到控制台。

2. 生成体验码

在小程序中扫描体验码，会关上以后小程序的体验版页面，其实这个页面是 H5 页面，地址如下：

https://open.weixin.qq.com/sns/getexpappinfo?appid=xxx#wechat-redirect

在链接中替换为本人的 appid，就能够将链接生成一个二维码输入到控制台，这里要借助另一个 NPM 包 qrcode 来实现。

首先装置 qrcode：

$ yarn add qrcode

而后编写一个将链接生成二维码，并输入到控制台的办法：

import * as QRCode from 'qrcode';
const printQrcode = async (url) => {let terminalStr = await QRCode.toString(url, { type: 'terminal', small: true});
  console.log(terminalStr);
};

// 生成二维码并输入到控制台
const url = 'https://open.weixin.qq.com/sns/getexpappinfo?appid=xxx#wechat-redirect';
printQrcode(url);

在代码上传实现后调用 printQrcode() 办法，即可打印出体验码。

总结

本篇介绍了如何在 Taro 中应用插件集成 CI，并解释了插件的原理帮忙大家在非 Taro 环境下集成，整体实现并不艰难。

但小程序有本人的场景，个别状况下 CI 只针对体验版。咱们将上传代码封装为 upload 命令，你能够在本地执行，当然也能够在如 GitHub Action 的自动化流水线中执行。

如果有小伙伴对 Taro 跨端开发有趣味，欢送加我微信  ruidoc  拉你进入前端工程与架构群，或者关注我的公众号  程序员胜利  查看更多文章。

再次感谢您的浏览～