摘要：總結本文以微信小程序常規的發布流程為切入點，循序漸進地介紹了如何集成實現微信小程序預覽上傳功能。

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

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

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

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

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

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

在介紹實現方案之前，先來回顧一下常規的微信小程序發布流程。

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

除了圖形化界面，微信開發者工具還提供了命令行與 HTTP 服務兩種接口供外部調用，來進行登錄、預覽、上傳等操作。

命令行工具所在位置：

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

以 macOS 操作系統示例：

1、打開開發者工具：

/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

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

更多 API 可以參考 命令行調用 。

HTTP 服務在工具啟動后自動開啟，每次開啟 host 固定為 127.0.0.1，端口號并不固定。端口號在用戶目錄下記錄，位置如下：

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

以 macOS 操作系統示例：

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

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

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

1、打開開發者工具：

# 打開工具
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、預覽：

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

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

# 預覽路徑為 /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

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

更多 API 可以參考 HTTP 調用 。

微信開發者工具目前只有 macOS 和 Windows 兩種版本，這限制了服務器的系統。下面以 macOS 為例，
來介紹具體的實現過程：

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

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

java -jar jenkins.war --httpPort=8888

其中，--httpPort=8888 為設置服務端口號，默認端口號為 8080 。

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

在介紹任務配置之前，先來看一下最終要實現的功能。

主要的功能點如下：

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

打包版本（開發版／體驗版）可以選擇（注意：這里的「開發版」對應「預覽」，體驗版對應「上傳」）

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

在任務配置頁面的第二項 “General” 中，選擇 “參數化構建過程”，進入構建參數配置頁面。

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

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

在任務配置頁面的 “構建” 中，選擇 “執行 shell” 方式來進行構建。

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

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

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

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

在圖形化界面中，上傳代碼時，會在開發者工具中填入 AppID 、項目路徑等信息，也會在「詳情」中選擇項目的基本設置，比如「ES6 轉 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")

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

echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------
# 執行項目構建
npm i --registry=http://registry.npm.taobao.org
npm run build
# 打開微信開發者工具
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/devops/Library/Application Support/微信web開發者工具/Default/.ide")
echo "微信開發者工具運行在${port}端口"
return_code=$(curl -sL -w %{http_code} http://127.0.0.1:${port}/open)
if [ $return_code == 200 ]
  then
  echo "返回狀態碼200，devtool啟動成功！"
else
  echo "返回狀態碼${return_code}，devtool啟動失敗"
  exit 1
fi
if [ "$build_type" == "dev" ]
  then
  echo "發布開發版！"
  wget -O $BUILD_ID.png http://127.0.0.1:${port}/preview?projectpath=/Users/Shared/Jenkins/Home/workspace/fe-wechat-app/dist
  echo "預覽成功！請掃描二維碼進入開發版！"
elif [ "$build_type" == "prod" ]
  then
  echo "準備上傳！"
  /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 "上傳成功！請到微信小程序后臺設置體驗版并提交審核！"
fi

因為本項目需要編譯代碼，所以服務器上需要安裝 node 和 npm。npm run build 命令不光在編譯代碼，而且還執行了前面介紹的生成 project.config.json 的 node 腳本。

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

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

HTTP 調用可以很方便的下載生成的二維碼圖片

HTTP 服務只有在微信開發者工具啟動之后，才會啟動，所以需要通過命令行調用方式，來啟動微信開發者工具

使用 description setter plugin 插件來實現，構建完成后顯示二維碼圖片。

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

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

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

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