微信小程序蓝牙打印二维码

会有很多算是废话的内容，但是都是我踩的坑，顺便记录下。（不一定适用所有的打印机，）

由于这个项目我只负责二维码打印，所以前面的蓝牙连接，文字打印我就不多说了，我自己也不是很清楚。不过有一点我是要说下的，要注意ios和安卓的不同，安卓一次只能写入不超过20字节（ios具体不清楚，当时代码交到我手上是说只有二维码没写，后面才发现我的手机文字内容无法全部打印），建议是直接截取数据data.slice(20, byteLength)，打印成功再次回调。

我的项目需求是根据订单号生成二维码，然后二维码可以打印出来，生成二维码的话，建议使用weapp.qrcode.js (https://github.com/yingye/weapp-qrcode), 需要注意的是可能会有一个问题，text的值如果是变量的话，可能会打印出来空的二维码，我的问题是没有强制转成string，改成 text: String(orderNo),就可以了。

好了，现在我们开始进入正题，首先来说下思路：

首先我们需要读取二维码内容，然后把内容转成打印机认可的格式也就是ArrayBuffer，然后打印就好啦。

好了，问题来了，读什么内容，怎么转换？（API自行去官方文档查看）
最开始我和我老大是不同的想法，我觉得我可以canvas画图生成二维码之后，将图片用wx.canvasToTempFilePath把内容导出生成指定大小的图片，然后保存图片wx.saveFile，然后读取文件内容wx.getFileSystemManager().readFile({}),正好返回的格式是ArrayBuffer，这不就出来了嘛，然而事实证明，我老大永远是我老大，我打印出来的是乱码。

圈重点啦！

老大和我说的是，我们需要读取得数据是像素点的 rgba，事实证明是的，我们要用的就是这个内容！用wx.canvasGetImageData

接下来，我们改如何转换呢？
嗯，接下来就是除了老大说，还有个参考网址，不过不是js代码的哦~(https://www.jianshu.com/p/dd6ca0054298)

老大看着那个网址，原话不好说，大概就是，数据要4合1，然后8合1，大概就是这个意思吧。

具体是这样的：

首先我们读取内容的APIwx.canvasGetImageData文档明确说明了，它的返回值是Uint8ClampedArray data，是图像像素点数据，一维数组，每四项表示一个像素点的 rgba；
然后要做黑白化！！这个时候就可以做4合1的内容了！我本来想着二维码不是黑就是白，肯定不是255就是0，其实还是会有一小部分是其他数值的，这个要注意哦！公式我用的另一个网址的公式，但是差不多，另外我投机取巧了一下，每4位是一个像素点的rgba，然后黑白色的rgb就是(0,0,0)和(255,255,255)，所以我每四位只把第一位黑白化，然后将每四位的第一位取出来作为新的数组，当rule>200的时候，值取0，表示不打印，否则取1，表示打印；

for (let i = 0; i < res.length; i++) {if (i % 4 == 0) {let rule = 0.29900 * res[i] + 0.58700 * res[i + 1] + 0.11400 * res[i + 2];if (rule > 200) {res[i] = 0;} else {res[i] = 1;}arr.push(res[i]);}
}

4合1已经好了，接下来开始8合1，每8个像素点组成一个字节；下面的代码可能会有人不理解，举个例子：

假如我们取出来的8位数是[0,0,0,0,0,0,0,1]，这个时候8合1，我们需要进行进制转换，从右往左是2的零次方，2的一次方，等等，依次上加，实际是 0 * 2⁷ + 0 * 2⁶ + 0 * 2⁵ + 0 * 2⁴ + 0 * 2³ + 0 * 2² + 0 * 2¹ + 1 * 2⁰,这个数就是我们要的最终数据的其中之一。

for (let k = 0; k < arr.length; k += 8) {let temp = arr[k] * 128 + arr[k + 1] * 64 + arr[k + 2] * 32 + arr[k + 3] * 16 + arr[k + 4] * 8 + arr[k + 5] * 4 + arr[k + 6] * 2 + arr[k + 7] * 1data.push(temp);
}

差不多要到最后了，数据要准备打印了，直接打印？
那肯定不可以！首先我们的数据还没有转换成ArrayBuffer，其次打印必须要有指令！参考网址以及标准的ESC-POS指令集，下面代码中的数字都是指令，另外，由于我这边的打印机支持的是gb2312格式，所以我在转成ArrayBuffer的同时，我还需要把编码格式转成正确的格式。

toArrayBuffer()这个参考buffer，可以在小程序里npm，然后构建npm就好了，网址是：(https://www.npmjs.com/package/buffer)，以及文档：(https://nodejs.org/api/buffer.html)

const cmds = [].concat([27, 97, 49], [29, 118, 48, 0, 20, 0, 160, 0], data, [27, 74, 3], [27, 64]);
const buffer = toArrayBuffer(Buffer.from(cmds, 'gb2312'));

好了，差不多就是这样了，整个流程！接下来直接调用wx.writeBLECharacteristicValue就好了。

emmm，多说几个题外话，比如

我需要把二维码和文字内容合在一起,文字部分，
let text = new encoding.TextEncoder("gb2312", { NONSTANDARD_allowLegacyEncoding: true }).encode(str).buffer;，
这就已经转成ArrayBuffer了，但是两个ArrayBuffer是不可用concat()方法拼接的，所以我可以少一点，
let text = new encoding.TextEncoder("gb2312", { NONSTANDARD_allowLegacyEncoding: true }).encode(str);，
少个".buffer"，这个时候的结果是Unit8Array，也和cmds不一样，所以再转一次，
let newText = Array.from(text)
好了现在cmds和newText都是普通的array了，concat()方法拼接好之后统一做一个
toArrayBuffer(Buffer.from(finalArray, 'gb2312'));

最开始的时候，有个错误的想法，因为当初试验40 * 40的二维码是可以打印成功的，但是160 * 160就只能打印一部分，就在怀疑是不是因为data太大，所以才会不能打印完全二维码?
我尝试了切割数据，进行处理，以小数组循环的方式进行打印，结果是乱码。所以不要随便切整合好的数组数据data，后来发现其实是其他问题，注意[29, 118, 48, 0, 20, 0, 160, 0]里的20和160 ！！这个要根据网址好好研究！

后补：重点来了，新坑！！

当你二维码画出来之后，千万不要真机调试，预览成功后，直接去体验版测试！！捣鼓了半天，发现不是代码问题也是心累了。

**
根据各位兄弟问问的问题，我补点遗漏点吧

toArrayBuffer ,是个组件，要安装的，https://www.npmjs.com/package/to-array-buffer 或者你用这种写法也可以const buffer = new Uint8Array(Buffer.from(cmds, 'gb2312')).buffer;

注意查看自己的数据是否正确，画图的数据有问题的话，也可能打印出黑块；

我之前画图那边没有贴出来，会在下面补上；

各位大哥请看我这里一眼，数据要算！！！要算！！要算！！ ，比如我画图是160*160 ，然后我打印数据拼接的指令[29, 118, 48, 0, 20, 0, 160, 0]这个里面的20和160 这个就是算的，参考我给的链接(https://www.jianshu.com/p/dd6ca0054298)看下原因，大概就是1:8，然后画图和读图的数据一致，大家都懂的吧；

打印数据！！！20字节一次！！wx.writeBLECharacteristicValue() 这个里面的value, 我是这样写的value: buffer.slice(0, 20),

画图的

const ctx = wx.createCanvasContext('canvas');
ctx.clearRect(0, 0, 160, 160);
qrcode = drawQrcode({canvasId: 'canvas',text: String('test'),width: 160,height: 160,callback(e) {setTimeout(() => {// 获取图片数据wx.canvasGetImageData({canvasId: 'canvas',x: 0,y: 0,width: 160,height: 160,success(res) {}})}, 1000);}
});

微信小程序蓝牙打印二维码相关推荐

微信小程序条码、二维码生成模块
代码地址如下: http://www.demodashi.com/demo/13994.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
基于JavaSSM和微信小程序的智能二维码门禁管理系统
目录 1 引言 2 2 系统需求分析 2 2.1开发环境 2 2.2关键技术 2 2.2.1 Spring 框架 2 2.2.2 Spring MVC 框架 3 2.2.3 Mybatis 3 2.2 ...
微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中实现 ...
微信小程序获取扫描二维码后携带的参数
微信小程序获取扫描二维码后携带的参数 1.decodeURIComponent解析生成二维码的链接. /*** 生命周期函数--监听页面加载*/onLoad: function(options) {i ...
转载：在微信小程序中生成二维码
目录转载: weapp-qrcode-canvas-2d 仓库地址测试环境使用安装方法1:直接引入 js 文件安装方法2:npm安装安装完成后调用例子1:没有使用叠加图片例子2:使用叠 ...
微信小程序扫普通二维码跳转
最近一需求,是要做小程序扫普通二维码跳转.看了看微信文档一头雾水,写的不是很清楚. 官方文档传送门:https://developers.weixin.qq.com/miniprogram/intro ...
微信小程序之生成二维码
首先先扯一些题外话,本人是java行业的小白,因为是改行做的java,之前的工作就不提了. 之前写过几篇随便,刚看了下,觉得比较low,就都删了,所以也算是进入java行业的第一篇随笔,如果有表述上或 ...
【微信小程序】生成二维码方式
前言基础库 2.12.0 开发者工具 1.03.2008270 生成二维码方式微信小程序的二维码可分为: 微信生成的二维码普通链接二维码微信生成的二维码,是指调用微信小程序服务端接口 wxac ...
uni-app微信小程序扫普通二维码分享小程序
这里需要扫普通二维码分享的话就需要先产生二维码了文档:https://github.com/yingye/weapp-qrcode 1.绘制二维码我这里使用的是资源是weapp.qrcode.es ...

微信小程序蓝牙打印二维码

后补：重点来了，新坑！！

微信小程序蓝牙打印二维码相关推荐

最新文章

热门文章