前言:哈哈哈哈......没想到自己也开始写文章做总结了,希望自己能够在前端开发的道路上越走越远,也希望能够和更多的小伙伴交流,更希望自己的踩的坑能够帮助到更多的小伙伴避免。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)作用是一致,也可以不加,但是不加可能也会获取不到,为了一次性解决还是加上吧,不知道错哪儿真的很头疼。

小结一下

当然这是在组件中使用,需要注意的地方,如果是正常的Page页面那么nextTick(),就视情况而定吧。

哈哈哈哈哈......第一次写文章,还是不太会挑重点,如果哪里有不对的地方欢迎各位小伙伴指出来,大家一起进步哦,对了如果想看Page中的编写方法,大家要多多加油哦!!!