当前位置： 首页 > news >正文

Vue3 + UniApp 蓝牙连接与数据发送(稳定版)

news 2025/7/14 16:11:39

      本教程适用于使用 uni-app + Vue3 (script setup) 开发的跨平台 App（支持微信小程序、H5、Android/iOS 等）

🎯 功能目标

  • ✅ 获取蓝牙权限
  • ✅ 扫描周围蓝牙设备
  • ✅ 连接指定蓝牙设备
  • ✅ 获取服务和特征值
  • ✅ 向设备发送数据包（ArrayBuffer）
  • ✅ 页面 UI 展示设备列表 + 操作按钮

项目结构概览

/pages/bluetooth/
├── index.vue         # 主页面（本教程重点）
└── utils/Common.ts   # 公共方法（获取系统信息等）

 其中的公共方法代码：

export async function getSystemInfo() {return await uni.getSystemInfo();
}

第一步：申请蓝牙权限并初始化蓝牙适配器

在 onShow() 生命周期中检查并申请蓝牙权限：

import { onShow } from "@dcloudio/uni-app";
import { ref } from "vue";let btOpenStatus = ref<boolean>(false);
let devicesList = ref<UniApp.BluetoothDeviceInfo[]>([]);onShow(() => {uni.authorize({scope: 'scope.bluetooth',success() {console.log('蓝牙权限已授权');initBluetooth();},fail() {showToast('请开启蓝牙权限!');}});
});

初始化蓝牙模块

