微信小程序的(de)發布流程和(hé / huò)常規web項目不(bù)太一樣，它比較依賴微信開發者工具和(hé / huò)開發者，在(zài)我們叠代的(de)過程中，暴露了(le／liǎo)一些問題，和(hé / huò)一些可以(yǐ)改進的(de)流程。所以(yǐ)我們想要(yào / yāo)合理地(dì / de)運用現有工具，減少重複工作，解決發布流程以(yǐ)及開發和(hé / huò)産品環境差異的(de)問題，提升研發效率。

問題背景

在(zài)沒有持續集成方案的(de)情況下，我們常常會遇到(dào)幾個(gè)場景：

1. 測試環節頻繁需要(yào / yāo)發布小程序，小程序項目衆多，發布操作繁瑣且工作内容重複，造成研發思路打斷，時(shí)間的(de)浪費。
2. 測試同學無法自己構建上(shàng)傳測試版本的(de)小程序，需要(yào / yāo)依賴開發同學提供測試二維碼。
3. 由開發者在(zài)本地(dì / de)上(shàng)傳的(de)體驗版小程序可能會出(chū)現攜帶本地(dì / de)開發中的(de)代碼、或未及時(shí)拉取分支造成的(de)差異問題。

所以(yǐ)我們需要(yào / yāo)達到(dào)的(de)目的(de)是(shì)，研發隻需提交代碼到(dào)git，剩下的(de)時(shí)候都交由機器來(lái)完成，研發同學就(jiù)可以(yǐ)專心地(dì / de)搬磚了(le／liǎo)。

知識儲備

持續集成

持續集成是(shì)一種軟件開發實踐，即團隊開發成員經常集成他(tā)們的(de)工作，通常每個(gè)成員每天至少集成一次，也(yě)就(jiù)意味着每天可能會發生多次集成。每次集成都通過自動化的(de)構建（包括編譯，發布，自動化測試）來(lái)驗證，從而(ér)盡早地(dì / de)發現集成錯誤。（摘自百度百科） 持續集成工具有很多，最常用的(de)有Jenkins和(hé / huò)Gitlab CI，解決方案都是(shì)十分成熟的(de)。

微信開發者工具能力

決定微信小程序能夠實現持續集成的(de)原因，主要(yào / yāo)是(shì)微信開發者工具開放了(le／liǎo)http和(hé / huò)命令行的(de)方式來(lái)調用開發者工具。提供的(de)接口有：1.啓動工具 2.登錄 3.預覽 4.自動預覽 5.上(shàng)傳代碼 6.關閉開發者工具 需要(yào / yāo)注意的(de)是(shì)微信開發者工具隻提供了(le／liǎo)window版本和(hé / huò)macOS版本。 HTTP調用 命令行調用

docker基本命令

• 新建并啓動容器

docker run [OPTIONS] IMAGE IMAGE是(shì)鏡像ID或鏡像名稱 OPTIONS說(shuō)明： ?--name=“容器新名字”：爲(wéi / wèi)容器指定一個(gè)名稱 ?-d：後台運行容器，并返回容器ID，也(yě)即啓動守護式容器 ?-i：以(yǐ)交互模式運行容器，通常與-t同時(shí)使用 ?-t：爲(wéi / wèi)容器重新分配一個(gè)僞輸入終端，通常與-i同時(shí)使用    -v：綁定挂載目錄 ?-P：随機端口映射 ?-p：指定端口映射

• 進入容器

docker exec -it containerID /bin/bash

環境支持

1.搭建了(le／liǎo)Jenkins環境的(de)機器 2.一台Linux服務器 我們有一台部署測試環境node應用的(de)linux服務器，所以(yǐ)打算把打包環境搭在(zài)這(zhè)台機子(zǐ)上(shàng)。

開始

基本流程： jenkins拉取最新代碼->構建代碼->将工作空間的(de)dist目錄打包代碼拷貝到(dào)linux服務器->在(zài)linux服務器執行微信開發者工具發布腳本，上(shàng)傳小程序至微信後台->釘釘機器人(rén)推送發布結果。

1.開發者工具安裝

若使用windows或者mac作爲(wéi / wèi)打包機的(de)話，直接下載微信官方的(de)開發者工具安裝即可。由于(yú)官方并未提供linux版本的(de)微信開發者工具，所以(yǐ)使用linux服務器作爲(wéi / wèi)打包機的(de)話，需要(yào / yāo)對開發者工具做些改造，我們需要(yào / yāo)了(le／liǎo)解一些微信開發者工具的(de)底層原理，這(zhè)個(gè)可以(yǐ)作爲(wéi / wèi)額外的(de)研究對象。 這(zhè)裏我們已經有了(le／liǎo)可以(yǐ)使用的(de)微信開發工具的(de)docker鏡像，可以(yǐ)在(zài)linux環境上(shàng)使用。  WeChat WebDevTool in Docker(With LXDE)

