当前位置：首页 > VUE

vue实现连接蓝牙

2026-01-18 04:14:47VUE

Vue 连接蓝牙的实现方法

在 Vue 项目中连接蓝牙设备需要使用 Web Bluetooth API。该 API 允许网页与附近的蓝牙设备进行交互，但需要注意浏览器兼容性和 HTTPS 环境要求。

检查浏览器支持

确保用户的浏览器支持 Web Bluetooth API：

if (!navigator.bluetooth) {
  alert('您的浏览器不支持蓝牙功能或未启用');
}

请求蓝牙设备

使用 navigator.bluetooth.requestDevice 方法扫描并选择设备：

async function connectToDevice() {
  try {
    const device = await navigator.bluetooth.requestDevice({
      acceptAllDevices: true, // 或指定服务UUID
      optionalServices: ['generic_access'] // 需要的服务
    });

    // 设备连接逻辑
  } catch (error) {
    console.error('连接失败:', error);
  }
}

建立GATT连接

连接设备并获取主服务：

const server = await device.gatt.connect();
const service = await server.getPrimaryService('generic_access');

监听连接状态变化

添加设备断开连接的事件监听：

device.addEventListener('gattserverdisconnected', () => {
  console.log('设备已断开');
});

读取特征值

从服务中读取特征值：

const characteristic = await service.getCharacteristic('device_name');
const value = await characteristic.readValue();
console.log(new TextDecoder().decode(value));

完整示例组件

创建一个可复用的蓝牙组件：

<template>
  <div>
    <button @click="connect">连接蓝牙设备</button>
    <p>状态: {{ status }}</p>
    <p>设备名称: {{ deviceName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: '未连接',
      deviceName: ''
    };
  },
  methods: {
    async connect() {
      try {
        this.status = '扫描中...';
        const device = await navigator.bluetooth.requestDevice({
          acceptAllDevices: true
        });

        this.status = '连接中...';
        const server = await device.gatt.connect();
        this.deviceName = device.name;
        this.status = '已连接';

        device.addEventListener('gattserverdisconnected', () => {
          this.status = '已断开';
        });
      } catch (error) {
        this.status = '连接失败';
        console.error(error);
      }
    }
  }
};
</script>

注意事项

网站必须通过 HTTPS 提供服务（本地开发除外）
用户必须明确授权蓝牙访问权限
不同设备可能需要特定的服务UUID
iOS 对 Web Bluetooth 的支持有限

错误处理

实现完善的错误处理机制：

try {
  // 蓝牙操作代码
} catch (error) {
  if (error.name === 'NotFoundError') {
    alert('未找到设备');
  } else if (error.name === 'NetworkError') {
    alert('连接已断开');
  } else {
    console.error(error);
  }
}

通过以上方法可以在 Vue 应用中实现蓝牙设备连接功能。实际开发中应根据具体蓝牙设备的协议规范调整服务UUID和特征值处理逻辑。

vue实现连接蓝牙