引言

傳統(tǒng)意義上的持續(xù)集成，是在 Web 端通過(guò)自動(dòng)化的方式將項(xiàng)目打包并上傳到服務(wù)器，這一過(guò)程需要 Git 參與。持續(xù)集成的目的是為了免去手動(dòng)打包、手動(dòng)上傳這一繁瑣且容易出錯(cuò)的步驟，提高部署效率和部署的安全性。

而小程序部署方式與 Web 端不同，它不需要在本地打包，點(diǎn)擊開(kāi)發(fā)者工具中的上傳按鈕就會(huì)發(fā)布版本，版本可以在小程序管理后臺(tái)看到。當(dāng)需要其他人測(cè)試時(shí)，將某個(gè)版本設(shè)置為體驗(yàn)版，然后分享體驗(yàn)版二維碼即可。

為什么小程序也需要持續(xù)集成？

在實(shí)際開(kāi)發(fā)中我們遇到了這樣的問(wèn)題：每個(gè)前端人員上傳后會(huì)產(chǎn)生一個(gè)新版本，不同的人上傳后需要測(cè)試時(shí)，就要登錄到管理后臺(tái)切換體驗(yàn)版，在頻繁測(cè)試場(chǎng)景下這個(gè)過(guò)程非常繁瑣。

那么如何處理呢？解決方案就是將某個(gè)固定的版本號(hào)設(shè)置為體驗(yàn)版（如上圖中的 1.1.0），每個(gè)人都在這個(gè)版本號(hào)下上傳，這樣就不需要在后臺(tái)切換版本了。多人在一個(gè)版本號(hào)下上傳，開(kāi)發(fā)者工具辦不到，此時(shí)需要集成 CI 的能力。

Taro 集成 CI

我司小程序是基于 Taro 開(kāi)發(fā)的，Taro 提供了官方插件 @tarojs/plugin-mini-ci 來(lái)支持持續(xù)集成。使用方式也很方便，文檔在這里。

我們以微信小程序?yàn)槔?，介紹接入持續(xù)集成的正確姿勢(shì)。

1. 小程序后臺(tái)生成上傳密鑰。

用代碼的方式上傳小程序，必然需要微信提供一個(gè)憑證，這個(gè)憑證就是上傳密鑰。在小程序后臺(tái)找到【開(kāi)發(fā)->開(kāi)發(fā)管理->開(kāi)發(fā)設(shè)置】，會(huì)看到“小程序代碼上傳”面板。點(diǎn)擊“生成”按鈕，根據(jù)步驟創(chuàng)建密鑰并下載。

下載后將密鑰命名為 private.key，然后將其保存在項(xiàng)目的 config 目錄下。

2. 安裝插件并配置

在終端執(zhí)行命令：

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

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

const ciPlugin = {
  // 微信小程序
  weapp: {
    appid: 'xxxxx',
    privateKeyPath: 'config/private.key',
  },
  // 版本號(hào)
  version: '1.1.0',
  // 版本發(fā)布描述
  desc: 'CI自動(dòng)發(fā)布',
}
const config = {
  ...
  plugins: [
    ['@tarojs/plugin-mini-ci', ciPlugin]
  ],
}

配置中的 weapp 選項(xiàng)表示微信小程序配置，傳入小程序的 appid，屬性 privateKeyPath 表示下載后的上傳密鑰的路徑（相對(duì)路徑）。簡(jiǎn)單兩步，配置就完成了。

3. 添加上傳命令

Taro 編譯微信小程序時(shí)，通過(guò)命令 taro build --type weapp 來(lái)實(shí)現(xiàn)。如果要在編譯之后自動(dòng)上傳代碼，也就是觸發(fā)我們上一步集成的 CI 插件，只需要添加一個(gè) --upload 參數(shù)。

我們將編譯并上傳單獨(dú)設(shè)置為一個(gè)命令，在 package.json 中設(shè)置如下：

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

在終端執(zhí)行 yarn run upload 命令，控制臺(tái)開(kāi)始執(zhí)行打包，完成后會(huì)自動(dòng)將代碼上傳并設(shè)置為體驗(yàn)版，同時(shí)在控制臺(tái)中自動(dòng)打印出體驗(yàn)版的二維碼，如圖：

現(xiàn)在我們直接截圖分享二維碼即可，再也不需要登錄管理后臺(tái)了。

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

在 Taro 中使用該插件集成 CI 很簡(jiǎn)單，但如果你的小程序不是使用 Taro 開(kāi)發(fā)，應(yīng)該如何實(shí)現(xiàn)持續(xù)集成呢？下面我們解析下該插件的原理。

1. miniprogram-ci

小程序代碼上傳是微信支持的功能，微信團(tuán)隊(duì)發(fā)布了一個(gè)叫 miniprogram-ci 的 NPM 包，支持在 Node.js 中上傳小程序代碼。使用 @tarojs/plugin-mini-ci 插件時(shí)我們傳入的配置，其實(shí)就是 miniprogram-ci 的配置。

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

const ci = require('miniprogram-ci');
// ci項(xiàng)目實(shí)例
const project = new ci.Project({
  appid: 'wxsomeappid',
  type: 'miniProgram',
  projectPath: 'the/project/path',
  privateKeyPath: 'the/path/to/privatekey',
});
// 開(kāi)始上傳
const uploadResult = await ci.upload({
  project,
  version: '1.1.0',
  desc: 'CI自動(dòng)發(fā)布',
  onProgressUpdate: console.log,
});
console.log(uploadResult);

上傳代碼之后，我們還需要將體驗(yàn)碼生成并輸出到控制臺(tái)。

2. 生成體驗(yàn)碼

在小程序中掃描體驗(yàn)碼，會(huì)打開(kāi)當(dāng)前小程序的體驗(yàn)版頁(yè)面，其實(shí)這個(gè)頁(yè)面是 H5 頁(yè)面，地址如下：

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

在鏈接中替換為自己的 appid，就可以將鏈接生成一個(gè)二維碼輸出到控制臺(tái)，這里要借助另一個(gè) NPM 包 qrcode 來(lái)實(shí)現(xiàn)。

首先安裝 qrcode：

$ yarn add qrcode

然后編寫一個(gè)將鏈接生成二維碼，并輸出到控制臺(tái)的方法：

import * as QRCode from 'qrcode';
const printQrcode = async (url) => {
  let terminalStr = await QRCode.toString(url, { type: 'terminal', small: true });
  console.log(terminalStr);
};
// 生成二維碼并輸出到控制臺(tái)
const url = 'https://open.weixin.qq.com/sns/getexpappinfo?appid=xxx#wechat-redirect';
printQrcode(url);

在代碼上傳完成后調(diào)用 printQrcode() 方法，即可打印出體驗(yàn)碼。

總結(jié)

本篇介紹了如何在 Taro 中使用插件集成 CI，并解釋了插件的原理幫助大家在非 Taro 環(huán)境下集成，整體實(shí)現(xiàn)并不困難。

但小程序有自己的場(chǎng)景，一般情況下 CI 只針對(duì)體驗(yàn)版。我們將上傳代碼封裝為 upload 命令，你可以在本地執(zhí)行，當(dāng)然也可以在如 GitHub Action 的自動(dòng)化流水線中執(zhí)行。

以上就是Taro 小程序持續(xù)集成實(shí)現(xiàn)及原理的詳細(xì)內(nèi)容，更多關(guān)于Taro 小程序持續(xù)集成的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論