微信小程序Jenkins部署方案

背景

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

• 小程序開發助手中，同一個開發者只能顯示一個開發版本
• 測試同事找開發要二維碼，效率較低
• 本地生成的二維碼會出現攜帶本地代碼、未及時拉取分支其餘改動等問題
• 人工手動打包提交審覈時易出錯，如打包環境錯誤、未打包提交審覈等問題

爲了不如上問題的發生，採用微信小程序Jenkins部署方案。

準備工做

因微信小程序Jenkins部署依賴微信開發者工具與Jenkins，下面會介紹微信開發者工具除圖形化界面的另外兩種調用方式與Jenkins安裝配置。

前置條件

在使用微信開發者工具http調用與命令行調用前，咱們須要開啓微信開發工具安全設置中的CLI/HTTP調用功能，不然http與命令行都不能調用工具。開啓路徑：設置 -> 安全設置 -> 開啓服務端端口。

微信開發工具-命令行調用

經過命令行調用安裝完成的工具可執行文件，完成登陸、預覽、上傳、自動化測試等操做。調用返回碼爲 0 時表明正常，爲 -1 時錯誤。

命令行工具所在位置：

<!--macOs下未更改安裝路徑，默認位置爲：/Applications/wechatwebdevtools.app/Contents/MacOS/cli-->
macOS: <安裝路徑>/Contents/MacOS/cli

Windows: <安裝路徑>/cli.bat
複製代碼

macOs下命令行調用微信開發工具

<!--打開工具-->
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o

<!--打開路徑 /Users/username/demo 下的項目-->
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o /Users/username/demo

<!--登陸，在終端中打印登陸 base64 形式的二維碼-->
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -l --login-qr-output base64

<!--預覽，在終端中打印登陸二維碼-->
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -p /Users/username/demo

<!--上傳路徑 /Users/username/demo 下的項目，指定版本號爲 1.0.0，版本備註爲 initial release-->
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -u 1.0.0@/Users/username/demo --upload-desc 'initial release'
複製代碼

更多調用方式見命令行調用

微信開發工具-http調用

http 服務在工具啓動後自動開啓，HTTP 服務端口號在用戶目錄下記錄，可經過檢查用戶目錄、檢查用戶目錄下是否有端口文件及嘗試鏈接來判斷工具是否安裝/啓動。

端口號文件位置：

macOS : ~/Library/Application Support/微信開發者工具/Default/.ide

Windows : ~/AppData/Local/微信開發者工具/User Data/Default/.ide
複製代碼

http調用微信開發工具，注：http調用不區分系統，除端口文件位置不一樣，調用方式一致。

<!--打開工具 -->
http://127.0.0.1:端口號/open

<!--打開/刷新項目 -->
http://127.0.0.1:端口號/open?projectpath=項目全路徑

<!--登陸，取 base64 格式二維碼-->
http://127.0.0.1:端口號/login?format=base64

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

<!--上傳路徑爲 /Users/username/demo 的項目，指定版本號爲 v1.0.0，並帶上備註test-->
http://127.0.0.1:端口號/upload?projectpath=%2FUsers%2Fusername%2Fdemo&version=v1.0.0&desc=test
複製代碼

更多調用方式見：http調用

安裝Jenkins

Jenkins依賴java運行環境，須要先安裝java jdk，可在官網下載。注：Jenkins要求java jdk版本爲8-11

macOs下安裝Jenkins

1. 安裝brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
複製代碼

2. 安裝Jenkins

brew install jenkins
複製代碼

3. 查看Jenkins 版本

jenkins -v
複製代碼

紅色標註爲Jenkins版本號

4. 執行

<!--注：2.195爲Jenkins版本，388爲端口號，默認端口爲8080-->
java -jar /usr/local/Cellar/jenkins/2.195/libexec/jenkins.war --httpPort=388
複製代碼

5. 遊覽器打開locahost:388，進入Jenkins頁面。

6. 查看管理員密碼，注：具體目錄根據參考提示

cat /Users/sung/.jenkins/secrets/initialAdminPassword
複製代碼

7. 這裏咱們選擇默認安裝

8. 安裝完成後進入主頁，選擇系統管理 -> 插件管理 -> 可選插件。除默認勾選插件外，咱們還須要安裝這些插件，以下：

   • Locale
   • SSH Agent
   • Node.js
   • build-name-setter
   • description setter
   • Git Parameter

9. 若是你已經完成上列步驟，那麼Jenkins就已經安裝完成了，咱們所需的依賴也有了，後續會講述Jenkins任務配置。

Jenkins任務配置

1. 新建任務 -> 選擇「構建一個自由風格的軟件項目」。

2. 在General中，勾選參數化構建過程。

   • 選擇「選項參數」，配置以下：

   

   

3. "項目管理"，選擇Git，配置以下：

3. 「構建環境」，選擇Delete workspace before build starts，構建前清空工做區。

4. 「構建」，選擇執行 shell，腳本以下：

# 執行項目構建
npm i --registry=http://registry.npm.taobao.org
npm run ${build_type}:weapp
# 打開微信開發者工具
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o
# 端口號文件
port=$(cat "/Users/sung/Library/Application Support/微信開發者工具/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" != "prod" ]
  then
  echo "發佈開發版！"
  wget -O $BUILD_ID.png http://127.0.0.1:${port}/preview?projectpath=${WORKSPACE}/dist
  # 用於生成帶參數的預覽碼
  # /Applications/wechatwebdevtools.app/Contents/MacOS/cli -o -p /Users/sung/Desktop/weapp/dist --preview-qr-output base64@${WORKSPACE}/qrCode.txt --compile-condition '{"pathName":"pages/index/index","query":"agent_no=CN08662274"}'
  # npm run create ${build_type}
  echo "預覽成功！請掃描二維碼進入開發版！"
