Taro 小程式持續整合

楊成功發表於2023-03-18

大家好，我是楊成功。

傳統意義上的持續整合，是在 Web 端透過自動化的方式將專案打包並上傳到伺服器，這一過程需要 Git 參與。持續整合的目的是為了免去手動打包、手動上傳這一繁瑣且容易出錯的步驟，提高部署效率和部署的安全性。

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

為什麼小程式也需要持續整合？

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

2023-03-17-16-46-15.png

那麼如何處理呢？解決方案就是將某個固定的版本號設定為體驗版（如上圖中的 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. 小程式後臺升成上傳金鑰。

用程式碼的方式上傳小程式，必然需要微信提供一個憑證，這個憑證就是上傳金鑰。在小程式後臺找到【開發->開發管理->開發設定】，會看到“小程式程式碼上傳”皮膚。點選“生成”按鈕，根據步驟建立金鑰並下載。

2023-03-17-17-04-21.png

下載後將金鑰命名為 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 命令，控制檯開始執行打包，完成後會自動將程式碼上傳並設定為體驗版，同時在控制檯中自動列印出體驗版的二維碼，如圖：

2023-03-17-18-43-57.png

現在我們直接截圖分享二維碼即可，再也不需要登入管理後臺了。

@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  拉你進入前端工程與架構群，或者關注我的公眾號  程式設計師成功  檢視更多文章。

再次感謝您的閱讀～

相關文章