摘要：總結(jié)本文以微信小程序常規(guī)的發(fā)布流程為切入點(diǎn)，循序漸進(jìn)地介紹了如何集成實(shí)現(xiàn)微信小程序預(yù)覽上傳功能。

本文首發(fā)于 https://github.com/yingye/Blo... ，歡迎各位關(guān)注我的Blog，正文以issue形式呈現(xiàn)，喜歡請(qǐng)點(diǎn)star，訂閱請(qǐng)點(diǎn)watch～

微信小程序的測(cè)試發(fā)布在沒有 CI/CD 等相關(guān)工具的情況下，存在著如下的問題：

小程序開發(fā)助手中，同一個(gè)開發(fā)者只能顯示一個(gè)開發(fā)版本

測(cè)試同事找開發(fā)要二維碼，效率較低

本地生成的二維碼會(huì)出現(xiàn)攜帶本地代碼、未及時(shí)拉取分支其他改動(dòng)等問題

為了避免如上問題的發(fā)生，采用微信小程序集成 Jenkins 的方案。

在介紹實(shí)現(xiàn)方案之前，先來回顧一下常規(guī)的微信小程序發(fā)布流程。

從上面的流程圖可以看出，微信小程序預(yù)覽、上傳都是需要在微信開發(fā)者工具中進(jìn)行的，接下來了解一下微信開發(fā)者工具提供的上傳方式。

除了圖形化界面，微信開發(fā)者工具還提供了命令行與 HTTP 服務(wù)兩種接口供外部調(diào)用，來進(jìn)行登錄、預(yù)覽、上傳等操作。

命令行工具所在位置：

macOS: <安裝路徑>/Contents/Resources/app.nw/bin/cli
Windows: <安裝路徑>/cli.bat

以 macOS 操作系統(tǒng)示例：

1、打開開發(fā)者工具：

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o

其中，/Applications/wechatwebdevtools.app/為安裝路徑。

2、登錄：

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -l

輸入上面的命令行后，終端中打印出登錄二維碼，使用微信掃碼登錄。在微信端完成操作之后，會(huì)輸出 login success，如下圖所示：

如果想得到 base64 形式的二維碼，可以使用下面的命令：

# 登錄，在終端中打印登錄 base64 形式的二維碼
cli -l --login-qr-output base64

# 登錄，二維碼轉(zhuǎn)成 base64 并存到文件 /Users/username/code.txt 
cli -l --login-qr-output base64@/Users/username/code.txt

更多 API 可以參考 命令行調(diào)用 。

HTTP 服務(wù)在工具啟動(dòng)后自動(dòng)開啟，每次開啟 host 固定為 127.0.0.1，端口號(hào)并不固定。端口號(hào)在用戶目錄下記錄，位置如下：

macOS : ~/Library/Application Support/微信web開發(fā)者工具/Default/.ide
Windows : ~/AppData/Local/微信web開發(fā)者工具/User Data/Default/.ide

以 macOS 操作系統(tǒng)示例：

首先需要運(yùn)行開發(fā)者工具，可以利用上面介紹的命令行方法打開微信開發(fā)者工具。

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/zyy/Library/Application Support/微信web開發(fā)者工具/Default/.ide")
echo "微信開發(fā)者工具運(yùn)行在${port}端口"

這樣就可以拿到微信開發(fā)者工具運(yùn)行的端口號(hào)了，其中，/Users/zyy/ 為用戶目錄。

1、打開開發(fā)者工具：

# 打開工具
http://127.0.0.1:端口號(hào)/open
# 打開/刷新項(xiàng)目
http://127.0.0.1:端口號(hào)/open?projectpath=項(xiàng)目全路徑

2、登錄：

# 登錄，返回圖片格式的二維碼
http://127.0.0.1:端口號(hào)/login
# 登錄，取 base64 格式二維碼
http://127.0.0.1:端口號(hào)/login?format=base64
# 登錄，取 base64 格式二維碼，并寫入 /Users/username/logincode.txt
http://127.0.0.1:端口號(hào)/login?format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt

3、預(yù)覽：

# 預(yù)覽路徑為 /Users/username/demo 的項(xiàng)目，返回圖片格式的二維碼
http://127.0.0.1:端口號(hào)/preview?projectpath=%2FUsers%2Fusername%2Fdemo

