关于taro:轻松实现Jenkins发布taro小程序

前言

手动公布小程序效率低还容易出错，本文就思考如何用 Jenkins 来公布 taro 小程序。

手动打包小程序的问题

1. 频繁发版 + 发版流程琐碎 + 可能存在的多个小程序，效率低
2. 打包时常常固定一个人或者一台机器打包上传，不灵便
3. 手动打包可能选错接口环境，导致线上问题

Jenkins 打包益处

1. 固定代码分支以及环境，打包过程由 jenkins 承当。效率高，缩小环境谬误的危险
2. 所有人都能够自在打包

以上需要，整顿成一个 demo 我的项目了，基于 Taro 3.x

taro 小程序打包示例地址

Jenkins 如何公布小程序

微信小程序 ci 能力

开发者可不关上小程序开发者工具，独立应用 miniprogram-ci 进行小程序代码的上传、预览等操作

微信小程序 ci 官网文档

密钥及 IP 白名单配置

应用 miniprogram-ci 前应拜访 ” 微信公众平台 - 开发 - 开发设置 ” 后下载代码上传密钥，并配置 IP 白名单 开发者可抉择关上 IP 白名单，关上后只有白名单中的 IP 能力调用相干接口。

通过小程序管理员扫码，就能够取得上传密钥。IP 白名单能够本人设置，限度指定 IP 地址操作。

我公司因为 jenkins 自身就做了内网拜访限度，这里就没有反复限度了。

密钥的寄存

个别下载的密钥，是放到我的项目根目录当中。思考到密钥寄存在我的项目中不太平安，就让运维在 jenkins 打包阶段，再注入到我的项目中。

应用 Taro 框架集成的 ci 公布

个别微信原生小程序间接应用 miniprogram-ci 的能力即可。因为我的项目应用了 taro 框架，这里就以 taro 插件来做为例子。taro 兼容了各小程序平台 ci（继续集成）的能力。

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

次要原理：通过小程序密钥进行身份鉴权。ci 就具备上传或者预览小程序的权限

小程序继续集成 | Taro 文档

我的项目中进行 ci 配置

下面都是自定义的，个别跟着具体打包脚本来自定义的。如果想要全局自定义 version 或者 desc，能够在 package.json 下配置 taroConfig 参数

// package.json
{
  "taroConfig": {"version": "1.0.0"},
}

上面是我的项目中配置 ci 的过程，通过 CIPluginFn 配置密钥以及具体的参数

// config/index.js
const {robot = 1, desc} = argv
const CIPluginFn = {
  weapp: {
    appid: 'xxxx',
    privateKeyPath: 'private.xxxx.key', // 配置密钥的门路
    robot,
  },
  desc,
}

const config = {plugins: [['@tarojs/plugin-mini-ci', CIPluginFn]],
}

自定义打包命令

这里自定义了 test 以及 prod 两个环境，test 测试环境通过 –env 指定为 development，prod 默认为线上 production

// package.json
{

  "scripts": {
    "build:weapp:test": "npm run build:weapp -- --env development",
    "build:weapp": "taro build --type weapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "release:weapp:test": "npm run build:weapp:test -- --upload --robot=1 --desc='test 环境 '","release:weapp:prod":"npm run build:weapp -- --upload --robot=2 --desc='prod 环境'"
  },

}

jenkins 配置

jenkins 是自动化打包我的项目的工具。平时咱们须要应用微信开发工具，手动装置依赖，并执行打包、上传的动作。当初把这些动作配置到 jenkins 的流水线当中，以实现主动打包上传。

服务器配置 jenkins 教程能够自行查阅。

重点留神下 java 版本与 jenkins 的版本，版本不匹配会导致很多谬误。

新建工作

装置完 Jenkins 就能够创立一个工作，来正式打包我的项目了

抉择工作模版

jenkins 工作配置：

• 拉取我的项目代码
• 确定我的项目分支
• 执行自定义的打包命令

配置好工作后，点击 Build Now 进行打包

打包后果如下：

上图打包过程中生成的二维码无奈扫描，可扫的体验二维码寄存在 dist 文件夹下的 upload.png。

后续可本人优化，把生成的二维码发送到钉钉等。

小程序后盾上传后果

下面就实现了就 enkins 配置的流程，但还有如下几个问题须要解决。

• [] 1. API 环境变量如何配置
• [] 2. 测试环境反对环境的切换。不便测试人员在测试接口或者线上接口切换
• [] 3. 体验码确定。毕竟同时只能存在一个体验码

1. 环境变量配置以及打包命令配置

环境变量 env 配置

taro 默认的打包命令是 build:weapp，其对应的 NODE_ENV 为 prodcution。而咱们想要 jenkins 打包时也能呈现 test 环境或者其余环境的变量，能够在 script 脚本中通过 –env 来指定环境

在 tao-cli 源码中提供了 env 的注入形式

能够看出次要注入了 env 变量，process.env.NODE_ENV 就将会采纳。

另外也能够了解咱们退出了—watch 后，其会将 process.env.NODE_ENV 置为 development 的过程。

// taro-cli/src/cli.ts

if (command) {
      ....

      // 设置环境变量
      process.env.NODE_ENV ||= args.env
      if (process.env.NODE_ENV === 'undefined' && (command === 'build' || command === 'inspect')) {process.env.NODE_ENV = (args.watch ? 'development' : 'production')
      }
      ...
}

