背景
小程序編譯、打包、預覽均需要依賴開發者工具進行，且團隊中成員均需要開通代碼倉庫權限，比較繁瑣。故在官方論壇中找到以下CI集成插件，並結合jenkins做成了自動打碼，詳細介紹如下
一、miniprogram-ci工具
概述
miniprogram-ci 是從微信開發者工具中抽離的關於小程序/小游戲項目代碼的編譯模塊。開發者可不打開小程序開發者工具，獨立使用 miniprogram-ci 進行小程序代碼的上傳、預覽等操作。
詳細介紹見官網
https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html
二、工具准備內容
- 密鑰
- IP白名單配置
- appid
- 一個存放打包后二維碼的目錄
三、注意事項
- 密鑰、存放二維碼的目錄不能和小程序代碼同級，需要分開（不然小程序目錄大小會超出限制）
- 需要提前安裝nodejs（目前我安裝的版本是v10.8.0，其他版本自行測試）
- ip白名單可能過期，具體在工具運行時會提示，按照提示，在小程序后台更新一下ip白名單即可
四、開始
安裝miniprogram-ci
npm install -g miniprogram-ci
運行CI命令
miniprogram-ci \
preview \
--pp ./demo-proj/ \
--pkp ./private.YOUR_APPID.key \
--appid YOUR_APPID \
--uv PACKAGE_VERSION \
-r 1 \
--enable-es6 true \
--proxy YOUR_PROXY \
--qrcode-format image \
--qrcode-output-dest '/tmp/x.jpg'
出現以下提示，則證明成功
如報錯，按報錯提示解決即可
五、集成到jenkins
jenkins安裝過程忽略，默認均安裝成功
1、所需插件
- OWASP Markup Formatter
- Git
- set build description
- Text Finders
- Git Parameter Plug-In
2、更換jenkins build頁面描述信息展示為html
- 安裝OWASP Markup Formatter插件
- 在Manage Jenkins -> Configure Global Security，將Markup Formatter的設置更改為Safe HTML即可
注意：我測試下來，必須安裝OWASP Markup Formatter插件才能將Markup Formatter的設置更改為Safe HTML
3、配置jenkins的git，用於拉取代碼，這里直接貼圖
4、打包命令配置
#!/bin/sh -l
# 固定一個默認的appid
app_id="XXXXX"
# 判斷上面的environment變量值，用於多環境打包判斷
case $environment in
"qa")
app_id="XXX"
;;
"production")
app_id="XXX"
;;
esac
echo $app_id
echo "-----------當前所選環境為：$environment-----------"
echo "-----------當前環境所對應的appid為：$app_id-----------"
# 因為我這邊項目有多個環境的配置文件，這里需要根據前面選擇的環境來對應的選擇配置文件，大家結合自己項目實際情況來就行
echo "-----------正在復制環境數據config-${environment}.js到config.js-----------"
cd /XXX/Live-Test-Miniprgram/config
sudo rm -f config.js
sudo mv config-${environment}.js config.js
echo "-----------環境數據復制完畢！！！-----------"
time=$(date "+%Y%m%d%H%M%S")
# 此處為ci插件的執行命令
miniprogram-ci \
preview \
--pp /XXX/Live-Test-Miniprgram \
--pkp /XXX/private.$app_id.key \
--appid $app_id \
--uv 1.0 \
--enable-es6 true \
--preview-page-path "${pagePath}" \
--qrcode-format image \
--qrcode-output-dest "/Qrcode_img/${time}.jpg"
5、構建后操作
- 構建后操作添加一個set build description
- Regular expression輸入
(\w*.jpg)此處用於匹配日志中的二維碼文件名 - Description輸入如下數據
<h5>發布環境:$environment</h5> <h5>發布分支:$branch</h5> <img src ="圖片存放目錄\1" height="140" width="140" >
- 構建后操作添加一個Text Finders
- Regular expression輸入
Could not determine description，見下方截圖
六、最終效果
