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

更新日期: 2023-02-27阅读: 402标签: 小程序

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

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

老板说,这个简单版本就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)

来自:https://segmentfault.com/a/1190000043473991

链接: https://www.fly63.com/article/detial/12387

微信小程序开发中遇到的坑

开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。

微信小程序更新机制_微信小程序的2种更新方式

小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。

微信小程序报错Do not have xx handler in current page的解决方法总汇

最近在做小程序开发的时候,发现小程序老是报Do not have xxx handler in current page... 惊不惊喜,意不意外,这是什么原因引起的呢?下面就整排查错误的解决办法。

微信小程序-自动定位并将经纬度解析为具体地址

微信小程序-微信小程序可以通过API获取当前位置的经纬度,在微信小程序开发文档中可以找到这个API的使用示例,但是需要获取具体地址就需要使用到外部的API(此处用到的是腾讯的位置服务)

微信小程序框架推荐_分享好用的小程序前端开发框架

选择优秀的框架,能帮助我们节省开发时间,提高代码重用性,让开发变得更简单。下面就整理关于微信小程序的前端框架,推荐给大家。

微信小程序UI组件、实用库、开发工具、服务端、Demo整理分享

小程序开放至今,许多公司企业已经开发出了自己的小程序。这篇文章主要整理分享:微信小程序UI组件、开发框架、实用库、开发工具、服务端、Demo等

微信小程序实现右侧菜单的功能效果

这篇文章主要讲解微信小程序如何实现 侧边栏滑动 功能 ,首先实现的思路为:wxml页面结构分为2层:侧边栏菜单、正文部分;正文部分监听touchstart、touchmove、touchend触摸事件

微信小程序之程序、页面注册及生命周期

微信小程序生命周期函数:onLoad: 页面加载。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成,onHide: 页面隐藏,onUnload: 页面卸载。在小程序中所有页面的路由全部由框架进行管理

微信小程序_实现动画旋转的多种方式

三种办法实现小程序的动画效果: 每帧setData()、使用Animation实现旋转效果、使用keyfreams。在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多

微信小程序Socket的实现_基于socket-io

在小程序进行socket链接的时候发现:在1.7.0版本之前,一个微信小程序同时只能有一个 WebSocket 连接,而且在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!