win10下搭建Jenkins+微信開發者工具

背景

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

• 小程序開發助手中，同一個開發者只能顯示一個開發版本
• 測試同事找開發要二維碼，效率較低
• 本地生成的二維碼會出現攜帶本地代碼、未及時拉取分支其他改動等問題

爲了避免如上問題的發生，採用微信小程序集成 Jenkins 的方案。
但是網上所有文檔都是基於MacOS部署的，但是實際都是一樣的東西。唯一不一樣的就是在win10環境中使用批處理文件，還需要安裝一些特定的軟件：

wget，node，gitbash（可以不安裝），微信web開發者工具，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，如下圖所示：

HTTP 服務

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

開始部署準備階段

1.安裝wget，node，Jenkins，gitbash，微信開發者工具

node，Jenkins去官網下載msi文件即可安裝便利
wget下載後解壓到D盤根路徑下即可
（所有需要使用到的東西最好不要放到當前用戶觸碰不到的目錄，否則你會哭的很慘）

2.安裝gitbash並且上傳公鑰到代碼庫
#
#

3.配置Jenkins服務權限和更改環境變量（最重要的一步）

打開CMD->輸入services.msc
#
#

找到Jenkins 右鍵->屬性 ->登陸
#
#

#
重啓生效
#

#
#
在Jenkins系統管理——全局安全配置頁面，將標記格式器在下拉列表中修改爲Safe HTML然後保存，這個修改是爲了在build歷史記錄中能夠直接顯示二維碼圖片

JAVA_OPTS
-Dsun.jnu.encoding=UTF-8 -Dfile.encoding=UTF-8

LANG
zh.CH.UTF-8

設置環境變量後重啓生效（也可以不配直接寫絕對路徑）

Jenkins插件安裝

安裝下列Jenkins插件後重啓：

GIT plugin
Git Parameter:獲取所有分支名，作爲參數列表
SSH Credentials Plugin
Git Changelog：獲取Git提交log
build-name-setter
description setter plugin：在build歷史記錄描述信息中增加二維碼顯示
PostBuildScript Plugin：編譯完成後執行腳本
NodeJS Plugin:小程序構建需要，在更改提交狀態時使用node技術
AnsiColor
description setter ：添加set build description獲取圖片

Jenkins項目創建

#
創建一個自由風格的項目
#

#
添加執行批處理構建，並且把如下帶粘貼進去
#

#

#
<img src="http://192.168.120.191:8080/job/DEV-sk_platform_consumers_furniture-wechat/ws/${BUILD_ID}.png" alt="二維碼${BUILD_ID}" width="200" height="200" /> <a href="http://192.168.120.191:8080/job/DEV-sk_platform_consumers_furniture-wechat/ws/${BUILD_ID}.png">二維碼${BUILD_ID}</a&gt;;;;;;;;;;;;
#

chcp 65001     ::更改字符集
set dir=D:\ingo\Jenkins\workspace\DEV-sk_platform_consumers_furniture-wechat
set project=D:\ingo\Jenkins\workspace\DEV-sk_platform_consumers_furniture-wechat\dist
del /F /S /Q %dir%
rd /S /Q %dir%
git clone [email protected]:cdp/sk_platform_consumers_furniture.git %dir%
"C:\Program Files\WinRAR\WinRAR.exe" x -ibck -y -o+ node_modules.rar %dir%
CALL C:\Users\xxxx\AppData\Roaming\npm\taro build --type weapp
CALL "D:\weixin\cli.bat" -o
::for /f "usebackq" %%a in (`type "C:\Windows\System32\config\systemprofile\AppData\Local\微信web開發者工具\User Data\Default\.ide"`) do @set port=%%a
::set /p port= < "C:\Windows\System32\config\systemprofile\AppData\Local\微信web開發者工具\User Data\Default\.ide"
FOR /F "usebackq delims==" %%i IN (`type "C:\Users\xxxx\AppData\Local\微信web開發者工具\User Data\Default\.ide"`) do (
    echo 當前使用端口:%%i
    set port=%%i
)
echo %port%
echo %BUILD_ID%
echo %path%

D:\wget\wget.exe -O %BUILD_ID%.png http://127.0.0.1:%port%/preview?projectpath=%project%

#
構建項目時記得先登陸微信開發者工具，如果沒登陸報錯如下：
#

#

#
添加成員
#
注意代碼裏的appid是否有問題
#
#

#
#

#

#
樓鎮圖