如何利用小程序的canvas来绘制二维码？_微信

微信小程序如何生成二维码？下面本篇给大家介绍一下利用小程序的canvas能力绘制二维码的方法，希望对大家有所帮助！

如何利用小程序的canvas来绘制二维码？

在微信小程序的业务中会有一些需要展示二维码的场景。静态二维码可以直接存放在本地，使用图片方式展示，但不适合根据用户相关信息生成动态的二维码。本文将介绍下利用小程序的canvas能力绘制二维码。

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

1.1 demo

@@##@@

1.2 安装

# 通过 npm 安装
npm i wx-qr -s

# 通过 yarn 安装
yarn add wx-qr

登录后复制

1.3 使用组件

首先在你所开发的小程序根目录 app.json 或需要使用该组件的 xxx.json 中引用组件

（注意：请不要将组件命名为 wx-xxx 开头，可能会导致微信小程序解析 tag 失败）

{
  "usingcomponents": {
    "qr-container": "wx-qr"
  }
}

登录后复制

之后就可以在 wxml 中直接使用组件

<qr-container></qr-container>

登录后复制

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

登录后复制

当然，还可以支持很多种配置，详见微信开发者工具打开查看或者微信开发者工具打开查看文档。

2. 方式二：基于qrcode.js结合canvas绘制

2.0 二维码的组成部分

定位图案position detection pattern是定位图案，用于标记二维码的矩形大小。这三个定位图案有白边叫separators for postion detection patterns。之所以三个而不是四个意思就是三个就可以标识一个矩形了。timing patterns也是用于定位的。原因是二维码有40种尺寸，尺寸过大了后需要有根标准线，不然扫描的时候可能会扫歪了。alignment patterns 只有version 2以上（包括version2）的二维码需要这个东东，同样是为了定位用的。功能性数据format information 存在于所有的尺寸中，用于存放一些格式化数据的。version information 在 >= version 7以上，需要预留两块3 x 6的区域存放一些版本信息。数据码和纠错码除了上述的那些地方，剩下的地方存放 data code 数据码和 error correction code 纠错码。

2.1 引入二维码数据生成库

复制微信开发者工具打开查看至你的小程序相应目录。

2.2 小程序中建立canvas标签，并给canvas设置长宽

<canvas></canvas>

登录后复制

2.3获取canvas实例及上下文

const query = this.createselectorquery();
let dpr = wx.getsysteminfosync().pixelratio;
query.select('#qr').fields({ node: true, size: true, id: true })
  .exec((res) =&gt; {
    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 }
const correctlevel = 0;
// 创建二维码实例对象，并添加数据进行生成
const qrcode = new qrcodemodel(-1, correctlevel);
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;
// 循环行列绘制数据码区
for (let row = 0; row = ncount - 8)) || (col &gt;= ncount - 8 &amp;&amp; row = 8 &amp;&amp; col = 8 &amp;&amp; row <p>此时已经绘制出二维码的数据码区：</p><p><img src="https://img.php.cn/upload/image/414/636/607/1641434319281933.png" title="1641434319281933.png"    style="max-width:90%" alt="1.png"></p><p><span style="font-size: 16px;"><strong>2.5 绘制图形识别区</strong></span></p><pre class="brush:js;toolbar:false;">// 绘制position detection pattern
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.fillrect(0, (ncount - 7) * nsize, nsize, 7 * nsize);
ctx.fillrect(6 * nsize, (ncount - 7) * nsize, nsize, 7 * nsize);
ctx.fillrect(2 * nsize, 2 * nsize, 3 * nsize, 3 * nsize);
ctx.fillrect((ncount - 7 + 2) * nsize, 2 * nsize, 3 * nsize, 3 * nsize);
ctx.fillrect(2 * nsize, (ncount - 7 + 2) * nsize, 3 * nsize, 3 * nsize);
// 绘制position detection pattern 完毕

// 绘制timing patterns
const timingscale = 1;
const timingxyoffset = (1 - timingscale) * 0.5;
for (let i = 0; i <p>这时候，一个朴素的二维码就绘制成功啦~</p><p><img src="https://img.php.cn/upload/image/278/257/442/1641434328678342.png" title="1641434328678342.png"    style="max-width:90%" alt="2.png"></p><blockquote>
<p>具体代码详见微信小程序代码片段</p>
<p>https://developers.weixin.qq.com/s/whjj73mx7bwv</p>
</blockquote><p>该代码只是提供了一个简单二维码的生成逻辑。若需要更复杂的二维码展示功能，还是建议使用<a href="https://developers.weixin.qq.com/s/g3naetm67svy" target="_blank" rel="nofollow noopener noreferrer" ref="nofollow noopener noreferrer">微信开发者工具打开查看</a>或参考里面的具体代码。欢迎各位提issue和star~~</p><p>【相关学习推荐：<a href="https://developers.weixin.qq.com/s/g3naetm67svy" target="_blank" rel="nofollow noopener noreferrer" ref="nofollow noopener noreferrer">微信开发者工具打开查看</a>】</p><img src="https://img.php.cn/upload/image/871/396/214/1641434334765322.png" title="1641434334765322.png"    style="max-width:90%" alt="3.png"><img src="https://img.php.cn/upload/image/103/900/786/1641434416683001.png" title="1641434416683001.png" alt="5.png"><img src="https://img.php.cn/upload/image/301/413/586/1641434422913735.png" title="1641434422913735.png" alt="6.png">

登录后复制

以上就是如何利用小程序的canvas来绘制二维码？的详细内容，更多请关注代码网其它相关文章！