小程序模板網(wǎng)

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

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

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

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

問題

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

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

因?yàn)闉榱诉@個(gè)二維碼,需要做的事情是:

  • 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ā)思路

理想流程

上面所說的,只是一個(gè)常見的場(chǎng)景,但是思考一下,這個(gè)場(chǎng)景的重復(fù)率是否很高,重復(fù)這類操作的價(jià)值究竟有多少?

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

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

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

微信開發(fā)者工具

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

  1. 命令行啟動(dòng)工具
  2. 命令行登錄
  3. 命令行提交預(yù)覽
  4. 命令行上傳代碼
  5. 支持自動(dòng)化測(cè)試

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

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

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

cli方式

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

http 方式

http 服務(wù)在工具啟動(dòng)后自動(dòng)開啟,HTTP 服務(wù)端口號(hào)在用戶目錄下記錄,可通過檢查用戶目錄、檢查用戶目錄下是否有端口文件及嘗試連接來判斷工具是否安裝/啟動(dòng)。 端口號(hào)文件位置: 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ī)器暫時(shí)沒有資源,不得不回到Windows上進(jìn)行構(gòu)建機(jī)的設(shè)置。但是坑還是挺多,可能一方面也是對(duì)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ī)自動(dòng)運(yùn)行
gitlab-runner start # 只需要直接運(yùn)行(不需要開機(jī)自動(dòng)運(yùn)行)
復(fù)制代碼

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

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

編寫CI文件

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

stages:
  - build # 總體CI的過程,暫時(shí)只有一個(gè)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 # 啟動(dòng)微信開發(fā)者工具(其實(shí)好像有點(diǎn)多余,因?yàn)槿绻?dāng)前沒啟動(dòng)微信開發(fā)者工具,在wxcli -u的時(shí)候也會(huì)啟動(dòng))
  - source ~/.bash_aliases # 讀取特點(diǎn)的alias,比如配置的nvm,issue https://gitlab.com/gitlab-org/gitlab-runner/issues/1958 
  - npm install # 安裝依賴

# 測(cè)試環(huán)境
test-build:
  stage: build # 對(duì)應(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的版本號(hào)
    - 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ù)制代碼

查看構(gòu)建結(jié)果

查看構(gòu)建結(jié)果也是很簡單,直接在gitlab倉庫里的CI/CD —— pipeline 進(jìn)行查看

測(cè)試人員和體驗(yàn)人員可以從小程序開發(fā)助手上查看最新體驗(yàn)版(記得要在微信小程序后臺(tái)把該CI用戶上傳的版本設(shè)定成體驗(yàn)版)

真的不要再去做重復(fù)的工作,太影響心情了。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24687.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