我们在开发小程序时，完成了功能的开发和自测后我们往往需要上传小程序代码到开者后台，然后获取体验版本的二维码，再将这个二维码发给测试的同学进行测试。在笔者的上一篇文章中，介绍了如何使用小程序CI工具上传代码到开发者后台，CI工具除了可以上传代码外还可以实现预览的功能，获得预览二维码。本文将介绍如何获取预览二维码并自动发送到飞书群聊中。和手动发送二维码相比，这样是不是显得比较高级啊？

欢迎阅读本文一起学习，通过阅读本文你将有如下收获：（1）了解如何使用小程序CI工具获取小程序预览二维码（2）了解如何使用飞书机器人向群聊中发送图片（3）了解node.js相关知识。

使用CI工具获取预览二维码

首先看一下如何使用CI工具获取二维码，我们看一下代码：

// 使用小程序ci获得预览的二维码
const previewResult = await ci.preview({
  project,
  desc: commitMsg, // 此备注将显示在“小程序助手”开发版列表中
  setting: {
    es6: true,
    minifyJS: true,
    minifyWXML: true,
    minifyWXSS: true
  },
  qrcodeFormat: 'image',
  qrcodeOutputDest: 'E:/GitSpace/fs-new/lio-4s-applet/qrcode/destination.jpg',
  onProgressUpdate: console.log,
})

看一下上面代码中preview方法涉及的参数：

project是项目对象
desc是自定义备注，将显示在“小程序助手”开发版列表中
setting是编译设置，详见文档
qrcodeFormat用来指定返回二维码文件的格式 "image" 或 "base64"，默认值 "terminal" 供调试用，这里我们将其指定为image
qrcodeOutputDest是二维码的保存路径,需要注意：我们指定了qrcode目录来存放二维码，一定要先创建这个目录
onProgressUpdate是进度更新监听函数，这里我们使用console.log

另外需要注意的是不同于从开发者后台下载下来的体验二维码，我们获取到的预览二维码是有时效性的，所以这里计算一下二维码的失效时间，用于提醒测试同学赶紧扫码测试：

// 根据当前时间计算二维码失效时间
const timeNow = new Date()
const invalidateTime = new Date(timeNow.setMinutes(timeNow.getMinutes() + 25))
const invalidateTimeStr = formatTime(invalidateTime)

飞书机器人简介

关于飞书机器人的详细内容，读者可以阅读飞书开放平台的文档《自定义机器人指南》，这里做简要的介绍。

笔者是首先通过群聊创建了自定义机器人，然后要使用机器人发送图片，在上传图片文档中的注意事项提醒我们要使用上传图片功能需要开启机器人能力。并且调用上传图片接口需要access_token, 我们需要调用自建应用获取 tenant_access_token的接口，调用这个接口需要的参数是应用唯一标识（app_id）和应用秘钥（app_secret），可以参考获取访问凭证文档。另外需要注意，我们要使用的发送图片功能是需要配置【获取与上传图片或资源】的权限，可以参考如何为应用申请所需权限的文档。下图为笔者申请权限的截图：

关于飞书机器人的使用，大家详细看看文档就能弄明白，总结一下这里需要注意的点：

机器人发送图片需要申请权限
要调用的飞书服务端接口有两个：第一个是获取凭证的接口，第二个是上传图片的接口，此接口需要传file类型的数据，然后得到image_key，后续机器人发送image_key飞书就能够在消息中转换为对应的图片。

第一个接口使用node调用没啥问题，第二个接口笔者尝试了以上午也没调用成功。主要由于在node中没有浏览器端的FormData、File，所以就找了几个相关npm包试了试，但是都不好用。无奈请求很nice的后端小哥哥帮忙封装了一个接口把获取凭证和上传图片都放在他那做了。

上传图片和发送飞书消息

前面我们使用了ci.preview将二维码图片保存到了本地qrcode目录下了：

如下代码为调用后台接口上传图片获取image_key：

// 上传图片
const fileImg = fs.readFileSync(path.resolve('E:/GitSpace/fs-new/lio-4s-applet/qrcode/destination.jpg'))
const arrayBuffer = toArrayBuffer(fileImg)
// 后端帮忙封装的接口
const uploadToFeiShu = await axios.post(`https://*********************/image/upload`, {
  stream: Array.apply(null, new Uint8Array(arrayBuffer)),
  app_id,
  app_secret
}, )
const image_key = uploadToFeiShu.data.data.image_key
console.log(image_key)

这里需要注意的是fs.readFileSync读取的是Buffer，需要调用工具方法toArrayBuffer转为ArrayBuffer。

如下代码为将二维码以及版本描述信息发送到飞书群聊：

// 将二维码推送到群聊
const sendData = {
  msg_type: 'post',
  content: {
    post: {
      zh_cn: {
        title: '小程序版本发布通知',
        content: [
          // ....
          [{
              tag: 'text',
              text: '请及时扫面预览二维码进行测试: ',
            },
            {
              tag: "img",
              image_key: image_key
            },
          ],
          [{
              tag: 'at',
              user_id: '7065221969075027972',
              user_name: 'NewName'
            },
          ]
        ],
      },
    },
  },
};
axios.post('https://open.feishu.cn/open-apis/bot/v2/hook/************',
    sendData).then((response) => {
    console.log(response);
    if (response.data.StatusMessage === 'success') {
      console.log('版本发布成功，已成成功将版本发布消息同步到飞书群聊')
    }
  })
  .catch((error) => {
    console.log(error);
  });

如上代码中sendData是机器人要发送的数据，axios.post方法的url是飞书机器人的webhook地址。

综合上文中的这些代码，我们将其放到send.js文件中，然后在package.json中增加一条npm script，则可以运行npm run send命令，将二维码发送到飞书群聊中。代码执行效果如下图所示：

总结

小程序CI工具的ci.preview方法可以预览小程序并获取预览二维码，可以借助自定义的飞书机器人的能力将预览二维码发送到飞书群聊中以自动化的方式代替手动的方式。需要注意的是自定义的飞书机器人要使用发送图片的能力需要申请权限。

还在手动发送小程序体验二维码给同事吗？

使用CI工具获取预览二维码

飞书机器人简介

上传图片和发送飞书消息

总结