微信小程序如何长按识别生成的canvas二维码？

Question

之前没有做过小程序开发，很多小程序的api还不是很会。
现在的需求是用户收到短信后，点击短信链接跳转至相应的公众号，
但是查了现在的资料好像还不能直接外链跳转公众号，
于是退而求其次，点击外链打开一个固定的小程序，然后小程序通过外链参数，动态生成二维码，引导用户长按二维码跳转至不同的公众号。
小程序里用的qrcode.js，生成的二维码是在canvas上，但是小程序的长按识别只支持image。
想用wx.previewImage预览canvas，但是下面这种方式没有拿到canvas的url

this.setData({
  url: document.getElementById('canvas').toDataURL("image/png")
})

不行的话就只能用web-view，然后再写一个H5页面，比较麻烦。有办法能直接小程序内原生实现动态生成二维码并长按识别的功能吗

好了现在二维码生成了……但是长按后只有转发、保存和收藏的选项，保存到本地然后利用微信扫一扫可以直接跳转到公众号，但是小程序内不能直接长按识别二维码，想要做到小程序内长按识别，对二维码有什么要求吗？微信小程序的文档也查不到

Answer 1

用QRcode生成的二维码
然后用

wx.canvasToTempFilePath({
    canvasId: 'canvas',
    success: (res) => {
      this.setData({
        imageUrl: res.tempFilePath,
      })
    },
    fail: (_) => {}
})

把canvas生成了image。
但是有一个缺点是qrcode没有找到生成二维码后的回调，马上用 wx.canvasToTempFilePath 这个方法调用二维码可能会生成得不完整。因为就是临时用一下的方案就没改了。真要投入生产使用建议还是用其他更完善的库去生成二维码比较好。
最后小程序里支持长按识别的只有小程序码、微信个人码、企业微信个人码、普通群码、互通群码以及公众号二维码。公众号文章链接生成的二维码无法识别。

Answer 2

你把canvas生成的二维码转成base64填到image标签的src里去不就行了?

Answer 3

canvas2image

Answer 4

你的需求是:小程序内生成二维码,然后用户长按二维码直接跳转到不同的公众号,对吧。

要实现这个功能,有几点要注意:

1. 小程序生成的二维码图片,需要使用 <image> 组件展示,而不是 <canvas>。因为只有 <image> 支持长按小程序内识别二维码。
2. <image> 的 src 属性需要指向一个网络图片 URL,而不能是本地路径。所以你需要把生成的二维码图片上传到服务器,获取网络 URL。
3. 二维码图片的内容必须是「公众号文章链接」或「公众号消息链接」,而不能是公众号原始 ID。因为小程序只支持识别以上两种类型的二维码跳转至公众号。
4. 上传的二维码图片大小建议在 200kb 以下,否则可能识别率下降。
5. <image> 组件需要添加 catchtap 功能,监听用户长按事件,执行微信扫一扫识别二维码的功能。

综上,完整的实现代码可以如下:
js
// 1. 生成二维码,上传至服务器获取网络图片URL
let qrcodeURL = await uploadQrcode()

// 2. <image> 组件展示二维码
<image src="{{qrcodeURL}}" catchtap="scanQrcode"></image>

// 3. 处理长按事件,扫码识别
scanQrcode() {
wx.scanCode({

onlyFromCamera: true,
scanType: ['qrCode'],
success: res => {
  // res.result 包含二维码信息,然后跳转至对应公众号 
}

})
}

这种方式可以实现你的需求:小程序内生成不同二维码,用户长按后直接识别跳转至对应公众号。

let me know if you have any other questions!