在Taro中使用qrCode生成二维码

最新推荐文章于 2024-08-18 10:35:51 发布

NSARaphael

最新推荐文章于 2024-08-18 10:35:51 发布

阅读量4.3k

点赞数

文章标签： Taro

本文链接：https://blog.csdn.net/VPSnow/article/details/100981870

版权

本文介绍了在Taro框架中遇到的qrCode生成二维码的问题及解决方法。首先尝试使用qrcode.react，但由于与Taro的ES6模式不兼容导致报错。接着使用qrCode库，但发现canvas元素获取方式不同，最终通过getElementsByTagName获取并成功生成二维码。然而，页面跳转后二维码无法正常显示，经排查采用toDataUrl方法生成base64图片，加载到Image元素上，解决了问题。

摘要由CSDN通过智能技术生成

在Taro中使用qrCode生成二维码

最近在学习react，使用Taro框架开发了一个H5页面。

其中有一个需求要生成一个二维码，服务端返回了一个url，之前在使用Vue的是时候使用过qrCode生成二维码，所以这边也想到了使用类似的插件。npm上搜了一下，找了一个qrcode.react，但是引入模式就不符合Taro框架使用的ES6，引入之后也无法使用，直接报错。转而使用qrCode。但是发现使用ID选择器无法获取到Canvas元素，Taro中使用的canvas只有一个canvasId，而设置后发现生成的DOM元素用一个div把canvas包裹住，然后把canvasId设置在了这个div上面。

                    <Canvas
                      style='width: 80px; height: 80px;'
                      id='canvas'
                      canvasId='canvas'
                    /