Taro 小程序持續(xù)集成

NestJS 入門到實戰(zhàn) 前端必學(xué)服務(wù)端新趨勢

download：https://www.51xuebc.com/thread-511-1-1.html

傳統(tǒng)意義上的持續(xù)集成，是在 Web 端經(jīng)過自動化的方式將項目打包并上傳到效勞器，這一過程需求 Git 參與。持續(xù)集成的目的是為了免去手動打包、手動上傳這一繁瑣且容易出錯的步驟，進(jìn)步部署效率和部署的平安性。

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

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

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

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

Taro 集成 CI

我們以微信小程序為例，引見接入持續(xù)集成的正確姿態(tài)。

留意：小程序持續(xù)集成至少需求 Taro v3.6.2 的版本，之前的版本會報錯，請留意晉級。

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 編譯微信小程序時，經(jīng)過命令 taro build --type weapp 來完成。假如要在編譯之后自動上傳代碼，也就是觸發(fā)我們上一步集成的 CI 插件，只需求添加一個 --upload 參數(shù)。

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

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

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

如今我們直接截圖分享二維碼即可，再也不需求登錄管理后臺了。

@tarojs/plugin-mini-ci 原了解M

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

1. miniprogram-ci

小程序代碼上傳是微信支持的功用，微信團(tuán)隊發(fā)布了一個 NPM 包，支持在 Node.js 中上傳小程序代碼。運(yùn)用 @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 頁面

在鏈接中交換為本人的 appid，就能夠?qū)㈡溄由梢粋€二維碼輸出到控制臺，這里要借助另一個 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);

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

總結(jié)

本篇引見了如何在 Taro 中運(yùn)用插件集成 CI，并解釋了插件的原理協(xié)助大家在非 Taro 環(huán)境下集成，整體完成并不艱難。

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