小程序的持续集成方案
半年前，有机会开始接触微信小程序开发。却由于只是接触而并没投入开发小程序的过程当中，所以对不少小程序的细节并未有充分的理解，仅仅停留在了解相似的理论层面，好比mpvue修改了 Vue.js 的 runtime 和 compiler 实现了编译及运行在原生小程序能力，好比原生小程序不支持npm包的使用及管理等，固然那时候的技术细节难点都是由很是给力的好同事解决消化了，因此也没多去细究。html
最近，我开始投入到完成的小程序开发迭代里，却发现一个头痛的问题，如何准确并快速的的把小程序上传去后台，并让测试人员进行测试。vue
问题
当遇到多个开发人员并行开发不一样功能模块的同一小程序，每每就会遇到测试人员须要进行测试的时候，让开发人员切换至测试分支后，进行构建编译和上传，最终把上传后生产的二维码提供出来进行测试使用。node
若当前开发人员在认真coding，为某个功能正在奋斗。忽然被别人打断并告诉你须要为他提供一个测试环境的二维码….git
由于为了这个二维码，须要作的事情是：github
- git stash
- git checkout branch
- npm install
- npm run build
- 点击“预览”，生成二维码，或点击上传，更新体验版
提供二维码出去后，恢复刚刚的工做状态web
- git checkout branch
- git stash pop
- npm install
- npm run dev
- 不断回想刚刚的开发思路
理想流程
为了解决不让开发人员为了一个测试环境的二维码而痛苦，我尝试把gitlab ci 和 微信开发者工具的能力进行对接尝试。shell
接下来，对项目分支的管理不展开过多的说明，只设定develop分支是自动触发小程序持续集成（安装依赖、构建、上传至体验版本）的目标。npm
微信开发者工具
微信开发者工具备提供5个接口能力，而且提供cli 和 http方式调用：json
- 命令行启动工具
- 命令行登陆
- 命令行提交预览
- 命令行上传代码
- 支持自动化测试
因为此次目标只须要把对应develop分支的代码上传微信更新为体验版本，因此微信开发者工具的接口能力最主要的是第4个（命令行上传代码）。小程序
若是是功能分支也须要建立预览二维码，能够经过第3个接口能力实现
cli和http的调用有什么区别
cli方式
经过命令行调用安装完成的工具可执行文件，完成登陆、预览、上传、自动化测试等操做。调用返回码为 0 时表明正常，为 -1 时错误。 命令行工具所在位置： macOS: <安装路径>/Contents/Resources/app.nw/bin/cli Windows: <安装路径>/cli.bat
http 方式
http 服务在工具启动后自动开启，HTTP 服务端口号在用户目录下记录，可经过检查用户目录、检查用户目录下是否有端口文件及尝试链接来判断工具是否安装/启动。 端口号文件位置： macOS : ~/Library/Application Support/微信web开发者工具/Default/.ide Windows : ~/AppData/Local/微信web开发者工具/User Data/Default/.ide
说白了，cli能够直接经过调用命令行工具，而http须要先寻找端口再进行接口调用，更适合跨机器调用。 根据我当前状况，选择了cli方式。
设置构建机器
公司的Mac mini 相似的机器暂时没有资源，不得不回到Windows上进行构建机的设置。可是坑仍是挺多，可能一方面也是对windows的不熟悉吧。最后仍是选择在Windows上装vmware，在vmware上运行Mac os。
接下来还须要安装gitlab runner，gitlab runner是用来运行你定制的任务（jobs）并把结果返回给 GitLab。 GitLab Runner 配合GitLab CI（GitLab 内置的持续集成服务） 协调完成任务。详情能够查看后面的引用文章。
在Mac上安装gitlab runner最简单的是用brew，固然另外下载应用包也是能够的
brew install gitlab-runner # 安装gitlab runner
brew services start gitlab-runner # 开机自动运行
gitlab-runner start # 只须要直接运行（不须要开机自动运行）
复制代码
安装完成后，能够进行runner的配置，主要须要提供gitlab url，项目仓库的token，runner tags等，详细信息请参考Registering Runners | GitLab 中文文档
gitlab-runner register
复制代码
编写CI文件
CI文件编写，最主要是项目根目录上建立一个名为.gitlab-ci.yml，每一行的
stages:
- build # 整体CI的过程，暂时只有一个job：build
before_script:
- shopt -s expand_aliases # 开启扩展aliases功能 issue https://gitlab.com/gitlab-org/gitlab-runner/issues/1083
- alias wxcli="/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli" # 指定微信开发者工具cli命名为wxcli
- type wxcli # 验证wxcli命令是否存在
- wxcli # 启动微信开发者工具（其实好像有点多余，由于若是当前没启动微信开发者工具，在wxcli -u的时候也会启动）
- source ~/.bash_aliases # 读取特色的alias，好比配置的nvm，issue https://gitlab.com/gitlab-org/gitlab-runner/issues/1958
- npm install # 安装依赖
# 测试环境
test-build:
stage: build # 对应stages上的job名称
script:
- npm run build
- curr_commit_content=`git log -1 --pretty=format:%s` # 获取最近提交的git内容
- curr_version=`node -p "require('./package.json').version"` # 获取package的版本号
- curr_proj_path=`pwd` # 当前项目路径
- wxcli -u $curr_version@$curr_proj_path --upload-desc $curr_commit_content # 提交微信开发者
- # 上传成功后，你能够尝试发送一些通知提醒你们能够去打开新版本了，好比钉钉的webhook
only:
- develop
tags:
- xxx_mp
复制代码
查看构建结果
查看构建结果也是很简单，直接在gitlab仓库里的CI/CD —— pipeline 进行查看
测试人员和体验人员能够从小程序开发助手上查看最新体验版（记得要在微信小程序后台把该CI用户上传的版本设定成体验版）
真的不要再去作重复的工做，太影响心情了。