小程序蓝牙通讯设备数据对接实战uniapp

最新推荐文章于 2026-05-29 15:17:24 发布

原创

最新推荐文章于 2026-05-29 15:17:24 发布 · 2.3k 阅读

最近很闲，但是行业很卷！因为公司有硬件设备对接，但是介于原生app。闲来无事，便研究了下这个小程序通过蓝牙与硬件设备进行通讯。废话少说上干货！

本次讲解的目录大致分为三模块。根据我写的代码做讲解。

初始化并搜索蓝牙
获取并启用service服务
数据读取初始化并监听设备返回的数据

html部分

js逻辑部分-分开讲解

页面进来是需要初始化的date中的数据，所以需要在onload中执行

onload中的初始化代码-就是设置列表高度、蓝牙列表的初始化

其中初始化最后面有一段代码注释也写得很明确了，第一种的过滤出你设置好的蓝牙，第二种反之。

在onHide事件就是--重置清空

接下来就是事件逻辑了！！！

我们这里罗列下uniapp官网提供的接下来需要用到的api

// 关闭蓝牙uni.closeBluetoothAdapter({})// 打开蓝牙uni.openBluetoothAdapter({})// 搜索附近的蓝牙uni.startBluetoothDevicesDiscovery({})// 停止搜索uni.stopBluetoothDevicesDiscovery({})// 连接低功耗BLE蓝牙uni.createBLEConnection({})// 获取蓝牙设备所有服务(service)uni.getBLEDeviceServices({})// 获取蓝牙特征值uni.getBLEDeviceCharacteristics({})// 启用低功耗蓝牙设备特征值变化时的 notify 功能，订阅特征值uni.notifyBLECharacteristicValueChange({})// 监听低功耗蓝牙设备的特征值变化事件uni.onBLECharacteristicValueChange({})// 读取低功耗蓝牙设备的特征值的二进制数据值uni.readBLECharacteristicValue({})

我是把各个事件归总到三个事件里面去执行了。没有分事件来讲解，见谅

首先，是搜索蓝牙：搜索蓝牙里面需用到的就是，关闭蓝牙-打开蓝牙-搜索蓝牙-停止搜索。

搜索成功后点击蓝牙列表进行连接

紧接着获取蓝牙设备所有服务(service)及相关的格式转换

启动所有服务(service)后，进行蓝牙读取的初始化并监听

附上代码，希望对大家有所帮助。全文干货满满，实战，文章附上实战视频。

<template>  <view class="device">    <scroll-view scroll-y :style="'width:500rpx;height:' + list_height + 'rpx'">      <block v-for="(item, index) in devicesList" :key="index">        <view class="list-item" :id="item.deviceId" @tap="Connect">          <view style="display: flex; flex-direction: column; width: 80%">            <text style="font-size: medium; word-break: break-all"              >设备名称: {
  
  { item.name }}</text            >            <text style="font-size: x-small; color: gray; word-break: break-all"              >设备ID: {
  
  { item.deviceId }}</text            >            <text style="font-size: x-small; color: gray; word-break: break-all"              >信号强度RSSI: {
  
  { item.RSSI }}</text            >          </view>          <image            style="width: 36px; height: 36px"            mode="aspectFit"            src="/static/images/bluetooth.png"          ></image>        </view>      </block>    </scroll-view>    <button      type="primary"      class="button"      :loading="searching"      @tap="Search"      style="margin-bottom: 10px"    >      {
  
  {