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

前言:由于扫码机具特殊要求(需要将后台返回的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;
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 微信小程序是微信官方提供的一种可以在微信内运行的应用程序平台。Onenet是中国移动推出的物联网云平台,它提供了一系列的服务,包括设备管理、数据存储、数据分析等功能。 在微信小程序中,集成了Onenet的码支付功能,用户可以通过微信小程序中的二维码描功能,直接描Onenet提供的支付二维码来进行支付。具体的流程如下: 1. 用户打开微信小程序,在小程序中找到需要进行支付的功能入口。 2. 小程序调用相机权限,启动二维码描功能。 3. 用户将手机相机对准Onenet提供的支付二维码,等待相机描成功。 4. 描成功后,微信小程序会解析二维码的内容,包括支付金额、商户信息等。 5. 微信小程序将解析出的支付信息发送到Onenet支付接口进行验证。 6. Onenet验证支付信息,并返回支付结果给微信小程序。 7. 微信小程序根据支付结果进行相应的处理,如提示支付成功或失败。 8. 用户在微信小程序中可以查看支付记录,以及需要等待商户发货或服务。 使用微信小程序进行Onenet码支付的好处是,用户无需离开微信,即可完成支付。同时,由于在微信环境下进行支付,用户的支付信息会得到更好的保护和安全性。 总之,微信小程序 Onenet 码支付为用户提供了一种便捷、安全的支付方式,提升了用户在小程序中的使用体验。 ### 回答2: 微信小程序 onenet 码支付是指在微信小程序中集成了onenet支付功能,用户可以通过描二维码进行支付操作。首先,用户需要打开微信小程序,并进入相应的页面。在页面中,用户可以看到一个二维码,可以使用微信的功能进行描。描后,小程序会跳转到相应的支付页面,用户可以选择使用微信支付进行支付。在支付页面中,用户可以输入支付金额和其他支付信息,然后确认支付操作。一旦支付成功,小程序会显示支付成功的提示,并返回到原来的页面。如果支付失败,小程序会给出相应的失败提示,并提供重新支付的选项。微信小程序 onenet 码支付的好处是,用户可以在微信小程序中完成支付操作,无需再跳转到其他页面或应用。同时,微信支付的安全性和便捷性也能够保证用户的支付体验。所以,微信小程序 onenet 码支付成为了许多商家和用户选择的支付方式之一。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值