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

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

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

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

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

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

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

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

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

除了圖形化界面，微信開發(fā)者工具還提供了命令行與 HTTP 服務(wù)兩種接口供外部調(diào)用，來進行登錄、預(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

輸入上面的命令行后，終端中打印出登錄二維碼，使用微信掃碼登錄。在微信端完成操作之后，會輸出 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ù)在工具啟動后自動開啟，每次開啟 host 固定為 127.0.0.1，端口號并不固定。端口號在用戶目錄下記錄，位置如下：

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

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

首先需要運行開發(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ā)者工具運行在${port}端口"

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

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

# 打開工具
http://127.0.0.1:端口號/open
# 打開/刷新項目
http://127.0.0.1:端口號/open?projectpath=項目全路徑

2、登錄：

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

3、預(yù)覽：

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

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

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

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

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

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

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

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

java -jar jenkins.war --httpPort=8888

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

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

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

主要的功能點如下：

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

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

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

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

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

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

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

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

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

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

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

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

const fs = require("fs")

const content = "{"description":"項目配置文件。","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")

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

echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------
# 執(zhí)行項目構(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ā)者工具運行在${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啟動成功！"
else
  echo "返回狀態(tài)碼${return_code}，devtool啟動失敗"
  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ù)覽成功！請掃描二維碼進入開發(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 "上傳成功！請到微信小程序后臺設(shè)置體驗版并提交審核！"
fi

因為本項目需要編譯代碼，所以服務(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ā)者工具啟動之后，才會啟動，所以需要通過命令行調(diào)用方式，來啟動微信開發(fā)者工具

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

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

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

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

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