vue3 vueUse 连接蓝牙

Lan.W

已于 2024-04-19 16:12:37 修改

阅读量2.5k

点赞数 8

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2024-04-13 10:39:33 首次发布

本文链接：https://blog.csdn.net/LlanyW/article/details/137709834

vueuse安装：

useBluetooth: 调用蓝牙API

通过web bluttooth读写数据参考

vue3的网页项目连接电脑或者手机上的蓝牙设备，使用vueUse库，可以快速检查连接蓝牙设备。

vueUse库使用参考：

VueUse工具库常用api-CSDN博客

vueuse安装：

npm install -D @vueuse/core

或者
pnpm add @vueuse/core

使用关于window相关的api

useBluetooth: 调用蓝牙API

在需要用vue文件导入：
import {useBluetooth, useDevicesList} from "@vueuse/core";

检查当前设备是否支持蓝牙 xx.vue

<template>
  <div class="about flex flex-col">
    <h1> 蓝牙连接功能测试</h1>
    <div>
      <el-button size="default" class="mr-3">打开蓝牙</el-button>
    </div>
    <div>
      <el-text type="primary" size="large" >蓝牙可用状态：{
  
  { isSupported ? '当前设备支持蓝牙' : '当前设备不支持蓝牙' }}</el-text>
    </div>
  </div>
</template>

<script setup lang="ts">

import {useBluetooth, useDevicesList} from "@vueuse/core";

const {
  isSupported,// check if bluetooth is supported
  isConnected, // check if connected, reactive
  device, // device object, reactive
  requestDevice, // function to request device, returns a promise
  server, // handle services, reactive
  error // error helper, reactive
} = useBluetooth({
  acceptAllDevices: true,
});
console.log(device)
</script&g