Taro CI 持续集成框架的配置与使用

痛点

使用 Taro 跨端框架开发小程序时，需要切换三个界面，进行三次操作，才能上传成功，上传代码步骤过于繁琐。

且多人开发时，如果想让自己代码生效，需要切换体验版代码为自己上传的版本。

vscode 打包 -> 微信开发者工具上传 -> 设置为体验版

方案

使用微信官方的 CI 插件包，即可实现命令行上传代码。

因为我使用的 Taro 本身就有 Taro CI，和 Taro 一样兼容了各个小程序平台，所以直接使用 Taro 提供的即可。

配置上传信息 -> vscode 命令行打包上传

Taro CI 完美解决我的痛点，而且因为是机器人上传，所以大家代码都可以上传到同一个体验版内，也不用切换界面，vscode 终端一行命令就可以完成打包上传操作。

环境

node: 14.17.3

Taro: 3.0.21

Taro CI: 3.5.3

实现

安装 tarojs/plugin-mini-ci

1yarn add @tarojs/plugin-mini-ci -D

或

1npm i @tarojs/plugin-mini-ci -D

配置参数

按照官方文档配置本地参数就可以了

Taro CI 官方文档

常见问题

打包报错

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'platform' of undefined 此报错的原因是插件本身取值对象有问题，所以我们需要修改它的取值对象。

文件路径：node_modules\@tarojs\plugin-mini-ci\dist\index.js 51行

1const platform = ctx.runOpts.options.platform;

修改为

1const platform = ctx.runOpts.platform;

申请插件权限

插件安装以后是不能直接使用的（有时候也可以。。。），需要申请插件权限，需要用到 PostMan 等可以模拟请求的工具。

向插件开发者发起使用插件的申请

1. 获取 access_token

1const config = {
2  // 请求方式
3  method: 'GET',
4  // 请求地址
5  url: 'https://api.weixin.qq.com/cgi-bin/token',
6  // 请求参数
7  param: {
8    grant_type: 'client_credential', // 固定值
9    appid: '', // 小程序 id
10    secret: '', // 小程序密钥
11  },
12  // 示例
13  example: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=123&secret=123'
14}

2. 申请插件权限

1const config = {
2  // 请求方式
3  method: 'POST',
4  // 请求地址
5  url: 'https://api.weixin.qq.com/wxa/plugin',
6  // 请求参数
7  param: {
8    access_token: 'client_credential', // token
9    action: 'apply', // 固定值
10    plugin_appid: '', // 小程序 id
11  },
12}

IP 白名单

有时候会提示 ip 地址非法，是因为小程序默认开启了 ip 白名单，所以不能上传。这时候就需要添加 ip 地址到白名单或者关闭白名单。

在这推荐的是关闭白名单，因为添加 ip 白名单需要管理员权限，这是安全与效率的取舍。

关于其他参数配置

因为 Taro CI 就是各家小程序持续集成插件的封装，所以各个小程序的配置参数理论上都可以使用，但是因为 Taro CI 并没有开放出来，所以当我们有自定义需求时，只能直接修改插件包。

微信小程序 CI 文档

比如我们给微信小程序添加一个压缩参数：

我们可以看到小程序官方 CI 的配置数据结构，接下来我们看看 Taro CI 的：

文件路径：node_modules\@tarojs\plugin-mini-ci\dist\WeappCI.js

简直是一模一样，所以我直接把我需要的配置写入，测试成功。