微信小程序——weapp-qrcode.js生成二维码、海报二维码、核销码

各位小伙伴们,不知道你们在开发的时候有没有遇到小程序生成二维码,生成海报时候带上二维码、核销码等等。
那么,小程序端该如何生成二维码图片呢?
效果如下:
在这里插入图片描述

weapp-qrcode.js

小伙伴们可以来我的gitee下载:XujiRe/weapp-qrcode
XujiRe / weapp-qrcode.js
下载完了接下来我们该如何使用呢?

使用技巧

将weapp-qrcode.js放在小程序的utils文件夹中
在这里插入图片描述
代码编写:

wxml

<!--显示图片用的标签-->
<image class="container-4-item-v-ewm" src="{{ewmImg}}"></image>
<!--创建一个画布,将它移出屏幕外看不到的地方-->
<canvas class="canvas-code" canvas-id="myQrcode" style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;"/>

js

import QRCode from '../../../utils/weapp-qrcode.js';


onload(){
	new QRCode('myQrcode',{
		text: 这里就是放你要扫描出来的内容了,   
		width: 141,	//canvas 画布的宽
		height: 141,	//canvas 画布的高
		padding: 0, // 生成二维码四周自动留边宽度,不传入默认为0
		correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
		callback: (res) => {
			//工具回调数据
			// 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去,看各自需求
			wx.hideLoading()
			console.log("生成二维码",res)
			//将图片路劲放入data中,显示在wxml的image标签上
			that.setData({
				ewmImg:res.path,
				showEwmIndex:e.currentTarget.dataset.index
			})
		
		}
	})
}

这个就是回调返回的数据
在这里插入图片描述
好了,这是小编的一些开发思路,如果各位大佬有更好的方法,麻烦在下方评论或者私聊小编哦~
让小编一起学习。

/** * weapp.qrcode.js v1.0.0 (https://github.com/yingye/weapp-qrcode#readme) */ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.drawQrcode = factory()); }(this, (function () { 'use strict'; var hasOwn = Object.prototype.hasOwnProperty; var toStr = Object.prototype.toString; var defineProperty = Object.defineProperty; var gOPD = Object.getOwnPropertyDescriptor; var isArray = function isArray(arr) { if (typeof Array.isArray === 'function') { return Array.isArray(arr); } return toStr.call(arr) === '[object Array]'; }; var isPlainObject = function isPlainObject(obj) { if (!obj || toStr.call(obj) !== '[object Object]') { return false; } var hasOwnConstructor = hasOwn.call(obj, 'constructor'); var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call(obj.constructor.prototype, 'isPrototypeOf'); // Not own constructor property must be Object if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) { return false; } // Own properties are enumerated firstly, so to speed up, // if last one is own, then all properties are own. var key; for (key in obj) { /**/ } return typeof key === 'undefined' || hasOwn.call(obj, key); }; // If name is '__proto__', and Object.defineProperty is available, define __proto__ as an own property on target var setProperty = function setProperty(target, options) { if (defineProperty && options.name === '__proto__') { defineProperty(target, options.name, { enumerable: true, configurable: true, value: options.newValue, writable: true }); } else { target[options.name] = options.newValue; } }; // Return undefined instead of __proto__ if '__proto__' is not an own property var getProperty = function getProperty(obj, name) { if (name === '__proto__') { if (!hasOwn.call(obj, name)) { return void 0; } else if (gOPD) {
评论 29
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值