快来解锁小程序蓝牙开发技能

微信小程序中很早就支持了蓝牙能力，看过不少的文档，知道大概的流程和能实现的效果，但是由于一直没有像样的实战项目导致也没有正经的开发上线过，本次缘于接到了一个外包项目，那就顺道记录一下开发的过程及遇到的问题。,实际项目的效果很简单，两个页面，一个页面建立连接，一个页面展示数据，大概就是下图所示。
,老板说，这个简单版本就2个页面，1000块吧。,想了想，这貌似没啥问题，估计都不用一天就搞定了，暗喜ing。,但是实际的情况远远超出预算的开发时间。现在项目已经发布上线了，回顾算了一下断断续续的开发时间差不多要了2天时间，这样一算着实不开心了，不过也就当加深经验。以下记录实际遇到的问题，开发框架：uniapp，蓝牙的调用和微信小程序中基本一样。,建立连接基本是这个步骤：,具体实现的过程,初始化蓝牙，这里有一个注意点，建立连接后可能需要重新连接，所以初始化之前需要将现有的连接断开，可调用关闭蓝牙模块断开，否则无法搜索到要连接到设备。,开始搜寻附近设备并在搜索附近设备的回调中找到要连接的设备，搜索的回调中会包含蓝牙的名称和设备ID，可以通过名称识别要连接的蓝牙，设备ID用于连接蓝牙，这个方法比较耗费系统资源，连接成功需要主动调用关闭蓝牙搜索。,上面建立连接成功了，由于本次连接的是低功耗蓝牙，后续还需要监听数据回传和数据写入，最终需要调用
notifyBLECharacteristicValueChange启用蓝牙低功耗设备特征值变化时的 notify 功能，这个方法还需要两个参数，蓝牙特征的 UUID（characteristicId）和 蓝牙特征对应服务的 UUID（serviceId）。,获取蓝牙特征对应服务的 UUID（serviceId）：,基于获取到的 serviceId 继续获取 characteristicId，这里需要注意一下返回的characteristicId是在一个数组中的，里面有对应的读写功能的描述，后续根据读写实际情况使用不同的值，不确定的就找硬件开发确认一下。,最后就是开启消息监听，启用蓝牙低功耗设备特征值变化时的 notify 功能，订阅特征。另外，必须先启用 notifyBLECharacteristicValueChange 才能监听到设备 characteristicValueChange 事件。,监听消息变化，返回的res.value就是需要使用的值，但是这个值的格式是ArrayBuffer，需要进一步转化使用。,到这里我们就能获取到数据回传了，但是正常操作中还有数据的写入，通过写入不同的指令进行相关的功能操作或者获取不同的数据。这里同样的要注意一点就是写入的数据也是要ArrayBuffer格式的，在写入前要注意进行转换。,另外需要注意的是数据写入时的回传数据不会返回在当前方法的回调中，还是在上面的 onBLECharacteristicValueChange 特征值变化事件中，通过具体的回传字符进行区分当前的操作行为。,下面是一些踩坑的记录，如果没有这么多坑也不会浪费这么多的时间，如果你也是第一次接手这类的项目希望可以对你有所帮助。,前端与蓝牙协议的通信方式不再和平时与后端调用接口那样，在与硬件同事沟通的时间一定要沟通清楚。首先数据传递不是string或json之类，而是ArrayBuffer，然后就是对应传递的字符内容，本次通信的格式是16进制且长度为16位，但在JS中实际要发送一段长度为32的字符串并转换成ArrayBuffer才能使用。比如接口文档指令0x04，实例要发送的却是 A1A10400000000000000000000000000，针对这样的情况如有不确定的要和硬件同事积极沟通。
,文档中涉及一些数据使用的转换如下所表示：,举例：16进制字符
0x1234,按上面的转换则是
parseInt('12', 16) * 256 + parseInt('34', 16) 等于 4660，JS直接使用 parseInt 转换
parseInt('0x1234') 或者
parseInt('1234', 16)，以0x开头的字符，parseInt默认按16进制解析，最终的结果都是4660。,这里还涉及到一个高低位转换的问题，我这里遇到的是高位在前，低位在后，暂不需要额外处理，实际开发中是否需要进行转换要双方沟通好。,本次需要使用的数据如上面数据转换中所引用格式，实际一个完整的数据是由两个下标的值组成，再转换到16进制字符中就是4位字符。所以每次转换都是要4个字符一组，因涉及多个数据取值，且还有前后的无效数据需要进行排除。最终代码如下所示：,到此本文就结束了，记录了一下微信小程序蓝牙开发过程以及遇到的问题，希望对你有帮助。
看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～,专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）,下面是一些踩坑的记录，如果没有这么多坑也不会浪费这么多的时间，如果你也是第一次接手这类的项目希望可以对你有所帮助。,

