微信小程序自動化部署的全過程

Posted on by

前言

我們先來梳理一下日常開發微信小程序的流程：代碼開發完之後我們首先要提交到代碼倉庫，然後使用微信開發者工具運行代碼，接著通過開發者工具上傳代碼到微信小程序後臺，最後在後臺提交審核。

不難看出流程還是比較繁瑣的，自動化部署流程可以幫助我們縮減這個流程，做到解放解放碼農的雙手，具體如何實現，我們往下看。

miniprogram-ci

微信小程序的自動化部署流程必須依賴 miniprogram-ci，這個插件。

miniprogram-ci 是從微信開發者工具中抽離的關於小程序/小遊戲項目代碼的編譯模塊。

開發者可不打開小程序開發者工具，獨立使用 miniprogram-ci 進行小程序代碼的上傳、預覽等操作。

因為腳本的執行依賴這個插件，所以我們可以將這個插件安裝在要執行腳本的服務器上，或者安裝在本地項目中。

npm install miniprogram-ci --save

微信公眾平臺配置

登錄公眾平臺，打開 開發-開發管理-開發設置，找到 小程序代碼上傳 配置項，生成小程序代碼上傳密鑰，並添加 ip 白名單，密鑰文件可以存放在要執行腳本的服務器上，或者保存在項目中，隻要能讓腳本訪問到即可。

密鑰文件

微信公眾平臺生成的密鑰文件具體內容如下：

腳本

編寫 xxx.sh 的執行腳本，命名隨意。

set -e

while read -r line
do
  if [[ $line =~ "version" ]]
  then
    declare a=${line##*:}
    declare b=${a#*\"}
    declare version=${b%\"*}
    break
  fi
done < package.json

echo $version

yarn

echo "開始編譯..."

start1=$(date +%s)
yarn build:mp-weixin
end1=$(date +%s)
take1=$(( end1 - start1 ))
echo "Compile Success：${take1}s"

echo "微信小程序上傳..."
start2=$(date +%s)

# upload
miniprogram-ci \
  upload \
  --pp ./dist/build/mp-weixin \
  --pkp ./private.wx3fxxxxxxxx3.key \
  --appid wx3fxxxxxxxx3 \
  --uv $version \
  --threads 1 \
  -r 1 \
  --enable-es6 true \
  --enable-es7 true \
  --enable-autoprefixwxss true \
  --enable-minify true \

end2=$(date +%s)
take2=$(( end2 - start2 ))

echo "Upload Success: ${take2}s"

take3=$(( end2 - start1 ))
echo "Total Time: ${take3}s"

腳本具體模塊講解

set -e

表示後續所有的 bash 命令的返回 code 如果不是 0，那麼腳本立即退出，後續的腳本將不會得到執行的機會。說人話就是腳本執行過程中，有報錯立即退出停止執行。

while read -r line
do
  if [[ $line =~ "version" ]]
  then
    declare a=${line##*:}
    declare b=${a#*\"}
    declare version=${b%\"*}
    break
  fi
done < package.json

echo $version

以上腳本是逐行讀取 package.json 文件內容，找到 version 字段，並獲取其對應的值定義一個 $version 變量。直白點講就是獲取項目的版本號，因為下面要用。

yarn

echo "開始編譯..."

start1=$(date +%s)
yarn build:mp-weixin
end1=$(date +%s)
take1=$(( end1 - start1 ))
echo "Compile Success：${take1}s"

echo "微信小程序上傳..."
start2=$(date +%s)

看到 yarn， 大傢應該都知道這段腳本就是安裝項目依賴，並且打包編譯小程序項目，其中的 start1、end1、take1 這些是記錄時間的，可忽略。

# upload
miniprogram-ci \
  upload \
  --pp ./dist/build/mp-weixin \
  --pkp ./private.wx3fxxxxxxxx3.key \
  --appid wx3fxxxxxxxx3 \
  --uv $version \
  --threads 1 \
  -r 1 \
  --enable-es6 true \
  --enable-es7 true \
  --enable-autoprefixwxss true \
  --enable-minify true \

以上這段腳本就是核心瞭。

通過腳本也不難看出，我們是通過 miniprogram-ci 進行代碼上傳的。

具體參數含義：

  • –pp：編譯打包產物文件路徑
  • –pkp：微信公眾平臺生產的那個私鑰文件路徑
  • –appid：小程序的 appid
  • –uv：項目的版本號
  • –threads：開啟線程數
  • -r：機器人編號（這個參數無所謂）

至此，整個腳本就基本完成瞭。

自動化部署實現

主要三個核心部分：

  • 上傳腳本
  • miniprogram-ci 插件
  • 密鑰文件

自動化部署實現方式有很多種，本文主要講解兩種。

第一種方式(推薦)

jenkins + gitlab + webhook

將腳本、密鑰文件直接放在項目根目錄，jenkins 安裝 webhook 相關插件，gitlab 配置 webhook，這樣就可以做到 master 分支代碼變動就可以觸發 webhook，進而觸發 jenkins 執行，別忘瞭在 jenkins 服務器全局安裝 miniprogram-ci 插件。

這樣我們就實現瞭，當業務需求開發完，代碼合並到 master 分支之後，自動觸發 webhook，進而觸發 jenkins 執行上傳腳本。

我們開發人員需要做的就隻是合並代碼到 master 分支，然後到小程序後臺選擇上傳的版本提交審核即可。

nice～

第二種方式

基於本地終端執行，將腳本、密鑰文件直接放在項目根目錄，本地安裝 miniprogram-ci 插件，直接在終端中執行腳本即可。

./ci-xxx.sh

下圖就是自動化部署上傳的版本：

總結

以上就是小程序自動化部署的具體實現過程，希望能為迷茫的小夥伴帶來一點幫助。自動化部署還有一些功能也可以實現，本文篇幅有限，沒有做全部介紹，感興趣的小夥伴可以自行探索。

到此這篇關於微信小程序自動化部署的文章就介紹到這瞭,更多相關微信小程序自動化部署內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：