背景

小程序編譯、打包、預覽均須要依賴開發者工具進行，且團隊中成員均須要開通代碼倉庫權限，比較繁瑣。故在官方論壇中找到如下CI集成插件，並結合jenkins作成了自動打碼，詳細介紹以下html

1、miniprogram-ci工具

概述

miniprogram-ci 是從微信開發者工具中抽離的關於小程序/小遊戲項目代碼的編譯模塊。開發者可不打開小程序開發者工具，獨立使用 miniprogram-ci 進行小程序代碼的上傳、預覽等操做。node

詳細介紹見官網

https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.htmlgit

2、工具準備內容

密鑰
IP白名單配置
appid
一個存放打包後二維碼的目錄

3、注意事項

密鑰、存放二維碼的目錄不能和小程序代碼同級，須要分開（否則小程序目錄大小會超出限制）
須要提早安裝nodejs（目前我安裝的版本是v10.8.0，其餘版本自行測試）
ip白名單可能過時，具體在工具運行時會提示，按照提示，在小程序後臺更新一下ip白名單便可

4、開始

安裝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'

出現如下提示，則證實成功

如報錯，按報錯提示解決便可es6

5、集成到jenkins

jenkins安裝過程忽略，默認均安裝成功

一、所需插件

OWASP Markup Formatter
Git
set build description
Text Finders
Git Parameter Plug-In

二、更換jenkins build頁面描述信息展現爲html

安裝OWASP Markup Formatter插件
在Manage Jenkins -> Configure Global Security，將Markup Formatter的設置更改成Safe HTML便可
注意：我測試下來，必須安裝OWASP Markup Formatter插件才能將Markup Formatter的設置更改成Safe HTML

三、配置jenkins的git，用於拉取代碼，這裏直接貼圖

四、打包命令配置

#!/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"

五、構建後操做

構建後操做添加一個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，見下方截圖

微信小程序集成jenkins自動打碼

背景