转载：

weapp-qrcode-canvas-2d

仓库地址

测试环境

使用

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

安装方法2：npm安装

安装完成后调用

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

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

这里是API

drawQrcode([options])

转载：

weapp-qrcode-canvas-2d在微信小程序中生成二维码，新版canvas-2d接口 | 微信开放社区

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

使用

先在 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

在文件中引入

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/WeiDoctor/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])

Type: Object

转载：在微信小程序中生成二维码相关推荐

如何在微信小程序中生成二维码：一个最简单的案例就让你明白
使用weapp.qrcode.js 在微信小程序中,快速生成二维码一.效果二.具体步骤.代码下载weapp-qrcode代码然后将 dist 目录下的weapp.qrcode.esm.j ...
微信小程序中生成二维码工具：weapp.qrcode.js
先在 wxml 文件中,创建绘制的 canvas,并定义好 width,height,canvasId.由于小程序没有动态创建标签的 api,所以这一步不能省略. <canvas style=& ...
微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中实现 ...
微信小程序之生成二维码
首先先扯一些题外话,本人是java行业的小白,因为是改行做的java,之前的工作就不提了. 之前写过几篇随便,刚看了下,觉得比较low,就都删了,所以也算是进入java行业的第一篇随笔,如果有表述上或 ...
vue H5页面跳转微信小程序以及生成二维码跳转小程序
研究了两种H5跳转小程序的方法,同时携带参数 1. 手机浏览器打开H5页面,点击按钮拉起微信小程序 2. H5页面上生成小程序二维码,手机微信扫码跳转目标小程序为了开发方便,以上两种均借助了微信小程 ...
【微信小程序】生成二维码方式
前言基础库 2.12.0 开发者工具 1.03.2008270 生成二维码方式微信小程序的二维码可分为: 微信生成的二维码普通链接二维码微信生成的二维码,是指调用微信小程序服务端接口 wxac ...
微信小程序前端生成二维码并保存（海报同理）
这里写自定义目录标题 1.前端生成二维码并保存 1.前端生成二维码并保存 1.下载weapp.qrcode.js文件并引入项目中 2.先在wxml文件中构建canvas画布 <canvas st ...
.net/C# 微信小程序如何生成二维码图片
1.生成微信小程序二维码,需要获取微信小程序Access_Token.代码如下,先获取Access_Token /// <summary>/// 获取微信小程序Access_Token// ...
微信小程序动态生成二维码
效果图如下: 实现 wxml  <view class='container'><image bindtap="previewI ...

转载：在微信小程序中生成二维码

转载：

weapp-qrcode-canvas-2d

仓库地址

测试环境

使用

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

安装方法2：npm安装

安装完成后调用

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

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

这里是API

转载：在微信小程序中生成二维码相关推荐

最新文章

热门文章

转载：在微信小程序中 生成二维码

转载：

weapp-qrcode-canvas-2d

仓库地址

测试环境

使用

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

安装方法2：npm安装

安装完成后调用

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

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

这里是API

转载：在微信小程序中 生成二维码相关推荐

最新文章

热门文章

转载：在微信小程序中生成二维码

转载：在微信小程序中生成二维码相关推荐