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

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

由于这个项目我只负责二维码打印，所以前面的蓝牙连接，文字打印我就不多说了，我自己也不是很清楚。不过有一点我是要说下的，要注意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，大概就是这个意思吧。

具体是这样的：

1. 首先我们读取内容的APIwx.canvasGetImageData文档明确说明了，它的返回值是Uint8ClampedArray data，是图像像素点数据，一维数组，每四项表示一个像素点的 rgba；
2. 然后要做黑白化！！这个时候就可以做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]);
  }
}

3. 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] * 1
  data.push(temp);
}

4. 差不多要到最后了，数据要准备打印了，直接打印？
   那肯定不可以！首先我们的数据还没有转换成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，多说几个题外话，比如

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

**

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

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

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

1. toArrayBuffer ,是个组件，要安装的，https://www.npmjs.com/package/to-array-buffer 或者你用这种写法也可以const buffer = new Uint8Array(Buffer.from(cmds, 'gb2312')).buffer;
2. 注意查看自己的数据是否正确，画图的数据有问题的话，也可能打印出黑块；
3. 我之前画图那边没有贴出来，会在下面补上；
4. 各位大哥请看我这里一眼，数据要算！！！要算！！要算！！ ，比如我画图是160*160 ，然后我打印数据拼接的指令[29, 118, 48, 0, 20, 0, 160, 0]这个里面的20和160 这个就是算的，参考我给的链接(https://www.jianshu.com/p/dd6ca0054298)看下原因，大概就是1:8，然后画图和读图的数据一致，大家都懂的吧；
5. 打印数据！！！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);
  }
});