createCanvasContext弃用咋办 | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 12 天

今天给小程序进行了一下体验评分

发现居然有一个微信官网弃用的api——createCanvasContext

然后去看代码，才发现是我引用的生成二维码组件——ayQrcode，它实现二维码过程中使用了这个API，由于涉及到canvas，我还不熟，所以第一想法是重新找一个插件或组件

然后我就发现了这个——uni-app组件 | uQRCode同样可以生成二维码

uQRCode 全端二维码生成插件 支持nvue 支持nodejs服务端 - DCloud 插件市场

但再运行了体验评分，又是createCanvasContext ！虽然现在小程序看起来还能正常使用，但看到废弃接口调用几个红色的字在那，说明小程序隐患还是有点大啊，所以就去寻求解决 看了好几个方法

• wx.createCanvasContext()停止维护替代写法 - 简书 (jianshu.com)
• uni app 在组件中操作 canvas 已踩坑 - James2019 - 博客园 (cnblogs.com)
• wx.createCanvasContext 不能用了，现在要替换成什么？ | 微信开放社区 (qq.com)

却都不能解决，运行起来直接在控制台报红了呜呜，没办法

只能去看官方文档——uni.createSelectorQuery() | uni-app官网 (dcloud.net.cn)

没懂

看到很多解决方法都是用的createSelectorQuery，说明这是突破口，然后就去对比

//文档示例
var canvasContext1 = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
//参考上边链接的解决方法
var canvasContext2 = uni.createSelectorQuery().in(this).select("#qrcode");

去打印这两canvasContext，发现不一样，回去看文档才知道2这个获取的是nodesRef，而目标1是CanvasContext，控制台才报错，

然后最终解决方案就是这样

// 获取canvas上下文
var canvasContext = uni.createSelectorQuery().in(this).select("#qrcode");
      canvasContext
        .fields(
          {
            size: true,
            context: true,
          },
          (res) => {
            // 设置uQRCode实例的canvas上下文
            qr.canvasContext = res.context;
            // 调用绘制方法将二维码图案绘制到canvas上
            qr.drawCanvas();
            this.$refs.popup.open();
          }
        )
        .exec();//这个要加上才会执行上边的回调，不知道为什么