Uniapp开发时可能会有产品/后端/测试找你要二维码，需要你停下手头的工作，在HBuilderX上发行微信小程序，打开微信IDE上传或生成预览码，是一个耗时繁琐的事儿。有了CI，runner会在你代码提交到gitlab时自动帮你完成上述步骤。
大概的流程是这样的：
- 提交代码到gitlab
- gitlab检测到.gitlab-ci.yml并丢给上面配置的对应runner执行
- runner会拉取gitlab上最新的代码，并执行.gitlab-ci.yml里的脚本
- 用uniapp cli代替HBuilderX发行微信小程序代码
- 用miniprograme-ci打包
预览并生成预览码上传为体验版 上传预览码
需要做的有：
- 修改gitlab project setting
- 准备一台主机安装runner
- 注册runner
- 解决Uniapp cli的坑
- 用miniprogram-ci生成预览码
用qshell上传二维码到七牛云- 修改.gitlab-ci.yml
1. 修改gitlab project setting
gitlab项目 - settings - CI/CD - Runners，关闭Shared Runners
2.安装并启动Runner
runner可以安装在Windows，linux，Mac... 我用的自己的Mac，我上家公司有两台mini就是作为runner用。
$ brew install gitlab-runner
$ brew services start gitlab-runner
3.注册Runner
$ gitlab-runner register
需要依次输入上面图上的URL, token，描述，tags，执行器，注册成功后在gitlab setting里可以看到刚才注册的runner状态
状态
4. 解决Uniapp cli的坑
Uniapp通过HBuilderX创建与通过cli创建，项目结构是不同的，HBuilderX创建的uniapp项目只有cli创建的src里面的东西，要用cli打包只能用cli创建的项目
// 全局安装vue-cli
npm install -g @vue/cli
// 创建项目
vue create -p dcloudio/uni-preset-vue my-project
// 打包
npm run dev:mp-weixin
npm run build:mp-weixin
5. 用miniprogram-ci生成预览码
miniprogram-ci提供了命令行调用的方式，感觉这样一来cli貌似用处不大了？
// 安装 miniprogram-ci
npm install -g miniprogram-ci
// 预览 并保存图片
miniprogram-ci preview --pp /路径/ --pkp /从微信公众平台下载的.key --appid 小程序ID --uv PACKAGE版本 -r 1 --enable-es6 true --qrcode-format image --qrcode-output-dest '预览二维码保存路径'
// 上传到微信公众平台（发布体验版小程序）
miniprogram-ci upload --pp /路径/ --pkp /从微信公众平台下载的.key --appid 小程序ID --uv PACKAGE版本 -r 1 --enable-es6 true
6. 用qshell上传二维码到七牛云
首先得有七牛云的账号，并有已经能用的bucket。在七牛云开发者中心里，可以找到qshell并下载。用的话也很简单，先设置账号，然后上传即可
// 账号设置
// ak sk 为你七牛云密钥管理处的ak sk，name填账号名
qshell account ak sk name
// 上传
qshell qupload2 --src-dir=/上传文件夹/ --bucket=xtuphe
7. 修改.gitlab-ci.yml
在Uniapp项目根目录创建.gitlab-ci.yml文件，然后就是把上面写到的打包，预览，上传的命令给粘上去
test_dev:
stage: test
script:
- npm cache clean --force
- npm --registry https://registry.npm.taobao.org install
- npm run build:mp-weixin
- miniprogram-ci upload --pp /路径/ --pkp /从微信公众平台下载的.key --appid 小程序ID --uv 2.12.0 -r 1 --enable-es6 true
tags:
- macmini
完成后，每次代码提交到gitlab上会自动触发，runner会拉取gitlab上最新的代码，然后执行上面对应的script，当看到passed后，打包过后生成的二维码已经上传到七牛云可以查看了！
PASSED！
preview
更新：如果用miniprogram-ci preview的话会生成上面的预览二维码，但是只有15分钟有效期，所以他们经常让我重新生成个码有点麻烦。现在改成upload会自动覆盖体验版小程序，测试同学不用重新扫码了，更新的话只需重新打开小程序就是最新的版本了
image.png
可能会遇到的问题：
1.1 gitlab端口
我们gitlab是部署在自己服务器，用的docker，拉代码时会带上30000端口，会造成代码拉不下来的情况，我找运维解决的
4.1 Watching for changes ?
打包需要用npm run build, 如果用npm run dev的话，会监听代码的变化，脚本不会继续往下走
5.1 ENOENT: no such file or directory ?
需要去掉代理！miniprograme-ci官方给的例子上有句--proxy YOUR_PROXY \我当时没改就给粘贴上去了，结果一直报这个错误，还是要细心。
6.1 二维码没有更新
上传图片到七牛云，如果上传后图片链接不变的话，可能会由于CDN的原因导致看到的二维码没有更新，miniprogram-ci可以把二维码作为base64存储，可以专门写一个页面，来展示生成的base64图片。
用体验版小程序吧，省时省力
网友评论