我的项目中指定 –env 变量，比方指定了 –env 为 development

"build:weapp:test": "npm run build:weapp -- --env development"

在 config 目录中，process.env.NODE_ENV 的值就是咱们指定的 –env 值。依据 process.env.NODE_ENV 就能够制订不同的脚本了，比方默认的 dev，prod，当然这里也能够减少为 pre 等脚本。

// config/dev.js
module.exports = {
  env: {NODE_ENV: '"development"',},
}
//config/prod.js
module.exports = {
  env: {NODE_ENV: '"production"',},
}
//config/index.js
module.exports = function (merge) {if (process.env.NODE_ENV === 'development') {return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

API 环境变量确定

下面咱们配置好了 jenkins 打包，上面就须要确定接口具体的环境变量了。因为小程序比拟非凡，还须要手动提审小程序，还可能有测试环境切换接口环境的需要，因此须要确定下环境变量的优先级。当然如果没有兜底或者切换的需要，间接在 config/dev.js 或者 prod.js 下的 env 中配置接口地址即可。

环境变量 env 的优先级

为了防止线上环境呈现测试接口，这里做了兜底的策略：只有是小程序 release 环境则肯定是线上代码。另外为了反对测试环境切换环境，须要在本地进行 env 缓存。最初就是 webpack 注入的环境变量了 process.env.NODE_ENV。

环境变量的优先级：

1. 保底环境：小程序 release 环境或者 jenkins- 线上环境
2. 缓存 storage 存在的变量 env：目标是反对测试环境切换环境
3. Webpack 注入的 process.env.NODE_ENV 变量：次要由 Jenkins 决定

具体的实现

实现优先级

getCurrentEnv 函数的次要作用就是依据优先级获取以后的 env 变量

// utils/env.ts
import Taro from '@tarojs/taro'

/** 获取以后的环境变量 */
export const getCurrentEnv = (env: string | undefined) => {
  // 本地缓存的 env
  const cacheEnv = Taro.getStorageSync(STORAGE_ENV_KEY)
  // 小程序 release 环境或者线上打包地址，默认都是线上地址
  if (isWeappRelease() || isProdEnv()) {return EEnvType.prod}
  // 存在缓存 env，则采纳
  if (cacheEnv && [EEnvType.dev, EEnvType.prod].includes(cacheEnv)) {return cacheEnv}
  // webpack 注入的环境变量
  return env
}

依据确定的 env 来确定接口地址

通过 getCurrentEnv 获取了以后的环境变量 env，就能拿到以后申请的域名地址 API_CURRENT_HOST，此处间接将接口地址以枚举的模式列出来了。

// configs/env.ts
import {getCurrentEnv, EEnvType} from '~/utils/env'

/** api 域名：理论应用替换成本人我的项目对应的域名 */
export const API_HOST = {[EEnvType.dev]: 'test',
  [EEnvType.prod]: 'prod',
}

/** 以后的环境变量 */
export const currentEnv = getCurrentEnv(process.env.NODE_ENV)

/** API 以后申请域名 */
export const API_CURRENT_HOST = API_HOST[currentEnv]

测试环境反对环境切换

切换环境组件 EnvPopup

通过抉择控件切换环境变量，因为咱们的接口 API_CURRENT_HOST 是在编译阶段就确定了，这里在 storage 中切换 env 值并不会让接口变更，思考到切换只是测试低频的需要，因此就简略解决为手动重启小程序的形式。

当然如果不想要这样做，能够将申请域名存到内存当中，比方小程序全局变量 Taro.getApp()中，以实现在运行时切换的需要。

export const EnvPopup: React.FC<{}> = () => {const [visible, setVisible] = useState(false)

  const listData = [
    [{ value: EEnvType.dev, text: '开发环境'},
      {value: EEnvType.prod, text: '正式环境'},
    ],
  ]
  const confirmPicker = (values: (string | number)[]) => {Taro.setStorageSync(STORAGE_ENV_KEY, values[0])
    Taro.showToast({
      title: '请点击右上角三个点，抉择从新进入小程序后失效',
      icon: 'none',
    })
  }
  return (
    <>
      <View
        className={styles.btn}
        onClick={() => {setVisible(true)
        }}
      >
        切
      </View>     
    </>
  )
}

小程序体验码

小程序体验码是单例的，同一时间只会存在一个实例。也就是他人将体验码切走，扫旧的二维码也是指向最新的版本。

因为咱们外部约定了 test 环境为 ci 机器人 1，prod 线上环境为 ci 机器人 2。为了固定体验码，提供了以下倡议

体验码切换约定

1. 体验码：平时稳固在 ci 机器人 1
2. 提审：以机器人 2 提审，但体验码不变
3. 线上测试回归：
4. 单需要时，间接切到线上体验码：体验码能够先切到 ci 机器人 2，之后切回机器人 1

5. 测试须要同时测试不同环境，能够思考提供开发版：
   能够提供本地开发版，本地先执行 npm run build:weapp 打包线上包，而后小程序工具预览。因为预览码只有 25 分钟的有效期，能够给测试人员加开发者权限，在小程序：小程序助手 下能查看到了提交的开发版，这个是没有时效的。

   这一步能够本人在 scripts 中退出"build:weapp:preview": "taro build --type weapp --preview"

总结

以上就是 jenkins 打包 taro 小程序的过程了，具体过程能够查看 demo，有任何问题欢送留言