微信小程序 - 生成二维码

前言：通过小程序端生成二维码也是很有必要的，可以为后台减压。

本文介绍三个插件，其中各有不同，各有优点。

1、可以生成带图标的二维码

图示：

下载：链接: https://pan.baidu.com/s/198L7DrILfc5M7nQ_il179g 提取码: peuw

示例：

// index.wxml
<canvas canvas-id="qrcode" style="height: 200px;width: 200px"></canvas>

// index.js
import drawQrcode from '../../utils/test/weapp.qrcode.esm.js'
Page({data: {},onLoad: function () {drawQrcode({width: 200, // 二维码宽度height: 200,  // 二维码高度canvasId: 'qrcode', // canvasidtext: 'https://www.baidu.com',  // 用于生成二维码的文本image: {imageResource: '/images/change.png',  // 二维码上的图标dx: 70, // 在二维码中位置x坐标dy: 70,  // 在二维码中位置y坐标dWidth: 60, // 宽度dHeight: 60 // 高度}})},
})

api参数：

参数	说明	示例
width	必须，二维码宽度，与`canvas`的`width`保持一致	200
height	必须，二维码高度，与`canvas`的`height`保持一致	200
canvasId	非必须，绘制的`canvasId`	'myQrcode'
ctx	非必须，绘图上下文，可通过 `wx.createCanvasContext('canvasId')` 获取，v1.0.0+版本支持	'wx.createCanvasContext('canvasId')'
text	必须，二维码内容	'http://www.baidu.com'
typeNumber	非必须，二维码的计算模式，默认值-1	8
correctLevel	非必须，二维码纠错级别，默认值为高级，取值：`{ L: 1, M: 0, Q: 3, H: 2 }`	1
background	非必须，二维码背景颜色，默认值白色	'#ffffff'
foreground	非必须，二维码前景色，默认值黑色	'#000000'
_this	非必须，若在组件中使用，需要传入，v0.7.0+版本支持	this
callback	非必须，绘制完成后的回调函数，v0.8.0+版本支持。安卓手机兼容性问题，可通过自行设置计时器来解决，更多可以参考 issue #18	function (e) { console.log('e', e) }
x	非必须，二维码绘制的 x 轴起始位置，默认值0，v1.0.0+版本支持	100
y	非必须，二维码绘制的 y 轴起始位置，默认值0，v1.0.0+版本支持	100
image	非必须，在 canvas 上绘制图片，层级高于二维码，v1.0.0+版本支持，更多可参考drawImage	{ imageResource: '', dx: 0, dy: 0, dWidth: 100, dHeight: 100 }

2、此插件base64码形式返回

返回的是base64码，不用依赖canvas

下载：链接: https://pan.baidu.com/s/11morheOk5kDsgOFtZr-48Q 提取码: xvf5

<image src="{{imgData }}"></image>

import qrCreate from '../../utils/weapp-qrcode-base64.js'; // 插件路径，以实际路径为准Page({data: {imgData: ''},onLoad: function () {// 返回的base64码var imgData = qrCreate.drawImg('这是二维码文本内容', {typeNumber: 4, // 取值范围：1-40，数字越大，码点越小，显得越密集errorCorrectLevel: 'M', // 纠错等级 H等级最高(30%) 简单来说，就是二维码被覆盖了多少仍然能被识别出来size: 500})this.setData({imgData})},
})

如果想将base64码转换为图片路径，可以使用以下方法

// base64转换成图片
function base64src(base64data, callback) {const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];let fsm = wx.getFileSystemManager();//文件管理器if (!format) {return (new Error('ERROR_BASE64SRC_PARSE'));}const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;const buffer = wx.base64ToArrayBuffer(bodyData);fsm.writeFile({filePath,data: buffer,encoding: 'binary',success() {callback(filePath);},fail() {return (new Error('ERROR_BASE64SRC_WRITE'));},});
};

3、可以生成条形码和二维码

图示：

下载：链接: https://pan.baidu.com/s/1hF3gIvWI8cYca2Bj935nBg 提取码: etst

<canvas canvas-id="qrcode" style="height: 200px;width: 200px"></canvas>
<canvas canvas-id="barcode" style="height: 200px;width: 200px"></canvas>

import wxbarcode from '../../utils/qrcode-barcode/index.js'Page({data: {},onLoad: function () {wxbarcode.barcode('barcode', 'http://www.baidu.com', 600, 150);wxbarcode.qrcode('qrcode', 'http://www.baidu.com', 375, 375);},
})

注：本人并非插件生产者，而是搬运工。本人立志做一名出色的搬运工！

微信小程序 - 生成二维码相关推荐

微信小程序分享二维码生成
生成微信小程序分享二维码微信小程序官方开放的二维码的接口,其中有一个是生成小程序二维码的,还有一个是圆形的小程序码,我这里就用php生成二维码. 完整代码: public function shar ...
微信小程序转二维码方法分享
微信小程序转二维码方法分享需要转码的可以看看这个东西是看个人需求的,618就要来了,各种活动也将来袭有些小伙伴不知道怎么生成为了方便小程序邀请活动没法外发,这里分享下将小程序转二维码的方法首 ...
【微信小程序】二维码跳转规则的前缀匹配是什么意思？
前言基础库 2.12.0 开发者工具 1.03.2008270 微信小程序的二维码跳转规则为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序 ...
微信小程序获取二维码中URL中带的参数
解析微信小程序获取二维码中的url参数 onLoad: function (options) { console.log(options) let qrUrl = decodeURIComponent ...
微信小程序普通二维码解析
1.区别于微信小程序官方二维码是直接从onLoad的 options 解构出来就行,它是一个对象,这个大家都知道. 2.普通二维码也是从onLoad的 options 里解构出来,此时options ...
微信小程序扫描二维码或者条码
程序是需要扫描条形码然后跳转到对应的产品信息页,其实微信小程序就有一个扫码识别的API,下面一起来看看: wx.scanCode(Object object) 调起客户端扫码界面进行扫码. 示例代码: ...
微信小程序获取二维码接口整理，.Net Core后台获取小程序二维码
2019独角兽企业重金招聘Python工程师标准>>> 一.关于二维码接口说明参考:https://my.oschina.net/tianma3798/blog/1811307 获 ...
C#生成微信小程序文章二维码
/// <summary>/// 获取access_token/// </summary>/// <returns></returns>[HttpGet ...
微信小程序获取二维码
原文链接:https://blog.csdn.net/w410589502/article/details/77702358/ 版权归原有博主,此处为了方便自己是查看,故copy一份,B接口调用,亲测 ...

微信小程序 - 生成二维码

1、可以生成带图标的二维码

2、此插件base64码形式返回

3、可以生成条形码和二维码

微信小程序 - 生成二维码相关推荐

最新文章

热门文章