微信小程序连接蓝牙打印机采坑之旅

目前小程序生态越来越丰富，微信给予了小程序一定的硬件通信能力这是之前 Web 很少尝试的事情。

关于蓝牙，常见的就下面几个 API：

startBluetoothDevicesDiscovery 开始搜寻附近的蓝牙外围设备
openBluetoothAdapter 初始化蓝牙模块
wx.onBluetoothDeviceFound 监听寻找到新设备的事件
wx.writeBLECharacteristicValue 向低功耗蓝牙设备特征值中写入二进制数据
wx.onBLEConnectionStateChange 监听低功耗蓝牙连接状态的改变事件
wx.createBLEConnection 连接低功耗蓝牙设备

不过实际我们在实现过程中，我们可能还会遇到一些本身 API 在不同平台上 BUG。

中文乱码

打印的时候，第一个发现的问题便是打印机无法正常打印中文字符串。在向蓝牙写数据的时候，我们实际上市向蓝牙发送的 buffer ，因此我们需要将对应的字符串转换成设备可支持的中文转码，比如 GBK GB2312，网上有一些现成的库，安利一个简单的 github

https://github.com/inexorabletash/text-encoding

这样的话，我们只需要进行引用，然后

// text-encoding 为引用的代码目录
import { TextEncoder } from '../text-encoding';
this._encoder = new TextEncoder("gb2312", {NONSTANDARD_allowLegacyEncoding: true});

// content 需要打印的字符串
const uint8Array = this._encoder.encode(content);

由于小程序包大小的限制，可以手动将 encoding-indexs.js 转换成 JSON 放到远程，然后动态 request 下来。

设置格式

我们在打印的时候，往往不是简单的一串串字符串，而是需要进行大小，对齐方式的跳转。打印机是能够接受 ESC/POS

其中有一些我么需要用到的指令。

ASCII码  ESC  a   n
十进制码  27   97  n

其中 n 的值表示不同的对齐方式:

0 左对齐
1 中间对齐
2 由对齐

我们则在发给打印机的 buffer 数据里需要包含对应的命令

[[27, 97,1], [....]]

打印接下来按照中间对齐进行打印。

当然除了对齐，我们还能对字体大小和粗细进行调整。

字体加粗

ASCII码  ESC   ！ n
十进制码  27   33  n

0 取消加粗
8 加粗

const printerJobs = new PrinterJobs();
    printerJobs.print('')
      .setAlign('ct') // 设置居中对齐
      .setSize(2, 2) // 设置字体大小
      .print(name)
    await printerJobs.printQRCode(qrcode);
    printerJobs.setSize(1, 1)
      .print(printerUtil.inline('地址:', address)) // 两边对齐
      .print('')
      .print(printerUtil.fillLine()) // 打印虚线
      .println();
    const buffer = printerJobs.buffer();

打印二维码

当然现在小票上都有二维码，因此在打印二维码的时候，我们需要关注大小和 canvas 的换算。

其实打印二维码的流程主要是小面这几部

getImageInfo(微信获取二维码图像信息) -> createCanvasContext(微信创建 Canvas 上下文)  -> drawImage (在 canvas 上绘制二维码) -> canvasGetImageData （获取 canvas 上的像素数据） -> 灰度运算 / 像素转换成点 -> toBuffer(转换成 Buffer 数据发送给蓝牙)

我们在上面 printerjobs.js 扩展就是类似下面

const _drawQRCode = async (path, width, height, callback) => {
 // 'canvas' mean the canvas id in your view
  const ctx = wx.createCanvasContext('canvas');
  // const ctx = offscreenCanvas.getContext('2d');
  ctx.drawImage(path, 0, 0, width, height, 0, 0, 256, 256);
  ctx.draw(false, () => {
    wx.canvasGetImageData({
      canvasId: 'canvas',
      x: 0,
      y: 0,
      width: 256,
      height: 256,
      success: (res) => {
        let arr = util.convert4to1(res.data);
        let data = util.convert8to1(arr);
        const cmds = [].concat([27, 97, 1], [29, 118, 48, 0, 32, 0, 0, 1], data, [27, 74, 3], [27, 64]);
        const buffer = Buffer.from(cmds, 'gb2312');
        callback(buffer);
      },
      fail: function(error) {
        console.log("error:", error);
      },
      complete: () => {
        // console.log('finished');
      }
    })
  });
}

printerJobs.prototype.printQRCode = async function (qrcode) {
  return new Promise((resolve, reject) => {
    wx.getImageInfo({
      src: qrcode,
      success: (result) => {
        setTimeout(() => {
          const path = result.path;
          _drawQRCode(path, result.width, result.height, (cmds) => {
            // const uint8Array = new Uint8Array(cmds);
            this._enqueue(cmds);
            this._enqueue(commands.LF);
            resolve();
          });
        }, 200);
      },
      fail: () => {
        reject('cannot draw image');
      }
    })
  })
};

其中大家需要理解

[27, 97, 1], [29, 118, 48, 0, 32, 0, 0, 1], data, [27, 74, 3], [27, 64]

这其中 [27, 97, 1] 我们上面已经知道，这其实表示对齐方式，为居中对齐。

[29, 118, 48, 0, 32, 0, 0, 1] 则是表示打印光栅位图。

 ASCII码    GS  v   0    m  xL  xH  yL  yH  d1...dk
 十进制码    29  118  48  m  xL  xH  yL  yH  d1...dk

其中 m 表示设置是否放大打印图像，详见 https://www.jianshu.com/p/dd6ca0054298

xl XH yL yH 需要我们自己进行计算

比如你的canvas打印的大小为 120 x 120

xl = 120 / 8 % 256
xH = 120 / 8 / 256 // 取整
yl = 120 % 256;
yH = 120 / 256 // 取整

所以你的指令就是 [29, 118, 48, 0, 15, 120, 0, 1]。

如果这个错误，一般打印出来也是乱码。

convert4to1 和 convert8to1 比较常规的实现：

function convert4to1(res) {
  let arr=[];
  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]);
    }
  }
  return arr;
}

function convert8to1(arr) {
  let data = [];
  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);
  }
  return data;
}

Android 蓝牙连接找不到设备

经常在测试的时候，发现第一次扫码连接正常，而第二次就死活都不进行设备扫描了。主要就是不再触发 onBluetoothDeviceFound 。原因是 Android 我们之前已经建立连接了，但是我们经常重新扫描的时候，并没有断开。因此建议我们手动关闭连接然后再重新打开连接。

wx.closeBluetoothAdapter();
wx.openBluetoothAdapter();

处理蓝牙断开

这是两方面的问题，一个蓝牙未打开，而是设备工作中突然断掉（停电或者手误关闭等）

微信有两个 API 可以帮助你解决这个问题:

// 处理手机蓝牙打开和关闭
wx.onBluetoothAdapterStateChange(function (res) {
            console.log('onBluetoothAdapterStateChange', res);
  if (res.available) {
     // @TODO
  }
});

// 处理设备突然断掉
wx.onBLEConnectionStateChange((res) => {
     if (!res.connected && this.data.connected) {
      @TODO
     }
    });