目前小程序生态越来越丰富,微信给予了小程序一定的硬件通信能力这是之前 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], [....]]
打印接下来按照中间对齐进行打印。
当然除了对齐,我们还能对字体大小和粗细进行调整。
0 取消加粗
8 加粗
0 正常
16 倍高
32 倍宽
当然,我们其实不用太详细的去了解这些指令,推荐一个打印库,它类似翻译了这些指令,可以按照前端的方式进行打印。https://github.com/benioZhang/miniprogram-bluetoothprinter/tree/master/printer
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;
}
经常在测试的时候,发现第一次扫码连接正常,而第二次就死活都不进行设备扫描了。主要就是不再触发 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
}
});
原文:https://www.jackpu.com/wei-xin-xiao-cheng-xu-lian-jie-lan-ya-da-yin-ji-cai-keng-zhi-lu/
项目需要使用小程序的蓝牙功能与硬件设备进行连接相互传送数据指令 ,整个流程就这样,因为开启了onBLECharacteristicValueChange,所以你在写入数据(writeBLECharacteristicValue)的时候,设备应答的数据就被监测到了
运动中听着美美的音乐自然让人心旷神怡,腿也更有劲了!当然,既不想尴尬,又想有更好的运动时听歌体验,最佳方式莫过于戴上一款蓝牙运动耳机!
在现代生活方式中,蓝牙技术的应用已经非常普及,这是一种短距离通信开放标准,利用嵌入式芯片实现较短距离之间的无线连接,具有低成本、低功耗、模块体积小、易于集成等特点,非常适合在新型物联网移动设备中应用
微信小程序中很早就支持了蓝牙能力,看过不少的文档,知道大概的流程和能实现的效果,但是由于一直没有像样的实战项目导致也没有正经的开发上线过,本次缘于接到了一个外包项目
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!