# 預(yù)覽路徑為 /Users/username/demo 的項(xiàng)目，返回 base64 格式的二維碼
http://127.0.0.1:端口號(hào)/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64

# 預(yù)覽路徑為 /Users/username/demo 的項(xiàng)目，返回 base64 格式的二維碼，并寫入 /Users/username/logincode.txt
http://127.0.0.1:端口號(hào)/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt

# 預(yù)覽路徑為 /Users/username/demo 的項(xiàng)目，返回圖片格式的二維碼，并將預(yù)覽信息輸出至 /Users/username/info.json
http://127.0.0.1:端口號(hào)/preview?projectpath=%2FUsers%2Fusername%2Fdemo&infooutput=%2Users%2username%2info.json

更多 API 可以參考 HTTP 調(diào)用 。

微信開發(fā)者工具目前只有 macOS 和 Windows 兩種版本，這限制了服務(wù)器的系統(tǒng)。下面以 macOS 為例，
來介紹具體的實(shí)現(xiàn)過程：

The leading open source automation server, Jenkins provides hundreds of plugins to support building, deploying and automating any project.  
作為領(lǐng)先的開源自動(dòng)化服務(wù)器，Jenkins提供數(shù)百個(gè)插件來支持構(gòu)建，部署和自動(dòng)化任何項(xiàng)目。

Jenkins 依賴于 Java 運(yùn)行環(huán)境，所以需要在機(jī)器上安裝 Java。安裝 Jenkins 方式很多，可以在官網(wǎng)直接下載最新的軟件包，然后執(zhí)行下面的命令啟動(dòng) Jenkins 。

java -jar jenkins.war --httpPort=8888

其中，--httpPort=8888 為設(shè)置服務(wù)端口號(hào)，默認(rèn)端口號(hào)為 8080 。

選擇 “構(gòu)建一個(gè)自由風(fēng)格的軟件項(xiàng)目” ，在輸入任務(wù)名稱之后，點(diǎn)擊確定按鈕，進(jìn)入到任務(wù)配置頁面。

在介紹任務(wù)配置之前，先來看一下最終要實(shí)現(xiàn)的功能。

主要的功能點(diǎn)如下：

使用 git 來管理代碼，可以選擇分支

打包版本（開發(fā)版／體驗(yàn)版）可以選擇（注意：這里的「開發(fā)版」對(duì)應(yīng)「預(yù)覽」，體驗(yàn)版對(duì)應(yīng)「上傳」）

在任務(wù)配置頁面的第二項(xiàng) “源碼管理” 中，選擇 git 方式管理代碼。填入 git 倉庫地址及訪問的賬戶，上圖中的 $branch 是自定義的構(gòu)建參數(shù)，下面來看一下構(gòu)建參數(shù)的定義。

在任務(wù)配置頁面的第二項(xiàng) “General” 中，選擇 “參數(shù)化構(gòu)建過程”，進(jìn)入構(gòu)建參數(shù)配置頁面。

參數(shù)有上述的幾種類型供選擇，可以參考下圖進(jìn)行配置，這里不再贅述。

需要注意的是，這里的 name 可以通過 $name 的形式獲取到，例如上面提到的 $branch 。

在任務(wù)配置頁面的 “構(gòu)建” 中，選擇 “執(zhí)行 shell” 方式來進(jìn)行構(gòu)建。

Tips：這里的 shell 腳本是微信小程序集成 Jenkins 最核心的內(nèi)容。

回顧一下，本文最開始提到的微信小程序發(fā)布流程圖：

這一系列的操作使用 shell 腳本來完成，如何實(shí)現(xiàn)呢？

微信開發(fā)者工具的登錄需要在微信端掃碼確認(rèn)，這一步微信并沒有提供賬號(hào)密碼的登錄方式。不過，微信開發(fā)者工具是可以保持登錄態(tài)的。由于微信限制，一個(gè)開發(fā)者身份只能在一個(gè)終端登錄，所以我們申請(qǐng)了一個(gè)新的微信賬號(hào)「前端小姐姐」用于在 Jenkins 機(jī)器上登錄。

