小程序的持續(xù)集成方案

發(fā)布時間：2018-08-03 08:49 所屬欄目：小程序開發(fā)教程

半年前，有機(jī)會開始接觸微信小程序開發(fā)。卻因?yàn)橹皇墙佑|而并沒投入開發(fā)小程序的過程中，因此對很多小程序的細(xì)節(jié)并未有充分的理解，僅僅停留在了解類似的理論層面，比如mpvue修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)了編譯及運(yùn)行在原生小程序能力，比如原生小程序不支持npm包的使用及管理等，當(dāng)然那時候的技術(shù)細(xì)節(jié)難點(diǎn)都是由非常給力的好同事解決消化了，所以也沒多去細(xì)究。

最近，我開始投入到完成的小程序開發(fā)迭代里，卻發(fā)現(xiàn)一個頭痛的問題，如何準(zhǔn)確并快速的的把小程序上傳去后臺，并讓測試人員進(jìn)行測試。

問題

當(dāng)遇到多個開發(fā)人員并行開發(fā)不同功能模塊的同一小程序，往往就會遇到測試人員需要進(jìn)行測試的時候，讓開發(fā)人員切換至測試分支后，進(jìn)行構(gòu)建編譯和上傳，最終把上傳后生產(chǎn)的二維碼提供出來進(jìn)行測試使用。

若當(dāng)前開發(fā)人員在認(rèn)真coding，為某個功能正在奮斗。突然被別人打斷并告訴你需要為他提供一個測試環(huán)境的二維碼….

因?yàn)闉榱诉@個二維碼，需要做的事情是：

git stash
git checkout branch
npm install
npm run build
點(diǎn)擊“預(yù)覽”，生成二維碼，或點(diǎn)擊上傳，更新體驗(yàn)版

提供二維碼出去后，恢復(fù)剛剛的工作狀態(tài)

git checkout branch
git stash pop
npm install
npm run dev
不斷回想剛剛的開發(fā)思路

理想流程

上面所說的，只是一個常見的場景，但是思考一下，這個場景的重復(fù)率是否很高，重復(fù)這類操作的價值究竟有多少？

為了解決不讓開發(fā)人員為了一個測試環(huán)境的二維碼而痛苦，我嘗試把gitlab ci 和微信開發(fā)者工具的能力進(jìn)行對接嘗試。

在理想的流程里，開發(fā)人員只需要針對對應(yīng)的分支進(jìn)行合并或提交即可，無需關(guān)心如何把項(xiàng)目編譯及版本分發(fā)交付到測試或體驗(yàn)人員手上。

接下來，對項(xiàng)目分支的管理不展開過多的說明，只設(shè)定develop分支是自動觸發(fā)小程序持續(xù)集成（ 安裝依賴、構(gòu)建、上傳至體驗(yàn)版本 ）的目標(biāo)。

微信開發(fā)者工具

微信開發(fā)者工具有提供5個接口能力，并且提供cli 和 http方式調(diào)用：

命令行啟動工具
命令行登錄
命令行提交預(yù)覽
命令行上傳代碼
支持自動化測試

由于這次目標(biāo)只需要把對應(yīng)develop分支的代碼上傳微信更新為體驗(yàn)版本，所以微信開發(fā)者工具的接口能力最主要的是第4個（命令行上傳代碼）。

如果是功能分支也需要創(chuàng)建預(yù)覽二維碼，可以通過第3個接口能力實(shí)現(xiàn)

cli和http的調(diào)用有什么區(qū)別

cli方式

通過命令行調(diào)用安裝完成的工具可執(zhí)行文件，完成登錄、預(yù)覽、上傳、自動化測試等操作。調(diào)用返回碼為 0 時代表正常，為 -1 時錯誤。命令行工具所在位置： macOS: <安裝路徑>/Contents/Resources/app.nw/bin/cli Windows: <安裝路徑>/cli.bat

http 方式

