前言:由于扫码机具特殊要求(需要将后台返回的16进制数据,转换为字符串,并base64加密),格式有很多种需要确认所需格式(keng~)。
(例如支付宝公交乘车码)
附上weapp.qrcode.esm.js下载地址:
https://github.com/yingye/weapp-qrcode#readme
在utils文件夹下,新建base64encode.js与hexCharCodeToStr.js,还有绘制二维码的createQrCode.js文件。
//下面是64个基本的编码
var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
//编码的方法
function base64encode(str) {
var out, i, len;
var c1, c2, c3;
len = str.length;
i = 0;
out = "";
while (i < len) {
c1 = str.charCodeAt(i++) & 0xff;
if (i == len) {
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt((c1 & 0x3) << 4);
out += "==";
break;
}
c2 = str.charCodeAt(i++);
if (i == len) {
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
out += base64EncodeChars.charAt((c2 & 0xF) << 2);
out += "=";
break;
}
c3 = str.charCodeAt(i++);
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
out += base64EncodeChars.charAt(c3 & 0x3F);
}
return out;
}
exports.base64encode = base64encode;
// 16进制转字符串
function hexCharCodeToStr(hexCharCodeStr) {
var trimedStr = hexCharCodeStr.trim();
var rawStr =
trimedStr.substr(0, 2).toLowerCase() === "0x"
?
trimedStr.substr(2)
:
trimedStr;
var len = rawStr.length;
if (len % 2 !== 0) {
alert("Illegal Format ASCII Code!");
return "";
}
var curCharCode;
var resultStr = [];
for (var i = 0; i < len; i = i + 2) {
curCharCode = parseInt(rawStr.substr(i, 2), 16); // ASCII Code Value
resultStr.push(String.fromCharCode(curCharCode));
}
return resultStr.join("");
}
exports.hexCharCodeToStr = hexCharCodeToStr;
// 适配不同屏幕大小的canvas
function setCanvasSize() {
var size = {};
try {
var res = wx.getSystemInfoSync();
//不同屏幕下canvas的适配比例;设计稿是750宽
var scale = 1000 / 550;
var width = res.windowWidth / scale;
var height = width;//canvas画布为正方形
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("获取设备信息失败" + e);
}
return size;
}
// 生成二维码
function createQrCode(QR, url, canvasId) {
var size = setCanvasSize();
//调用插件中的draw方法,绘制二维码图片
QR.drawQrcode({
width: size.w,
height: size.h,
canvasId: canvasId,
// ctx: wx.createCanvasContext('myQrcode'),
text: url,
// v1.0.0+版本支持在二维码上绘制图片
image: {
// /images/xlsn0w.png
imageResource: '',
dx: (size.w - 40) / 2,
dy: (size.h - 40) / 2,
dWidth: 40,
dHeight: 40
}
});
}
module.exports = {
createQrCode: createQrCode
}
在页面引入并使用
// 绘制二维码
const QR = require('../../utils/weapp.qrcode.esm.js')
const createQrCode = require('../../utils/create.qrcode.js')
// 文件引用
var base64encode = require('../../utils/base64encode.js');
const { hexCharCodeToStr } = require("../../utils/hexCharCodeToStr.js");
wxml: canvas需写宽高,并保证一致性
<canvas class="canvas-code" canvas-id="myQrcode"/>
// 二维码实例:参数一引入js,参数二:二维码数据,参数三:画布id
createQrCode.createQrCode(QR, this.qrCode,'myQrcode')
base64encode.base64encode(hexCharCodeToStr('所需处理的二维码信息'))
.canvas-code {
width: 510rpx;
height: 470rpx;
margin: 0 auto;
margin-left: 135rpx;
margin-top: 10px;
}