评论

微信、支付宝小程序CI尝鲜

如何使用CI解决上传代码流程较长的链路问题

背景

微信上传代码流程

PR -> 审核通过 -> 切到master分支 -> git pull -> 切到ide -> 点击上传代码 -> 填入备注和版本号

CI

PR -> 审核通过 -> CI上传

利用CI后除了一开始的人工提PR和审核后,不需要进行任何操作,并且会给出开始上传和上传完成的通知,解决了之前上传代码流程较长的人工链路,释放自己,不用一直做无意义且无趣的事。

执行过程的效果图如下:

上传成功后 我们需要去小程序后台提交审核信息。

钉钉自定义机器人

文档:钉钉webHooks,码云webHook对钉钉的支持,钉钉自定义机器人SDK

  1. 需要设置群机器人
  2. 群设置 -> 智能群助手 -> 添加机器人 -> 自定义机器人 -> 勾选安全设置加签
  3. 使用access_token和secret完成自定义机器人初始化

码云WebHooks

文档:码云webHooks,码云webHook推送数据格式说明

  1. 在URL处填入刚刚的接口,比如https://xxx.com/upload
  2. 勾选Pull Request,然后点击更新即可,这里需要注意他会发送好几次,比如创建PR发送一次,审核通过发送一次,合并发送一次,所以在接口里需要判断一下只有合并完成的时候才执行后续逻辑(state === 'merged'

微信小程序

准备工作

微信官方CI API

  • 密钥:微信公众号 -> 开发 -> 开发设置,下载代码上传密钥,然后在调用CI时设置好privateKeyPath
  • 白名单配置:微信公众号 -> 开发 -> 开发设置,配置白名单(必须IP)

开发

先来个流程图,让大家了解一下接口的逻辑

判断是否是合并到master(十一后可能要改为main了)

值得一提的是目前码云的webHook的推送数据格式是Request Payload,所以我们需要利用koa2-formidable插件对数据进行处理后就能直接使用ctx.request.body获取数据了

router.post('/api/upload', async ctx => {
  const body = ctx.request.body
  // 合并状态并且合到master才会自动上传到后台
  if (body.state === 'merged' && body.target_branch === 'master') {
      ...
  }
}
钉钉初始化
const Robot = require("dingtalk-robot-sdk")
const robot = new Robot({
  accessToken: config.robotAccessToken,
  secret: config.robotSecret
});
const text = new Robot.Text('开始上传')
robot.send(text)
是否存在项目
const xcxPath = path.join(process.cwd(), config[type].publicProject)
// 判断是否存在xcx项目文件夹,没有就去clone,有就pull最新代码
if (fs.existsSync(xcxPath)) {
  child_process.execSync('git pull', {
    cwd: xcxPath
  })
} else {
  child_process.execSync(`git clone ${config[type].git}`, {
    cwd: path.join(process.cwd(), config.publicRoot)
  })
}
项目初始化和上传
// 创建项目对象
const project = new ci.Project({
  appid: config.wx.appid,
  type: 'miniProgram',
  projectPath: publicProject,
  privateKeyPath: path.join(process.cwd(), config.publicRoot, '../wx.key'), // wx.key为小程序appSecret
  ignores: ['node_modules/**/*'],
})
const year = new Date().getFullYear() - 2000
let month = new Date().getMonth() + 1
const day = new Date().getDate()
// 根据年月日当版本号
const version = '2.5.' + year + (month < 10 ? '0' + month : month) + (day < 10 ? '0' + day : day);
// 上传
const previewResult = await ci.upload({
  project,
  version,
  desc: body.title,
  setting: {
    es6: true,
    minify: true,
    autoPrefixWXSS: true,
    minifyWXML: true,
    minifyWXSS: true,
    minifyJS: true
  }
})
钉钉通知完成
const markdown = new Robot.Markdown()
  .setTitle('上传完成!!!!')
  .add(`### [上传完成](https://mp.weixin.qq.com)\n`)
  .add(`1. version:${version}`)
  .add(`2. size:${fullSize}`)
  .add(`3. ${JSON.stringify(previewResult)}`)
robot.send(markdown)


支付宝小程序

准备工作

文档:支付宝官方CLI文档支付宝官方SDK文档

开发

其余逻辑均与上面的微信小程序开发一致,只有项目初始化和上传是不一致的,所以这里我们只说一下项目初始化和上传

项目初始化

使用alipaydev key create -w 生成的私钥和工具id完成项目初始化

// 初始化项目
alipaydev.setConfig({
    toolId: config.ali.toolId,
    privateKey: config.ali.privateKey,
})
上传

version不传的话默认线上包版本自增0.0.1,所以我们不需要传version

const uploadResult = await alipaydev.miniUpload({
  appId: config.ali.appid,
  clientType: 'alipay',
  project: publicProject,
  experience: true // 设置体验版(不是主账户,所以其实目前没用)
})


最后一次编辑于  2020-09-29  
点赞 22
收藏
评论

2 个评论

  • 宋作江
    宋作江
    发表于移动端
    2021-06-26
    好的的 了输人 指纹人啊卡 1
    2021-06-26
    赞同
    回复
  • tutu
    tutu
    2020-09-29

    2020-09-29
    赞同
    回复
登录 后发表内容