function initBluetooth() {uni.onBluetoothAdapterStateChange(function (res) {btOpenStatus.value = res.available;if (res.available) startBluetoothScan(); // 蓝牙打开后开始扫描});uni.openBluetoothAdapter({success: () => {startBluetoothScan();},fail: (err) => {if (err.errCode == 10001) {btOpenStatus.value = false;showToast('蓝牙未打开!');}}});
}

🔍 第二步：扫描蓝牙设备

function startBluetoothScan() {uni.startBluetoothDevicesDiscovery({success: (res) => {console.log("开始扫描蓝牙设备...", res);},fail: (err) => {console.error("启动扫描失败", err);showToast("启动蓝牙扫描失败");}});uni.onBluetoothDeviceFound((res) => {res.devices.forEach((device) => {const exists = devicesList.value.some(d => d.deviceId === device.deviceId);if (!exists) devicesList.value.push(device);});});
}

🔗 第三步：连接蓝牙设备

const connectedDevice = ref({serviceOrFeature: [] as Array<{ service: any, characteristics?: any }>,devicesInfo: {} as UniApp.BluetoothDeviceInfo
});async function createBLEConnection(device: UniApp.BluetoothDeviceInfo) {uni.showToast({duration: 30000,icon: "loading",title: '蓝牙正在连接中!'});uni.createBLEConnection({deviceId: device.deviceId,success(connectionRes) {if (connectionRes.errCode === 0) {showToast('蓝牙连接成功');connectedDevice.value.devicesInfo = device;getBLEDeviceServices(device.deviceId).then(res => {if (res.code === 200) console.log('蓝牙服务初始化完成');});}},fail(connectionRes) {if (connectionRes.errCode === 10000) {showToast('请检查蓝牙是否开启!');} else if (connectionRes.errCode === 10010 || connectionRes.errCode === -1) {console.log('已经连接');}},complete() {uni.hideToast();}});
}

⚙️ 第四步：获取服务与特征值

function getBLEDeviceServices(deviceId: string): Promise<{ code: number }> {return new Promise(ok => {uni.getBLEDeviceServices({deviceId,success: (res) => {res.services.forEach(async (item) => {let characteristicsRes = await getBLEDeviceCharacteristics(deviceId, item.uuid);if (characteristicsRes.code === 200) {connectedDevice.value.serviceOrFeature.push({service: item,characteristics: characteristicsRes.data});ok({ code: 200 });}});},fail: (err) => {ok({ code: 201 });}});});
}function getBLEDeviceCharacteristics(deviceId: string, serviceId: string): Promise<{ code: number, data?: any }> {return new Promise(ok => {uni.getBLEDeviceCharacteristics({deviceId,serviceId,success: (res) => {ok({ code: 200, data: res.characteristics });},fail: () => {ok({ code: 201 });}});});
}

💬 第五步：向蓝牙设备发送数据

function getBluetoothServiceFeature(propertyName: string): { serviceUUID: string, feature: any } {let result = { serviceUUID: '', feature: {} };connectedDevice.value.serviceOrFeature.forEach(item => {let found = item.characteristics.find(f => f.properties[propertyName]);if (found) {result.serviceUUID = item.service.uuid;result.feature = found;}});return result;
}function sendMsg(msg: any, isBuffer?: boolean) {let writeFeature = getBluetoothServiceFeature('write');if (!writeFeature) {console.log('蓝牙没有对应的写服务权限!');return;}uni.writeBLECharacteristicValue({deviceId: connectedDevice.value.devicesInfo.deviceId,serviceId: writeFeature.serviceUUID,characteristicId: writeFeature.feature.uuid,value: isBuffer ? msg : stringToArrayBuffer(msg),success(res) {console.log('消息发送成功', res);},fail(res) {console.log('消息发送失败', res);}});
}function stringToArrayBuffer(str: string): ArrayBuffer {const buffer = new ArrayBuffer(str.length);const view = new Uint8Array(buffer);for (let i = 0; i < str.length; i++) {view[i] = str.charCodeAt(i);}return buffer;
}

完整代码

<template><template><scroll-view scroll-y style="height: 100vh;background: #f9f9f9;" class="device-list"><!-- 设备列表 --><view v-for="device in devicesList" :key="device.deviceId" class="device-card"><!-- 设备信息 --><view class="device-info"><text class="name">{{ device.name || '未知设备' }}</text><text class="id">ID: {{ device.deviceId }}</text></view><!-- 操作按钮 --><view class="actions"><text class="btn connect" @click.stop="createBLEConnection(device)">连接</text><text class="btn send" @click.stop="sendMsg('测试发送信息')">发送信息</text></view></view><!-- 空状态提示 --><view v-if="devicesList.length === 0" class="empty-state">正在搜索附近的蓝牙设备...</view></scroll-view></template>
</template><script setup lang="ts">import { onShow } from "@dcloudio/uni-app";import { ref , watch } from "vue";import { getSystemInfo } from "@/utils/Common";let systemInfo = ref();	let btOpenStatus = ref<boolean>();let devicesList = ref<UniApp.BluetoothDeviceInfo[]>([]); // 用于存储搜索到的设备onShow( async () => {systemInfo.value = await getSystemInfo();uni.authorize({scope: 'scope.bluetooth',success() {console.log('蓝牙权限已授权');initBluetooth();},fail() {showToast('请开启蓝牙权限!');}});});function initBluetooth() {uni.onBluetoothAdapterStateChange(function (res) {console.log(`蓝牙状态变化,用户${res.available ? '打开' : '关闭'}蓝牙!`);btOpenStatus.value = res.available;if(res.available) {startBluetoothScan();}});uni.openBluetoothAdapter({success: () => {console.log("蓝牙适配器已打开!");startBluetoothScan(); // 开始扫描设备},fail: (err) => {if (err.errCode == 10001) {btOpenStatus.value = false;showToast('蓝牙未打开!');}}});}function startBluetoothScan() {uni.startBluetoothDevicesDiscovery({success: (res) => {console.log("开始扫描蓝牙设备...",res);},fail: (err) => {console.error("启动扫描失败", err);showToast("启动蓝牙扫描失败");}});// 监听新发现的设备uni.onBluetoothDeviceFound((res) => {// 遍历发现的设备res.devices.forEach((device) => {// 去重：根据 deviceId 判断是否已存在const exists = devicesList.value.some(d => d.deviceId === device.deviceId);if (!exists) {devicesList.value.push(device);}});});}const connectedDevice = ref({serviceOrFeature: [] as Array<{ service: any, characteristics ? : any }>,devicesInfo: {} as UniApp.BluetoothDeviceInfo});/*** 连接蓝牙设备*/async function createBLEConnection(device: UniApp.BluetoothDeviceInfo) {await uni.getLocation({});if(devicesList.value.length <= 0) {showToast('正在搜索附近的蓝牙设备');return;}uni.showToast({duration: 30000,icon: "loading",title: '蓝牙正在连接中!'});console.log('选择的蓝牙设备：',device);if(device) {connectedDevice.value.devicesInfo = device;uni.createBLEConnection({deviceId: device.deviceId,async success(connectionRes) {if(connectionRes.errCode == 0) {console.log('连接成功!');showToast('蓝牙连接成功');let servicesRes = await getBLEDeviceServices(device.deviceId);if(servicesRes.code == 200) {console.log('蓝牙初始化服务完成');}}},fail(connectionRes) {if(connectionRes.errCode == 10000) {showToast('请检查蓝牙是否开启!');}else if(connectionRes.errCode == 10000) {showToast('蓝牙连接失败,可以重试!');}else if(connectionRes.errCode == 10010 || connectionRes.errCode == -1) {console.log('已经连接');}},complete() {uni.hideToast();}});}}/*** 获取蓝牙设备的服务(service)*/function getBLEDeviceServices(deviceId: string) : Promise<{code : number}> {return new Promise( ok => {uni.getBLEDeviceServices({deviceId,success: (res) => {res.services.forEach(async (item) => {let characteristicsRes = await getBLEDeviceCharacteristics(deviceId,item.uuid);if(characteristicsRes.code == 200) {connectedDevice.value.serviceOrFeature.push({service: item,characteristics: characteristicsRes.data});ok({ code : 200 });}});},fail: (err) => {console.log("获取服务失败", err);ok({ code : 201 });}});});}/*** 获取蓝牙设备的特征值(characteristic)*/async function getBLEDeviceCharacteristics(deviceId: string, serviceId: string) : Promise<{ code : number , data ? : any }> {return new Promise( ok => {uni.getBLEDeviceCharacteristics({deviceId,serviceId,success: (res) => {ok({code: 200,data: res.characteristics});},fail: () => {ok({code : 201})}});});}/*** 获取连接设备的写特征值(wirteCharacteristic)*/function getBluetoothServiceFeature(propertyName: string): { serviceUUID: string, feature: any } {let serviceFeatureInfo: { serviceUUID: string, feature: any } = { serviceUUID: '', feature: {} };connectedDevice.value.serviceOrFeature.forEach(item => {let foundFeature = item.characteristics.find((feature: any) => feature.properties[propertyName]);if (foundFeature) {serviceFeatureInfo.serviceUUID = item.service.uuid;serviceFeatureInfo.feature = foundFeature;return;}});return serviceFeatureInfo;}// 向蓝牙写数据function sendMsg(msg: any, isBuffer ? : boolean ) {console.log('发送的信息：',msg);	let writeServiceFeature = getBluetoothServiceFeature('write');if (!writeServiceFeature) {console.log('蓝牙没有对应的写服务权限!');return;}uni.writeBLECharacteristicValue({deviceId: connectedDevice.value.devicesInfo.deviceId,serviceId: writeServiceFeature.serviceUUID,characteristicId: writeServiceFeature.feature.uuid, value: isBuffer ? msg : stringToArrayBuffer(msg) as any,writeType: systemInfo.value.osName == 'ios' ? 'write' : 'writeNoResponse',success(res) {console.log('消息发送成功', res);},fail(res) {console.log('消息发送失败', res);}});}function stringToArrayBuffer(str: string): ArrayBuffer {const buffer = new ArrayBuffer(str.length);const view = new Uint8Array(buffer);for (let i = 0; i < str.length; i++) {view[i] = str.charCodeAt(i);}return buffer;}function showToast(title: string) {uni.showToast({icon: 'none',title});}</script><style lang="scss" scoped>.device-card {background-color: #fff;border-radius: 8px;padding: 16px;margin-bottom: 12px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);display: flex;flex-direction: column;gap: 10px;}.device-info {.name {font-weight: bold;font-size: 16px;color: #333;}.id {font-size: 14px;color: #888;display: block;margin-top: 4px;}}.actions {display: flex;gap: 10px;.btn {flex: 1;text-align: center;padding: 8px 0;border-radius: 4px;font-size: 14px;}.connect {color: #fff;background-color: #6659E5;}.send {color: #fff;background-color: #FC5531;}}.empty-state {text-align: center;padding: 20px;color: #999;}
</style>

🛠️ 补充建议

功能实现方式
显示 RSSI 信号强度在设备项中显示 {{ device.RSSI }} dBm
自动刷新设备列表使用定时器每隔几秒重新扫描
防止重复点击连接添加 connectingDeviceId 状态控制
发送自定义数据包使用 buildBluetoothPacket() 构造特定格式数据

📦 最终效果预览

前端UI部分

📌 总结

✅ 本教程实现了从蓝牙权限申请 → 设备扫描 → 连接设备 → 获取服务 → 特征值读写 → 数据发送的一整套流程。

🎯 适用于智能门锁、手环、打印机、IoT 等需要蓝牙通信的场景。

💡 如果你需要对接具体蓝牙协议（如 BLE 服务 UUID、数据格式），欢迎继续提问，我可以帮你定制！

http://www.lqws.cn/news/170029.html

相关文章：

  • 【Python 算法零基础 4.排序 ⑪ 十大排序算法总结】
  • 学习笔记(26)：线性代数-张量的降维求和，简单示例
  • uniapp+vue2解构赋值和直接赋值的优缺点
  • 如何利用 Redis 实现跨多个无状态服务实例的会话共享？
  • 传统业务对接AI-AI编程框架-Rasa的业务应用实战（4）--Rasa成型可用 针对业务配置rasa并训练和部署
  • AI代码助手需求说明书架构
  • 408第一季 - 数据结构 - 数组和特殊矩阵
  • 贝叶斯网络_TomatoSCI分析日记
  • 探索 Java 垃圾收集：对象存活判定、回收流程与内存策略
  • 如何理解OSI七层模型和TCP/IP四层模型？HTTP作为如何保存用户状态？多服务器节点下 Session方案怎么做
  • Docker部署Hive大数据组件
  • JAVA学习 DAY2 java程序运行、注意事项、转义字符
  • 数据库：索引
  • JS设计模式(4)：观察者模式
  • 发版前后的调试对照实践：用 WebDebugX 与多工具构建上线验证闭环
  • Spring Boot 实现流式响应（兼容 2.7.x）
  • 23套橙色系精选各行业PPT模版分享
  • windows上的visual studio2022的项目使用jenkins自动打包
  • 极速互联·智控未来——SG-Can(FD)Hub-600 六通道CANFD集线器
  • 【Go语言基础【9】】字符串格式化与输入处理
  • Docker配置SRS服务器 ，ffmpeg使用rtmp协议推流+vlc拉流
  • 8K样本在DeepSeek-R1-7B模型上的复现效果
  • Axure零基础跟我学：展开与收回
  • 【美团技术团队】从实际案例聊聊Java应用的GC优化
  • Python应用函数调用(二)
  • Nginx部署vue项目, 无法直接访问其他路径的解决方案
  • [AI绘画]sd学习记录(一)软件安装以及文生图界面初识、提示词写法
  • 渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止
  • React 新项目
  • 环境变量深度解析：从配置到内核的全链路指南