1.半年前，有机会开始接触微信小程序开发。却因为只是接触而并没投入开发小程序的过程中，因此对很多小程序的细节并未有充分的理解，仅仅停留在了解类似的理论层面，比如mpvue修改了Vue.js的runtime和compiler实现了编译及运行在原生小程序能力，比如原生小程序不支持npm包的使用及管理等，当然那时候的技术细节难点都是由非常给力的好同事解决消化了，所以也没多去细究。
2.最近，我开始投入到完成的小程序开发迭代里，却发现一个头痛的问题，如何准确并快速的的把小程序上传去后台，并让测试人员进行测试。
问题3.当遇到多个开发人员并行开发不同功能模块的同一小程序，往往就会遇到测试人员需要进行测试的时候，让开发人员切换至测试分支后，进行构建编译和上传，最终把上传后生产的二维码提供出来进行测试使用。
4.若当前开发人员在认真coding，为某个功能正在奋斗。突然被别人打断并告诉你需要为他提供一个测试环境的二维码….
5.因为为了这个二维码，需要做的事情是：
gitstashgitcheckoutbranchnpminstallnpmrunbuild点击“预览”，生成二维码，或点击上传，更新体验版6.提供二维码出去后，恢复刚刚的工作状态
gitcheckoutbranchgitstashpopnpminstallnpmrundev不断回想刚刚的开发思路理想流程7.上面所说的，只是一个常见的场景，但是思考一下，这个场景的重复率是否很高，重复这类操作的价值究竟有多少？
8.为了解决不让开发人员为了一个测试环境的二维码而痛苦，我尝试把gitlabci和微信开发者工具的能力进行对接尝试。
9.在理想的流程里，开发人员只需要针对对应的分支进行合并或提交即可，无需关心如何把项目编译及版本分发交付到测试或体验人员手上。
10.接下来，对项目分支的管理不展开过多的说明，只设定develop分支是自动触发小程序持续集成（安装依赖、构建、上传至体验版本）的目标。
微信开发者工具11.微信开发者工具有提供5个接口能力，并且提供cli和http方式调用：
命令行启动工具命令行登录命令行提交预览命令行上传代码支持自动化测试12.由于这次目标只需要把对应develop分支的代码上传微信更新为体验版本，所以微信开发者工具的接口能力最主要的是第4个（命令行上传代码）。
13.如果是功能分支也需要创建预览二维码，可以通过第3个接口能力实现
cli和http的调用有什么区别cli方式14.通过命令行调用安装完成的工具可执行文件，完成登录、预览、上传、自动化测试等操作。调用返回码为0时代表正常，为-1时错误。命令行工具所在位置：macOS:安装路径/Contents/Resources/app.nw/bin/cliWindows:安装路径/cli.bat
http方式15.http服务在工具启动后自动开启，HTTP服务端口号在用户目录下记录，可通过检查用户目录、检查用户目录下是否有端口文件及尝试连接来判断工具是否安装/启动。端口号文件位置：macOS:~/Library/ApplicationSupport/微信web开发者工具/Default/.ideWindows:~/AppData/Local/微信web开发者工具/UserData/Default/.ide
16.说白了，cli可以直接通过调用命令行工具，而http需要先寻找端口再进行接口调用，更适合跨机器调用。根据我当前情况，选择了cli方式。
设置构建机器17.公司的Macmini类似的机器暂时没有资源，不得不回到Windows上进行构建机的设置。但是坑还是挺多，可能一方面也是对windows的不熟悉吧。最后还是选择在Windows上装vmware，在vmware上运行Macos。
18.在Mac上面，安装微信开发者工具，如何下载安装就没必要多说了。
19.接下来还需要安装gitlabrunner，gitlabrunner是用来运行你定制的任务（jobs）并把结果返回给GitLab。GitLabRunner配合GitLabCI（GitLab内置的持续集成服务）协调完成任务。详情可以查看后面的引用文章。
20.在Mac上安装gitlabrunner最简单的是用brew，当然另外下载应用包也是可以的
brewinstallgitlab-runner#安装gitlabrunnerbrewservicesstartgitlab-runner#开机自动运行gitlab-runnerstart#只需要直接运行（不需要开机自动运行）复制代码21.安装完成后，可以进行runner的配置，主要需要提供gitlaburl，项目仓库的token，runnertags等，详细信息请参考RegisteringRunners|GitLab中文文档
gitlab-runnerregister复制代码编写CI文件22.CI文件编写，最主要是项目根目录上创建一个名为.gitlab-ci.yml，每一行的
stages:-build#总体CI的过程，暂时只有一个job：buildbefore_script:-shopt-sexpand_aliases#开启扩展aliases功能issuehttps://gitlab.com/gitlab-org/gitlab-runner/issues/1083-aliaswxcli="/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli"#指定微信开发者工具cli命名为wxcli-typewxcli#验证wxcli命令是否存在-wxcli#启动微信开发者工具（其实好像有点多余，因为如果当前没启动微信开发者工具，在wxcli-u的时候也会启动）-source~/.bash_aliases#读取特点的alias，比如配置的nvm，issuehttps://gitlab.com/gitlab-org/gitlab-runner/issues/1958-npminstall#安装依赖#测试环境test-build:stage:build#对应stages上的job名称script:-npmrunbuild-curr_commit_content=`gitlog-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#提交微信开发者-#上传成功后，你可以尝试发送一些通知提醒大家可以去打开新版本了，比如钉钉的webhookonly:-developtags:-xxx_mp复制代码查看构建结果23.查看构建结果也是很简单，直接在gitlab仓库里的CI/CD——pipeline进行查看
24.测试人员和体验人员可以从小程序开发助手上查看最新体验版（记得要在微信小程序后台把该CI用户上传的版本设定成体验版）
25.真的不要再去做重复的工作，太影响心情了。
26.**作家**PatrickSR。原文地址：小程序的持续集成方案-掘金
27.相关文章：
28.微信小程序技术教程：集成Redux
29.TODO：小程序集成WeUI教程
30.微信小程序集成环信SDK
31.微信小程序的dva集成