http 服務(wù)在工具啟動后自動開啟，HTTP 服務(wù)端口號在用戶目錄下記錄，可通過檢查用戶目錄、檢查用戶目錄下是否有端口文件及嘗試連接來判斷工具是否安裝/啟動。端口號文件位置： macOS : ~/Library/Application Support/微信web開發(fā)者工具/Default/.ide Windows : ~/AppData/Local/微信web開發(fā)者工具/User Data/Default/.ide

說白了，cli可以直接通過調(diào)用命令行工具，而http需要先尋找端口再進(jìn)行接口調(diào)用，更適合跨機(jī)器調(diào)用。根據(jù)我當(dāng)前情況，選擇了cli方式。

設(shè)置構(gòu)建機(jī)器

公司的Mac mini 類似的機(jī)器暫時沒有資源，不得不回到Windows上進(jìn)行構(gòu)建機(jī)的設(shè)置。但是坑還是挺多，可能一方面也是對windows的不熟悉吧。最后還是選擇在Windows上裝vmware，在vmware上運(yùn)行Mac os。

在Mac上面，安裝微信開發(fā)者工具，如何下載安裝就沒必要多說了。

接下來還需要安裝gitlab runner，gitlab runner是用來運(yùn)行你定制的任務(wù)（jobs）并把結(jié)果返回給 GitLab。 GitLab Runner 配合GitLab CI（GitLab 內(nèi)置的持續(xù)集成服務(wù)）協(xié)調(diào)完成任務(wù)。詳情可以查看后面的引用文章。

在Mac上安裝gitlab runner最簡單的是用brew，當(dāng)然另外下載應(yīng)用包也是可以的

brew install gitlab-runner # 安裝gitlab runner
brew services start gitlab-runner # 開機(jī)自動運(yùn)行
gitlab-runner start # 只需要直接運(yùn)行（不需要開機(jī)自動運(yùn)行）
復(fù)制代碼

安裝完成后，可以進(jìn)行runner的配置，主要需要提供gitlab url，項(xiàng)目倉庫的token，runner tags等，詳細(xì)信息請參考 Registering Runners | GitLab 中文文檔

gitlab-runner register 
復(fù)制代碼

編寫CI文件

CI文件編寫，最主要是項(xiàng)目根目錄上創(chuàng)建一個名為.gitlab-ci.yml，每一行的

stages:
  - build # 總體CI的過程，暫時只有一個job：build

before_script:
  - shopt -s expand_aliases # 開啟擴(kuò)展aliases功能 issue https://gitlab.com/gitlab-org/gitlab-runner/issues/1083
  - alias wxcli="/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli" # 指定微信開發(fā)者工具cli命名為wxcli
  - type wxcli # 驗(yàn)證wxcli命令是否存在
  - wxcli # 啟動微信開發(fā)者工具（其實(shí)好像有點(diǎn)多余，因?yàn)槿绻?dāng)前沒啟動微信開發(fā)者工具，在wxcli -u的時候也會啟動）
  - source ~/.bash_aliases # 讀取特點(diǎn)的alias，比如配置的nvm，issue https://gitlab.com/gitlab-org/gitlab-runner/issues/1958 
  - npm install # 安裝依賴

# 測試環(huán)境
test-build:
  stage: build # 對應(yīng)stages上的job名稱
  script:
    - npm run build
    - curr_commit_content=`git log -1 --pretty=format:%s` # 獲取最近提交的git內(nèi)容
    - curr_version=`node -p "require('./package.json').version"` # 獲取package的版本號
    - curr_proj_path=`pwd` # 當(dāng)前項(xiàng)目路徑
    - wxcli -u $curr_version@$curr_proj_path --upload-desc $curr_commit_content # 提交微信開發(fā)者
	  - # 上傳成功后，你可以嘗試發(fā)送一些通知提醒大家可以去打開新版本了，比如釘釘?shù)膚ebhook
  only:
    - develop
  tags:
    - xxx_mp

復(fù)制代碼