前言：哈哈哈哈......没想到自己也开始写文章做总结了，希望自己能够在前端开发的道路上越走越远，也希望能够和更多的小伙伴交流，更希望自己的踩的坑能够帮助到更多的小伙伴避免。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可以注意一下
编辑
以上便是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 写法（组件编码）
编辑
Canvas | 微信开放文档），有兴趣可以再去看看。
说说为什么要加nextTick()，相信大家也明白它的含义就是等到下个周期再去执行callback，最开始我没有加，怎么也获取不到节点node，最后还是靠chatGTP，哈哈哈哈.......这样到话便能获取canvas然后进行内容绘制，同样的wx.createSelectorQuery().in(this)，作用是一致，也可以不加，但是不加可能也会获取不到，为了一次性解决还是加上吧，不知道错哪儿真的很头疼。
小结一下
当然这是在组件中使用，需要注意的地方，如果是正常的Page页面那么nextTick()，就视情况而定吧。
哈哈哈哈哈......第一次写文章，还是不太会挑重点，如果哪里有不对的地方欢迎各位小伙伴指出来，大家一起进步哦，对了如果想看Page中的编写方法，大家要多多加油哦！！！