下載鏡像并啓動容器： docker run -d --name wxdevtool -p 8080:80 -p 6666:9000 -v /var/opt/wxproject:/projects seancheung/wxdevtool:latest 容器内開放了(le／liǎo)兩個(gè)端口，80端口是(shì)該鏡像提供的(de)vnc端口，訪問該端口可以(yǐ)通過圖形化界面操作開發者工具。9000端口則是(shì)微信開發者工具HTTP 服務端口号的(de)代理端口。HTTP 服務每次啓動的(de)端口号并不(bù)固定，但會記錄在(zài)用戶目錄下，在(zài)容器内會獲取每次的(de)端口号，并使用nginx代理到(dào)9000端口，使用-p映射到(dào)我們的(de)宿主機，即可在(zài)宿主環境下訪問。然後我們會将小程序的(de)代碼放在(zài)/var/opt/wxproject目錄下，所以(yǐ)将該目錄挂載到(dào)容器的(de)/``projects目錄，在(zài)容器内部我們就(jiù)能訪問到(dào)小程序代碼，并執行相應地(dì / de)上(shàng)傳預覽操作。

2.命令調用

容器啓動後，可以(yǐ)通過命令行的(de)方式和(hé / huò)http方式來(lái)調用開發者工具。

• 命令行調用：

docker exec -t wxdevtool wxdevtool exec --login
複制代碼

• http調用：    

curl http://127.0.0.1:6666/login
複制代碼

兩種方式都能完成微信開發者工具的(de)基本操作，根據實際的(de)使用場景來(lái)選擇。經過後續的(de)實踐，http調用的(de)方式會更适合我的(de)場景，主要(yào / yāo)是(shì)因爲(wéi / wèi) 1.使用http方式更容易獲取調用的(de)結果。我們需要(yào / yāo)在(zài)執行上(shàng)傳命令後，獲取返回結果，如若上(shàng)傳失敗，需要(yào / yāo)将失敗原因同步到(dào)釘釘群，如若登錄狀态失效，我們會獲取最新的(de)登錄二維碼發送到(dào)群裏。http方式可以(yǐ)更好地(dì / de)滿足。 2.執行命令行操作，若操作失敗，會自動退出(chū)shell進程，無法進行後面的(de)操作，這(zhè)對我們的(de)CI操作的(de)流程控制和(hé / huò)條件判斷是(shì)不(bù)利的(de)，而(ér)http請求無論成功失敗都不(bù)會阻塞或退出(chū)後續流程。當然這(zhè)也(yě)許是(shì)我的(de)使用方式有問題，實際有應該有其他(tā)解決方案，畢竟對shell操作我還不(bù)是(shì)非常在(zài)行。

3.jenkins job配置

我們已經能成功使用http請求來(lái)完成開發者工具登錄，小程序上(shàng)傳等操作，接下來(lái)需要(yào / yāo)結合到(dào)持續集成工具裏。在(zài)開始配置之(zhī)前，理下我們要(yào / yāo)的(de)功能 1.代碼git分支可配置 2.打包版本可選（測試版和(hé / huò)正式版），我們構建上(shàng)傳時(shí)，正式版和(hé / huò)測試版主要(yào / yāo)是(shì)構建命令不(bù)一樣，以(yǐ)及appId不(bù)一樣，其他(tā)都沒有區别，所以(yǐ)使用同一個(gè)job。 3.小程序版本号和(hé / huò)備注信息可配置 4.代碼提交後自動構建 5.釘釘機器人(rén)接入

• 創建一個(gè)自由風格的(de)項目

• 設置源碼管理，分支名使用構建參數傳入

• 構建環境配置

需要(yào / yāo)遠程訪問打包服務器，在(zài)這(zhè)之(zhī)前需要(yào / yāo)添加遠程服務器ssh credential，類型是(shì)ssh username with private。然後綁定private key和(hé / huò)用戶名變量，透出(chū)參數供腳本使用。

• jenkins腳本

下面進入重點的(de)腳本部分，jenkins這(zhè)邊配置的(de)會非常簡單，主要(yào / yāo)執行依賴安裝，代碼構建，拷貝代碼至遠程服務器。而(ér)對開發者工具的(de)調用則放在(zài)單獨的(de)腳本文件中以(yǐ)供複用。以(yǐ)下是(shì)jenkins shell腳本，解讀也(yě)放在(zài)注釋中。

# set +x
#遠程服務器地(dì / de)址
REMOTE_HOST=XXX

#項目文件夾名稱
PROJECT="assistance"

#自定義方法 拷貝文件至遠程目錄
remote_scp()
{
  scp -rvi "$REMOTE_KEY" -o StrictHostKeyChecking=no "$1" "$REMOTE_USER"@"$REMOTE_HOST":"$2"
}

#自定義方法 遠程執行服務器操作命令
remote_exec()
{
  ssh -i "$REMOTE_KEY" -o StrictHostKeyChecking=no "$REMOTE_USER"@"$REMOTE_HOST" "$@"
}

