weapp-qrcode-canvas-2d

weapp-qrcode-canvas-2d 是使用新版canvas-2d接口在微信小程序中生成二维码（外部二维码）的js包。canvas 2d 接口支持同层渲染且性能更佳，建议切换使用，可大幅提升速度。

仓库地址

weapp-qrcode-canvas-2d【码云gitee】
weapp-qrcode-canvas-2d【github】

测试环境

微信小程序基础库版本：2.10.4
开发者工具版本：Stable 1.03.2101150

Usage

先在 wxml 文件中，创建绘制的 canvas，并定义好 width, height, id , type ，其中type的值必须为2d

<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas>

安装方法1：直接引入 js 文件

直接引入 js 文件，使用 drawQrcode() 绘制二维码

// 将 dist 目录下，weapp.qrcode.esm.js 复制到项目中。路径根据实际引用的页面路径自行改变import drawQrcode from '../../utils/weapp.qrcode.esm.js'

安装方法2：npm安装

npm install weapp-qrcode-canvas-2d --save

// 然后需要在小程序开发者工具中：构建npm

import drawQrcode from 'weapp-qrcode-canvas-2d'

安装完成后调用

例子1：没有使用叠加图片

const query = wx.createSelectorQuery()
query.select('#myQrcode').fields({node: true,size: true}).exec((res) => {var canvas = res[0].node// 调用方法drawQrcode生成二维码drawQrcode({canvas: canvas,canvasId: 'myQrcode',width: 260,padding: 30,background: '#ffffff',foreground: '#000000',text: '大王顶真帅',})// 获取临时路径（得到之后，想干嘛就干嘛了）wx.canvasToTempFilePath({canvasId: 'myQrcode',canvas: canvas,x: 0,y: 0,width: 260,height: 260,destWidth: 260,destHeight: 260,success(res) {console.log('二维码临时路径：', res.tempFilePath)},fail(res) {console.error(res)}})})

例子2：使用叠加图片(在二维码中加logo)

const query = wx.createSelectorQuery()query.select('#myQrcode').fields({node: true,size: true}).exec(async (res) => {var canvas = res[0].nodevar img = canvas.createImage();img.src = "/image/logo.png"img.onload = function () {// img.onload完成后才能调用 drawQrcode方法var options = {canvas: canvas,canvasId: 'myQrcode',width: 260,padding: 30,paddingColor: '#fff',background: '#fff',foreground: '#000000',text: 'https://gitee.com/w386888618/weapp-qrcode-canvas-2d',image: {imageResource: img,width: 80, // 建议不要设置过大，以免影响扫码height: 80 // 建议不要设置过大，以免影响扫码round: true // Logo图片是否为圆形}}drawQrcode(options)// 获取临时路径（得到之后，想干嘛就干嘛了）wx.canvasToTempFilePath({x: 0,y: 0,width: 260,height: 260,destWidth: 600,destHeight: 600,canvasId: 'myQrcode',canvas: canvas,success(res) {console.log('二维码临时路径为：', res.tempFilePath)},fail(res) {console.error(res)}})};})

API

drawQrcode([options])

options

Type: Object

参数	必须	说明	示例
canvas	必须	画布标识，传入 canvas 组件实例
canvasId	非	绘制的`canvasId`	`'myQrcode'`
text	必须	二维码内容	‘https://github.com/DoctorWei/weapp-qrcode-canvas-2d’
width	非	二维码宽度，与`canvas`的`width`保持一致	260
padding	非	空白内边距	20
paddingColor	非	内边距颜色	默认与background一致
background	非	二维码背景颜色，默认值白色	`'#ffffff'`
foreground	非	二维码前景色，默认值黑色	`'#000000'`
typeNumber	非	二维码的计算模式，默认值-1	8
correctLevel	非	二维码纠错级别，默认值为高级，取值：`{ L: 1, M: 0, Q: 3, H: 2 }`	1
image	非	在 canvas 上绘制图片，层级高于二维码，v1.1.1+版本支持。具体使用见：例子2	`{imageResource: '', width:80, height: 80, round: true}`

TIPS

weapp-qrcode-canvas-2d 参考以下源码

参考 weapp-qrcode
参考 jquery-qrcode

微信小程序开发：文字转二维码相关推荐

微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
微信小程序长按识别二维码，小程序相关问题总结
微信小程序长按识别二维码,小程序相关问题总结开发小程序中,长按识别二维码,小程序码跳转,已知问题整理: 小程序中,不支持长按识别二维码,和小程序码. 可利用小程序图片预览功能识别小程序码并进行跳 ...
微信小程序业务-字符串生成二维码（weapp-qrcode）
微信小程序业务-字符串生成二维码(weapp-qrcode) 前言邂逅weapp-qrcode 基本使用详细参数小程序组件中使用 image属性详解想使用网络图片? 参考地址前言在小程序项 ...
微信小程序使用weapp-qrcode生成二维码
<canvas style="width:108rpx;height:108rpx; canvas-id='qrcode'></canvas> // weapp-qr ...
『小程序开发』关于微信小程序扫普通链接二维码打开小程序的具体配置流程...
前言: 对于扫普通链接二维码打开小程序的功能详解,官方api已经可以说是接近手把手的教学,咱们这里不做累述,直接上图走起...官方接入指南功能介绍扫二维码登录小程序...^_^ 限制 1.对于普通 ...
微信小程序订单生成支付二维码接口 code
手机的小程序订单是直接拉起支付界面的,有些朋友需要生成支付二维码这边就需要去调用微信的支付二维码接口了需要的参数是 session_id, timeStamp, nonceStr, package ...
uni-app微信小程序生成自定义参数二维码，跳转小程序指定页面，获取参数；uni-app微信小程序获取二维码自定义参数；微信小程序生成动态参数二维码；uni-app微信小程序获取动态参数二维码；
一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...
山东大学项目实训（四）—— 微信小程序扫描web端二维码实现web端登录
效果点击登录后,显示二维码→打开"探古"(本项目)微信小程序,扫描二维码确认登录→web端登录成功主要流程因为本人主要负责web前端的开发,所以本文仅介绍web前端的实现方法 ...
微信小程序——weapp-qrcode.js生成二维码、海报二维码、核销码
各位小伙伴们,不知道你们在开发的时候有没有遇到小程序生成二维码,生成海报时候带上二维码.核销码等等. 那么,小程序端该如何生成二维码图片呢? 效果如下: weapp-qrcode.js 小伙伴们可以来 ...
uniapp 微信小程序长按识别二维码，跳转小程序、个人微信
前言: 业务要求是小程序放一个二维码图片,长按可以识别二维码,进而识别出个人微信,添加个人微信:我们可以通过uni.previewImage(OBJECT)或者wx.previewImage(Obje ...

微信小程序开发：文字转二维码