微信小程序中很早就支持了蓝牙能力，看过不少的文档，知道大概的流程和能实现的效果，但是由于一直没有像样的实战项目导致也没有正经的开发上线过，本次缘于接到了一个外包项目，那就顺道记录一下开发的过程及遇到的问题。

实际项目的效果很简单，两个页面，一个页面建立连接，一个页面展示数据，大概就是下图所示。

老板说，这个简单版本就2个页面，1000块吧。

想了想，这貌似没啥问题，估计都不用一天就搞定了，暗喜ing。

但是实际的情况远远超出预算的开发时间。现在项目已经发布上线了，回顾算了一下断断续续的开发时间差不多要了2天时间，这样一算着实不开心了，不过也就当加深经验。以下记录实际遇到的问题，开发框架：uniapp，蓝牙的调用和微信小程序中基本一样。

建立连接

建立连接基本是这个步骤：

• 初始化蓝牙
• 开始搜寻附近设备
• 在搜寻附近设备回调中找到要连接的设备
• 连接设备
• 停止搜索附近设备

具体实现的过程

初始化蓝牙，这里有一个注意点，建立连接后可能需要重新连接，所以初始化之前需要将现有的连接断开，可调用关闭蓝牙模块断开，否则无法搜索到要连接到设备。

// 关闭蓝牙模块
uni.closeBluetoothAdapter({
  success(res) {
    // 初始化蓝牙
    uni.openBluetoothAdapter({
      success(res) {
        console.log('初始化蓝牙成功')
      },
      fail(err) {
        console.log('初始化蓝牙失败')
      }
    })
  }
})

开始搜寻附近设备并在搜索附近设备的回调中找到要连接的设备，搜索的回调中会包含蓝牙的名称和设备ID，可以通过名称识别要连接的蓝牙，设备ID用于连接蓝牙，这个方法比较耗费系统资源，连接成功需要主动调用关闭蓝牙搜索。

// 开始搜寻附近设备
uni.startBluetoothDevicesDiscovery({
  success() {
    // 开启监听回调
    uni.onBluetoothDeviceFound(found)
  }
})

function found(res) {
  if (res.devices[0] && res.devices[0].name.includes('XXX')) {
    // 连接设备
    uni.createBLEConnection({
      deviceId: res.devices[0].deviceId,
      success(res) {
        // 停止搜索
        uni.stopBluetoothDevicesDiscovery()
      }
    })
  }
}

监听消息

上面建立连接成功了，由于本次连接的是低功耗蓝牙，后续还需要监听数据回传和数据写入，最终需要调用notifyBLECharacteristicValueChange启用蓝牙低功耗设备特征值变化时的 notify 功能，这个方法还需要两个参数，蓝牙特征的 UUID（characteristicId）和 蓝牙特征对应服务的 UUID（serviceId）。

获取蓝牙特征对应服务的 UUID（serviceId）：

uni.getBLEDeviceServices({
  deviceId,
  success(res) {
    // serviceId
  },
})

基于获取到的 serviceId 继续获取 characteristicId，这里需要注意一下返回的characteristicId是在一个数组中的，里面有对应的读写功能的描述，后续根据读写实际情况使用不同的值，不确定的就找硬件开发确认一下。

uni.getBLEDeviceCharacteristics({
  deviceId,
  serviceId,
  success(res) {
    // characteristicId
  }
})