# 安裝依賴
echo "--installing dependencies--"
npm i --no-progress

# 根據環境參數構建項目
echo "--building sources--"
case "$BUILD_TYPE" in
prod)
  npm run build:dist
  ;;
*)
  npm run build:test
  ;;
esac

# 先清空遠程項目目錄，再拷貝構建後的(de)代碼至遠程服務器打包目錄
echo "--updating remote source--"
remote_exec rm -rf /var/opt/wxproject/$PROJECT
remote_scp ./dist /var/opt/wxproject/$PROJECT

# 執行上(shàng)傳小程序腳本（腳本放在(zài)遠程服務器上(shàng)，xcx命令爲(wéi / wèi)對應腳本文件的(de)自定義命令，關于(yú)自定義shell
命令可以(yǐ)查一下相關資料）
echo "--uploading package--"
sleep 2
remote_exec xcx $PROJECT $UPLOAD_VERSION $UPLOAD_DESC
複制代碼

• 開發者工具打包腳本

執行的(de)操作也(yě)是(shì)很簡單，打包腳本放在(zài)安裝開發者工具的(de)機器上(shàng)，所以(yǐ)使用http調用開發者工具的(de)上(shàng)傳接口就(jiù)行了(le／liǎo)。使用upload接口，有以(yǐ)下參數

調用本機127.0.0.1下的(de)6666端口（還記得吧，我們在(zài)啓動時(shí)将容器内的(de)開發者工具http服務9000端口映射到(dào)宿主機的(de)6666端口）。幾個(gè)參數在(zài)調用時(shí)已經傳入，分别對應jenkins下的(de)參數$PROJECT\text{，}$UPLOAD_VERSION，$UPLOAD_DESC。由于(yú)我們在(zài)發布成功後想要(yào / yāo)推送當次的(de)代碼包信息，所以(yǐ)使用infooutput參數将發布信息存儲下來(lái)，以(yǐ)便後面使用。

REQUEST_URL=http://127.0.0.1:6666
result=$(curl -H "Connection:keep-alive" $REQUEST_URL/upload\?projectpath\=/projects/$1\&
version\=$2\&desc\=$3\&infooutput\=/projects/$1/uploadInfo.json)
複制代碼

此次請求的(de)結果在(zài)result中可以(yǐ)拿到(dào)，針對不(bù)同的(de)結果會做不(bù)同的(de)處理。開發者工具的(de)登錄狀态隔一段時(shí)間是(shì)會過期的(de)，所以(yǐ)此時(shí)發布失敗需要(yào / yāo)重新獲取登錄二維碼，并推送到(dào)釘釘工作群，讓我們及時(shí)去登錄。由于(yú)釘釘推送圖片，需要(yào / yāo)用網絡地(dì / de)址，所以(yǐ)這(zhè)邊會将二維碼文件上(shàng)傳至靜态資源服務器。

RELOGIN="需要(yào / yāo)重新登錄"
WEBHOOK="https://oapi.dingtalk.com/robot/send?access_token=XXX"
# 登錄二維碼cdn地(dì / de)址
QRCODEURL="https://XXXX"
# 圖片上(shàng)傳接口
UPLOAD=""
send_ding() {
    curl $WEBHOOK -H 'Content-Type: application/json' -d '
        {
            "msgtype": "markdown",
            "markdown": {
                "title":"小程序發布失敗",
                "text": "小程序發布失敗\n\n >開發者工具需要(yào / yāo)重新登錄\n\n > ![screenshot]('$QRCODEURL')\n"
            }
        }'
}
if [ -n "$(echo ${result} | grep $RELOGIN )" ]; then 
    curl ${REQUEST_URL}/login\?format\=image\&qroutput\=/projects/login.png
    curl -F "folderName=wxdevtool" -F "file=@/var/opt/wxproject/login.png" $UPLOAD
    send_ding
    exit 1
fi
複制代碼

同上(shàng)，發布成功後也(yě)可以(yǐ)推送本次發布的(de)代碼包信息，我們已經拿到(dào)本次上(shàng)傳信息并存儲在(zài)uploadInfo.json文件中，隻需使用cat命令拿到(dào)文件内容摘取想要(yào / yāo)的(de)信息即可，可能會需要(yào / yāo)對json進行處理，shell處理解析json并不(bù)是(shì)很方便，這(zhè)裏推薦使用jq這(zhè)個(gè)包來(lái)處理json。

• 代碼提交後自動構建

使用gitlab Webhooks結合jenkins 構建觸發器。

• 機器人(rén)推送結果

小結

到(dào)這(zhè)裏已經完成微信小程序持續集成基本功能，理論上(shàng)并不(bù)複雜，前端工程化的(de)很多重複工作都應該交給自動化工具來(lái)完成。 如若本文有描述不(bù)當的(de)地(dì / de)方，還請大(dà)家不(bù)吝賜教，在(zài)評論中指出(chū)。