如何使用小程序画布绘制二维码（如何使用小程序画布绘制二维码）

微信小程序如何生成二维码？下一篇我们将介绍如何利用小程序的canvas功能绘制二维码。 希望对您有帮助！

在微信小程序业务中，有几种场景需要展示二维码。 静态二维码虽然可以直接存储在本地并使用图像进行展示，但不适合根据用户相关信息生成动态二维码。 在这篇文章中，我们将向您展示如何使用小程序的画布功能绘制二维码。

1 方法一：通过wx-qr直接生成1.1 demo

打开并查看微信开发者工具

背景图、logo，包含logo+背景图

1.2安装

# 通过 npm 安装 i wx-qr -S# add wx-qr

1.3 要使用组件，首先要使用位于你开发的小程序根目录下的组件app.json，或者xxx.json

（注：组件）

{ "usingComponents ": { "qr-容器": "wx-qr" }}

然后就可以直接使用wxml组件了。

Page({ data: { qrTxt: 'https://github.com/liuxdi/wx-qr', } ,});

当然，也可以支持很多配置。 更多信息请参见github或码云文档。

2.方法二：结合QRCode.js和canvas进行绘制

2.0二维码组件

位置检测图案为定位图案用于标记二维码的矩形尺寸。 这三种定位图案都有白边，称为定位图案分隔符。 之所以有 3 个而不是 4 个，意味着您只需要 3 个来标记矩形。 计时模式也用于定位。 原因是QR码有40种不同尺寸。 如果尺寸太大且没有参考线，则可能会进行对角扫描。 只有放置图案版本 2 或更高版本（包括版本 2）的 QR 码才需要此功能，并且也用于定位。 功能数据格式信息以各种大小存在，用于存储格式化数据。 版本信息 对于版本 7 及更高版本，您必须预留两个 3 x 6 的空间来存储版本信息。 数据码和纠错码 数据码和纠错码也存储在上述以外的位置。

2.1 二维码数据生成库简介

将qrcode.js复制到小程序对应目录下。

2.2 在小程序中创建Canvas标签，并设置画布长宽

2.3 获取Canvas实例和上下文

const query = this.createSelectorQuery();让 dpr = wx .getSystemInfoSync().pixelRatio;查询。 select('#qr').fields({ node: true, size: true, id: true }) .exec((res) => { let { node: canvas, height, width } = res[0]; let ctx = Canvas.getContext('2d');Canvas.width = width * dpr Canvas.height = height * dpr ctx.scale(dpr, dpr); 2.4 定义一些变量并绘制二维码的数据码区域

QRCodeModel是从qrCode.js导入的

//二维码颜色 const colorDark = '#000';//获取二维码的大小。 由于CSS设置为750rpx，所以转换为px const rawViewportSize = getPxFromRpx(750);//二维码容错率 {L: 1, M: 0, Q: 3, H: 2}constCorrectLevel = 0;//创建二维码实例 向对象添加数据，使用 const qrCode = new QRCodeModel(- 1, rightLevel);qrCode.addData(url);qrCode.make();//每个方向二维码数量 const nCount = qrCode.moduleCount; //计算每个二维码块的大小 const nSize = getRoundNum( rawViewportSize / nCount, 3) // 每个二维码点的大小比例 const dataScale = 1 // dataScale 为 1; 如果计算的不是每个点的偏移值 const dataXyOffset = (1 - dataScale) * 0.5; // 通过循环行和列来绘制数据代码区域 (let row = 0; row w = nCount - 8)) || (col >= nCount - 8 && row = 8 &&col = 8 && row

此时绘制二维码数据代码区：

2.5 绘制图形识别区域

 //绘制位置检测图案 ctx.fillStyle = colorDark;ctx.fillRect(0, 0, 7 * nSize , nSize);ctx.fillRect((nCount - 7) *  nSize, 0, 7 * nSize, nSize);ctx.fillRect(0, 6 * nSize, 7 * nSize, nSize);ctx.fillRect((nCount - 7) * nSize, 6 * nSize, 7 * nSize, nSize);ctx.fillRect(0, (nCount - 7) * nSize, 7 *  nSize, nSize);ctx.fillRect(0, (nCount - 7 + 6) * nSize, 7 * nSize, nSize);ctx.fillRect(0, 0, nSize, 7 * nSize);ctx.fillRect(6 * nSize, 0, nSize, 7 * nSize);ctx.fillRect((nCount - 7) * nSize, 0, nSize, 7 * nSize);ctx.fillRect((nCount - 7 + 6) * nSize, 0, nSize, 7 * nSize);ctx.fillRec t(0, (nCount -  7) * nSize, nSize, 7 * nSize);ctx.fillRect(6 * nSize, (nCount [k3 ] 7) * nSize, nSize, 7 * nSize);ctx.fillRect(2 * nSize, 2 * nSize, 3 * nSize, 3 * n 大小);ctx.fillRect((nCount - 7 + 2) *  nSize, 2 * nSize, 3 * nSize, 3 * nSize);ct x.fillRect(2 * nSize, (nCount - 7 + 2) * nSize, 3 * nSize, 3 * nSize); // 位置检测图案绘制完成 // 时序图案绘制 consttimingScale = 1;consttimingXyOffset = (1 -timingScale)  * 0.5;for (let i = 0; i

此时，一个简单的二维码就绘制成功了~


代码详情请参见微信小程序代码段。
https://developers.weixin.qq.com/ s/WHJj73mX7bwv 

该代码仅提供简单的二维码生成逻辑。 如果需要代码显示功能，请使用 wx-qr或者参考内部具体代码，欢迎提交问题和star~~
【相关学习推荐：小程序开发教程]
 PHP快速学习视频免费教程（从初学者到高手）
 如何学习PHP？如何快速学习PHP？你好，Hart，这是一个简单的 PHP 学习教程（从初学者到专家）。  您可以保存并下载您想学习的朋友。    
 下载
			


    			
这几篇文章你可能也喜欢：
                 

                                            
如何将小程序二维码转换为链接？（如何将微信小程序二维码生成链接）
                                            
如何用小程序生成二维码（二维码生成工具免费）
                                            
小程序如何生成二维码（小程序如何生成二维码图片）
                                            
教你如何在微信小程序中使用画布+画师插件制作二维码（微信小程序画布生成图片）。
                                            
如何使用小程序的画布绘制二维码？（如何利用小程序的画布绘制二维码图形）
                                        
                        

                        本文由主机参考刊发，转载请注明：如何使用小程序画布绘制二维码（如何使用小程序画布绘制二维码） https://zhujicankao.com/142271.html