引言

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

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

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

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

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

Taro 集成 CI

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

我們以微信小程序為例，介紹接入持續(xù)集成的正確姿勢。

1. 小程序后臺生成上傳密鑰。

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

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

2. 安裝插件并配置

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

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

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

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

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

3. 添加上傳命令

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

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

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

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

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

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

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

1. miniprogram-ci

小程序代碼上傳是微信支持的功能，微信團隊發(fā)布了一個叫 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自動發(fā)布',
  onProgressUpdate: console.log,
});
console.log(uploadResult);

上傳代碼之后，我們還需要將體驗碼生成并輸出到控制臺。

2. 生成體驗碼

在小程序中掃描體驗碼，會打開當(dāng)前小程序的體驗版頁面，其實這個頁面是 H5 頁面，地址如下：

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

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

首先安裝 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);

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

總結(jié)

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

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

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

最新評論