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

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

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

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

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

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

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

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

Taro 集成 CI

我們以微信小程序?yàn)槔娊尤氤掷m(xù)集成的正確姿態(tài)。

留意：小程序持續(xù)集成至少需求 Taro v3.6.2 的版本，之前的版本會(huì)報(bào)錯(cuò)，請(qǐng)留意晉級(jí)。

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

用代碼的方式上傳小程序，必然需求微信提供一個(gè)憑證，這個(gè)憑證就是上傳密鑰。在小程序后臺(tái)找到【開發(fā)->開發(fā)管理->開發(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ì)途徑）。簡單兩步，配置就完成了。

3. 添加上傳命令

Taro 編譯微信小程序時(shí)，經(jīng)過命令 taro build --type weapp 來完成。假如要在編譯之后自動(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)開端執(zhí)行打包，完成后會(huì)自動(dòng)將代碼上傳并設(shè)置為體驗(yàn)版，同時(shí)在控制臺(tái)中自動(dòng)打印出體驗(yàn)版的二維碼，如圖：

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

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

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

1. miniprogram-ci

小程序代碼上傳是微信支持的功用，微信團(tuán)隊(duì)發(fā)布了一個(gè) NPM 包，支持在 Node.js 中上傳小程序代碼。運(yùn)用 @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', }); // 開端上傳 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ì)翻開當(dāng)前小程序的體驗(yàn)版頁面，其實(shí)這個(gè)頁面是 H5 頁面

在鏈接中交換為本人的 appid，就能夠?qū)㈡溄由梢粋€(gè)二維碼輸出到控制臺(tái)，這里要借助另一個(gè) NPM 包 qrcode 來完成。

首先裝置 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 中運(yùn)用插件集成 CI，并解釋了插件的原理協(xié)助大家在非 Taro 環(huán)境下集成，整體完成并不艱難。

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