weapp-qrcode与canvas-2d生成二维码（组件使用）

最新推荐文章于 2024-08-09 07:04:45 发布

Analysys易观

最新推荐文章于 2024-08-09 07:04:45 发布

阅读量48

点赞数

前言：哈哈哈哈......没想到自己也开始写文章做总结了，希望自己能够在前端开发的道路上越走越远，也希望能够和更多的小伙伴交流，更希望自己的踩的坑能够帮助到更多的小伙伴避免。OK，不再废话进入正题。

weapp- qrcode介绍

相信大家在做小程序的开发的过程中，或多或少需要进行二维码的生成或者是扫描二维码，从而完成某些需求，这里主要讲解一下生成二维码的过程，以及我遭遇的一些坑：

weapp-qrcode作为一款生成二维码的第三方库来讲，的确为我们的开发节约了很多时间，至少我没有自己去手写过二维码，当然还有许多其他的第三方库：

qr-image: 一个适用于Node.js的库，可用于生成二维码。
QR Code Generator: 一个基于JavaScript的库，可在浏览器中生成二维码。
qrious: 一个用于在浏览器中生成二维码的JavaScript库，支持自定义样式和选项。
当然还有很多其他的，这里就不再一一赘述了......

这里是 weapp-qrcod 的下载地址 weapp-qrcode - npm

GitHub地址 GitHub - yingye/weapp-qrcode: weapp.qrcode.js 在微信小程序中，快速生成二维码

// wxml 中设置一个canvas
<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>

// 将 dist 目录下，weapp.qrcode.esm.js 复制到项目目录中
import drawQrcode from '../../utils/weapp.qrcode.esm.js'
 
//调用 drawQrcode 即可生成一个二维码，并且还能够在中间夹带图片
drawQrcode({
  width: 200,
  height: 200,
  canvasId: 'myQrcode',
  // ctx: wx.createCanvasContext('myQrcode'),
  text: 'https://github.com/yingye',
  // v1.0.0+版本支持在二维码上绘制图片
  image: {
    imageResource: '../../images/icon.png',
    dx: 70,
    dy: 70,
    dWidth: 60,
    dHeight: 60
  }
})

还有一些相关的API可以注意一下

weapp-qrcode与canvas-2d生成二维码（组件使用）_canvas

编辑

以上便是weap-qrcode最为基础的使用，并且也能过生成相关的二维码，但是，这样生成的二维码有个很大的问题，就是层级为最顶层（应该是最顶层，不是很清楚，但是层级真的很高，无论怎么设置z-index都没有用，并且如果在同一个页面中含有多个其他页面组件，那么就会造成二维码的显示在其他的页面，并且无法控制，我没有控制住......）

解决办法：使用H5提供的新版本canvas-2d，但是它的操作会比老版麻烦一点，是的我觉得就亿点点🤏

老版 canvas 写法：

// 在text中添加内容就可以直接生成相应的二维码了，so easy
drawQrcode({
  width: 200,
  height: 200,
  canvasId: 'myQrcode',
  text: 'https://github.com/yingye'
})

新版 canvas-2d 写法（组件编码）

weapp-qrcode与canvas-2d生成二维码（组件使用）_canvas_02

编辑

Canvas | 微信开放文档），有兴趣可以再去看看。

说说为什么要加nextTick()，相信大家也明白它的含义就是等到下个周期再去执行callback，最开始我没有加，怎么也获取不到节点node，最后还是靠chatGTP，哈哈哈哈.......这样到话便能获取canvas然后进行内容绘制，同样的wx.createSelectorQuery().in(this)，作用是一致，也可以不加，但是不加可能也会获取不到，为了一次性解决还是加上吧，不知道错哪儿真的很头疼。