elif [ "$build_type" == 'prod' ]
  then
  echo "準備上傳！"
  /Applications/wechatwebdevtools.app/Contents/MacOS/cli -u ${version}@/${WORKSPACE}/dist --upload-desc ${descr}
  echo "上傳成功！請到微信小程序後臺設置體驗版並提交審覈！"
fi
複製代碼

5. "構建後"，選擇Set build description，配置以下：

<img src="http://本機ip:啓動jenkins端口/job/jenkins任務名稱/ws/${BUILD_ID}.png" alt="二維碼${BUILD_ID}" width="200" height="200" /> <a href="http://本機ip:啓動jenkins端口/job/jenkins任務名稱/ws/${BUILD_ID}.png">二維碼${BUILD_ID}</a>
複製代碼

6. 上列步驟執行完畢後，應用、保存執行構建，獲得構建結果以下：

注：獲得建構結果與預期不一致，圖片並無顯示出來，而是顯示了文本信息。這是因爲 Jenkins 出於安全的限制，全部描述信息的 Markup Formatter 默認都採用 Plain text 的模式。

在「系統管理」-> 「全局安全配置」中，將 Markup Formatter（標記格式器） 由 Plain text (純文本) 更改成 Safe HTML 便可。

7. 修改完成後，最終構建結果以下：

關鍵點

1. 預覽二維碼有效期爲25分鐘
2. 因Jenkins shell執行wget會將&後的全部字段截掉，沒辦法使用http調用在預覽二維碼中攜帶參數。 咱們採用了一個比較繞的方法解決了該問題。

<!--使用命令行調用生成預覽二維碼，再將二維碼導出爲base64存儲在工做區下的qrCode.txt文件中-->
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o -p /Users/sung/Desktop/weapp/dist --preview-qr-output base64@${WORKSPACE}/qrCode.txt --compile-condition '{"pathName":"pages/index/index","query":"agent_no=CN08662274"}'

<!--npm run create命令調用create.js-->
npm run create ${BUILD_ID}

<!--create.js-->
const fs = require('fs'); 
fs.readFile('./qrCode.txt', function(err, data) {
  //若是錯誤err
  if (err) {
    console.log(err, '讀取文件失敗');
  } else {
    const dataBuffer = new Buffer.from(data.toString(), 'base64');
    fs.writeFile(`./${process.argv[2]}.png`, dataBuffer, function(e) {
      if (e) {
        console.log(e, '寫入文件失敗');
      } else {
        console.log('保存成功');
      }
    });
  }
});
複製代碼

3. 生成預覽圖片下載須要安裝wget

測試與發佈

測試

1. 測試正常流程，構建生成預覽碼，使用預覽碼進行測試。注：使用預覽碼缺點很明顯，1.須要添加開發者權限，2.有效期只有25分鐘，做用有限。

2. 測試特殊流程，例如掃碼場景攜帶參數，可以使用上面所述關鍵點2，生成帶參數的預覽碼。

3. 推薦使用體驗版測試，每次構建都提交到小程序後臺，覆蓋以前的體驗版。使用體驗版有如下優缺點：

   優勢：

   • 體驗版二維碼無時間限制
   • 無需添加開發者權限
   • 每次提交內容覆蓋以前的內容

   缺點：

   • 體驗版測試攜帶參數場景，須要在微信公衆平臺設置體驗版路徑，十分麻煩。

使用體驗版進行測試

推薦將體驗版二維碼保存在項目中，經過設置Set build description，訪問體驗版二維碼。設置以下：

<img src="http://本機ip:啓動jenkins端口/job/jenkins任務名稱/ws/體驗版二維碼名稱.png" alt="體驗版" width="200" height="200" /> <a href="http://本機ip:啓動jenkins端口/job/jenkins任務名稱/ws/體驗版二維碼名稱.png">體驗版</a>
複製代碼

使用體驗版測試腳本以下：

# 執行項目構建
npm i --registry=http://registry.npm.taobao.org
npm run ${build_type}:weapp
# 打開微信開發者工具
/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o
port=$(cat "/Users/sung/Library/Application Support/微信開發者工具/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" != "prod" ]
  then
  echo "覆蓋體驗版"
  /Applications/wechatwebdevtools.app/Contents/MacOS/cli -u ${version}@/${WORKSPACE}/dist --upload-desc ${build_type}環境，測試
elif [ "$build_type" == 'prod' ]
  then
  echo "準備上傳！"
  /Applications/wechatwebdevtools.app/Contents/MacOS/cli -u ${version}@/${WORKSPACE}/dist --upload-desc ${descr}
  echo "上傳成功！請到微信小程序後臺設置體驗版並提交審覈！"
fi
複製代碼

• 全部構建環境都使用上傳命令，覆蓋以前的體驗版，結果以下：

發佈

1. 構建選擇prod環境，填寫版本號與提交信息。

   

2. 微信公衆平臺，校驗提交信息與版本號，提交審覈。

到這裏整個流程已經完成了閉環，你們能夠嘗試一下，開始策馬奔騰吧。😂😂😂

參考資料

• linux安裝jenkins
• 微信小程序發佈助手
• 微信小程序集成 Jenkins
• 每日優鮮便利購微信小程序集成 Jenkins 生成二維碼發版