最后就是开启消息监听，启用蓝牙低功耗设备特征值变化时的 notify 功能，订阅特征。另外，必须先启用 notifyBLECharacteristicValueChange 才能监听到设备 characteristicValueChange 事件。

uni.notifyBLECharacteristicValueChange({
  state: true,
  deviceId, // 设备id
  serviceId, // 监听指定的服务
  characteristicId, // 监听对应的特征值
  success(res) {
    // 监听消息变化
  }
})

监听消息变化，返回的res.value就是需要使用的值，但是这个值的格式是ArrayBuffer，需要进一步转化使用。

uni.onBLECharacteristicValueChange(res => {
  ab2hex(res.value)
})

// ArrayBuffer转16进制字符串
ab2hex(buffer) {
  const hexArr = Array.prototype.map.call(
    new Uint8Array(buffer),
    function(bit) {
      return ('00' + bit.toString(16)).slice(-2)
    }
  )
  return hexArr.join('')
}

数据写入

到这里我们就能获取到数据回传了，但是正常操作中还有数据的写入，通过写入不同的指令进行相关的功能操作或者获取不同的数据。这里同样的要注意一点就是写入的数据也是要ArrayBuffer格式的，在写入前要注意进行转换。

const typedArray = new Uint8Array(hexStr.match(/[da-f]{2}/gi).map(function(h) {
  return parseInt(h, 16)
}))
const buf = typedArray.buffer

uni.writeBLECharacteristicValue({
  deviceId,
  serviceId,
  characteristicId,
  value: buf,
  success() {
    console.log('writeBLECharacteristicValue success')
  }
})

另外需要注意的是数据写入时的回传数据不会返回在当前方法的回调中，还是在上面的 onBLECharacteristicValueChange 特征值变化事件中，通过具体的回传字符进行区分当前的操作行为。

后记

下面是一些踩坑的记录，如果没有这么多坑也不会浪费这么多的时间，如果你也是第一次接手这类的项目希望可以对你有所帮助。

数据格式

前端与蓝牙协议的通信方式不再和平时与后端调用接口那样，在与硬件同事沟通的时间一定要沟通清楚。首先数据传递不是string或json之类，而是ArrayBuffer，然后就是对应传递的字符内容，本次通信的格式是16进制且长度为16位，但在JS中实际要发送一段长度为32的字符串并转换成ArrayBuffer才能使用。比如接口文档指令0x04，实例要发送的却是 A1A10400000000000000000000000000，针对这样的情况如有不确定的要和硬件同事积极沟通。

数据转换

文档中涉及一些数据使用的转换如下所表示：

数据 1 = data[9] * 256 + data[10] 刚开始不理解，以为是有什么特殊的逻辑，后面才知道就是16进制转换成10进制。但这在JS中有更简单的转换方式。注意：这里的所取的下标都是对应两个字符。

举例：16进制字符 0x1234

按上面的转换则是 parseInt('12', 16) * 256 + parseInt('34', 16) 等于 4660，JS直接使用 parseInt 转换 parseInt('0x1234') 或者 parseInt('1234', 16)，以0x开头的字符，parseInt默认按16进制解析，最终的结果都是4660。

这里还涉及到一个高低位转换的问题，我这里遇到的是高位在前，低位在后，暂不需要额外处理，实际开发中是否需要进行转换要双方沟通好。

数据使用

本次需要使用的数据如上面数据转换中所引用格式，实际一个完整的数据是由两个下标的值组成，再转换到16进制字符中就是4位字符。所以每次转换都是要4个字符一组，因涉及多个数据取值，且还有前后的无效数据需要进行排除。最终代码如下所示：

const oData = ab2hex(res.value).slice(2).replace(/(.{4})/g, '$1,').split(',')
for(var i = 3; i < oData.length; i++) {
  if(oData[i] != '0000' && oData[i]) {
    // 有效数据使用
  }
}

最后

到此本文就结束了，记录了一下微信小程序蓝牙开发过程以及遇到的问题，希望对你有帮助。看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）