在圖形化界面中，上傳代碼時(shí)，會(huì)在開發(fā)者工具中填入 AppID 、項(xiàng)目路徑等信息，也會(huì)在「詳情」中選擇項(xiàng)目的基本設(shè)置，比如「ES6 轉(zhuǎn) ES5」。微信還提供了一種配置方法，在項(xiàng)目根目錄使用 project.config.json 文件。這里通過一段 node 腳本，生成 project.config.json 文件。

const fs = require("fs")

const content = "{"description":"項(xiàng)目配置文件。","setting":{"urlCheck":false,"es6":true,"postcss":true,"minified":true,"newFeature":true},"miniprogramRoot":"./","compileType":"miniprogram","appid":"***","projectname":"wechat-app","condition":{"search":{"current":-1,"list":[]},"conversation":{"current":-1,"list":[]},"plugin":{"current":-1,"list":[]},"game":{"currentL":-1,"list":[]},"miniprogram":{"current":-1,"list":[]}}}"

fs.writeFileSync("./dist/project.config.json", content, "utf-8")

這樣就完成了項(xiàng)目的基礎(chǔ)設(shè)置，接下來將介紹如何通過 shell 腳本完成上傳。

echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------
# 執(zhí)行項(xiàng)目構(gòu)建
npm i --registry=http://registry.npm.taobao.org
npm run build
# 打開微信開發(fā)者工具
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/devops/Library/Application Support/微信web開發(fā)者工具/Default/.ide")
echo "微信開發(fā)者工具運(yùn)行在${port}端口"
return_code=$(curl -sL -w %{http_code} http://127.0.0.1:${port}/open)
if [ $return_code == 200 ]
  then
  echo "返回狀態(tài)碼200，devtool啟動(dòng)成功！"
else
  echo "返回狀態(tài)碼${return_code}，devtool啟動(dòng)失敗"
  exit 1
fi
if [ "$build_type" == "dev" ]
  then
  echo "發(fā)布開發(fā)版！"
  wget -O $BUILD_ID.png http://127.0.0.1:${port}/preview?projectpath=/Users/Shared/Jenkins/Home/workspace/fe-wechat-app/dist
  echo "預(yù)覽成功！請(qǐng)掃描二維碼進(jìn)入開發(fā)版！"
elif [ "$build_type" == "prod" ]
  then
  echo "準(zhǔn)備上傳！"
  /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -u 1.0.0@/Users/Shared/Jenkins/Home/workspace/fe-wechat-app/dist --upload-desc "initial release"
  echo "上傳成功！請(qǐng)到微信小程序后臺(tái)設(shè)置體驗(yàn)版并提交審核！"
fi

因?yàn)楸卷?xiàng)目需要編譯代碼，所以服務(wù)器上需要安裝 node 和 npm。npm run build 命令不光在編譯代碼，而且還執(zhí)行了前面介紹的生成 project.config.json 的 node 腳本。

開發(fā)版上傳成功后，將二維碼圖片保存下來，用于構(gòu)建后顯示二維碼和發(fā)送郵件。

這里結(jié)合命令行調(diào)用和 HTTP 調(diào)用兩種方式來完成上傳，主要出于以下原因：

HTTP 調(diào)用可以很方便的下載生成的二維碼圖片

HTTP 服務(wù)只有在微信開發(fā)者工具啟動(dòng)之后，才會(huì)啟動(dòng)，所以需要通過命令行調(diào)用方式，來啟動(dòng)微信開發(fā)者工具

使用 description setter plugin 插件來實(shí)現(xiàn)，構(gòu)建完成后顯示二維碼圖片。

回到 Jenkins 主頁，在「系統(tǒng)管理」中，進(jìn)入到「插件管理」頁面，搜索 description setter plugin 并安裝。

安裝好插件后，返回任務(wù)配置頁面。在「構(gòu)建后操作」中，增加「Set build description」步驟，如下圖：

這里采用 HTML 二維碼${BUILD_ID}

按照上面的方式配置后，發(fā)現(xiàn)圖片并沒有顯示出來，而是顯示了文本信息。這是由于 Jenkins 出于安全的限制，所有描述信息的 Markup Formatter 默認(rèn)都采用 Plain text 的模式。