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

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

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

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

老板说,这个简单版本就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]) {
    // 有效数据使用
  }

最后

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



目录
相关文章
ly~
|
8天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
42 6
|
8天前
|
JSON 小程序 前端开发
创建一个属于自己的小程序(注册开发账号)
介绍如何创建微信小程序账号,包括注册流程、下载安装微信开发者工具、创建项目以及项目结构介绍。
创建一个属于自己的小程序(注册开发账号)
ly~
|
8天前
|
开发框架 小程序 前端开发
抖音小程序的开发难度大吗?
抖音小程序的开发难度因人而异,主要取决于开发者经验、技能及功能需求。技术上需掌握前端技术及抖音开发框架,了解平台生态与规则;设计上需符合用户审美和习惯,具备创新性和实用性。此外,严格的审核标准和激烈的市场竞争增加了开发难度,开发者需制定有效推广策略并持续优化小程序以保持竞争力。
ly~
41 4
|
8天前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
28天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
57 3
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
2月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
本文介绍如何在Taro项目中使用Nut UI的`&lt;nut-uploader/&gt;`组件实现图片上传功能,并通过示例代码展示了自定义上传逻辑的方法。
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
|
17天前
|
小程序 前端开发 JavaScript
Java开发工程师转小程序开发的前景如何?
Java开发工程师转小程序开发的前景如何?
27 0
|
27天前
|
小程序 前端开发 JavaScript
开发支付宝小程序的思路
【9月更文挑战第7天】本文介绍了一种在支付宝小程序中实现网页抓取的方法,通过云函数或自建后端服务来解析外部网页的标题、描述和图片。具体步骤包括:用户输入链接,小程序调用云函数抓取并解析网页内容,最后将结果返回并在前端展示。文中详细介绍了使用 Node.js 的云函数实现过程,包括代码示例和小程序前端页面的实现方法。通过这种方式,可以显著提升链接分享的用户体验。
32 0
下一篇
无影云桌面