微信小程序之扫码乘车后续

阅读: 评论:0

微信小程序之扫码乘车后续

微信小程序之扫码乘车后续

前言:由于扫码机具特殊要求(需要将后台返回的16进制数据,转换为字符串,并base64加密),格式有很多种需要确认所需格式(keng~)。
(例如支付宝公交乘车码)

附上weapp.qrcode.esm.js下载地址:

在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 = im();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 ValueresultStr.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 errorconsole.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.pngimageResource: '',dx: (size.w - 40) / 2,dy: (size.h - 40) / 2,dWidth: 40,dHeight: 40}});
}
ports = {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
ateQrCode(QR, this.qrCode,'myQrcode')
base64encode.base64encode(hexCharCodeToStr('所需处理的二维码信息')).canvas-code {width: 510rpx;height: 470rpx;margin: 0 auto;margin-left: 135rpx;margin-top: 10px;
}

本文发布于:2024-01-28 08:59:10,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/17064035556279.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:程序   微信小
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23