vue3 vueUse 连接蓝牙

目录

vueuse安装:

useBluetooth: 调用蓝牙API

扫描周期设备

选择设备配对 

连接成功



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 supportedisConnected, // check if connected, reactivedevice, // device object, reactiverequestDevice, // function to request device, returns a promiseserver, // handle services, reactiveerror // error helper, reactive
} = useBluetooth({acceptAllDevices: true,
});
console.log(device)
</script><style>
/*@media (max-width: 1024px) {.about{margin-top:300px;}
}*/@media (min-width: 1024px) {.about {min-height: 100vh;display: flex;align-items: center;}
}
</style>

我的电脑确实是有蓝牙模块

扫描周期设备

还是上面useBluetooth对象,调用requestDevice()自动弹窗一个扫描窗。

<script setup lang="ts">import {useBluetooth} from "@vueuse/core";const {isConnected,isSupported,device,requestDevice,error,
} = useBluetooth({acceptAllDevices: true,
})
</script><template><div class="grid grid-cols-1 gap-x-4 gap-y-4"><div>{{ isSupported ? 'Bluetooth Web API Supported' : 'Your browser does not support the Bluetooth Web API' }}</div><div v-if="isSupported"><button @click="requestDevice()">扫描周边蓝牙设备</button></div><div v-if="device"><p>已连接蓝牙设备名: {{ device.name }}</p></div><div v-if="isConnected" class="bg-green-500 text-white p-3 rounded-md"><p>已连接</p></div><div v-if="!isConnected" class="bg-orange-800 text-white p-3 rounded-md"><p>未连接</p></div><div v-if="error"><div>出错:</div><pre><code class="block p-5 whitespace-pre">{{ error }}</code></pre></div></div>
</template>

选择设备配对 

点击需要连接设备,点击:配对

连接成功

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/814427.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux固定IP (centos)

编辑文件&#xff1a; vim /etc/sysconfig/network-scripts/ifcfg-ens33 修改内容&#xff1a; BOOTPROTO"static" &#xff08;把dhcp改为static&#xff09; ONBOOT"yes" (改为yes) 然后把自己要固定的ip&#xff0c;子网掩码&#xff0c;网关以及…

C语言经典例题(26)

1.奇偶统计 题目描述: 任意输入一个正整数N&#xff0c;统计1~N之间奇数的个数和偶数的个数&#xff0c;并输出。 输入描述: 一行&#xff0c;一个正整数N。&#xff08;1≤N≤100,000&#xff09; 输出描述: 一行&#xff0c;1~N之间奇数的个数和偶数的个数&#xff0c;用空…

[大模型]BlueLM-7B-Chat Lora 微调

BlueLM-7B-Chat Lora 微调 概述 本节我们简要介绍如何基于 transformers、peft 等框架&#xff0c;对 BlueLM-7B-Chat 模型进行 Lora 微调。Lora 是一种高效微调方法&#xff0c;深入了解其原理可参见博客&#xff1a;知乎|深入浅出Lora。 这个教程会在同目录下给大家提供一…

VMware 替代专题|金融、制造、医疗等行业用户实践合集(含虚拟化、vSAN、整体替代)

随着 VMware 调整产品组合和订阅模式&#xff0c;不少国内用户都将寻找 VMware 的替代方案提上日程。根据我们在 3 月初 VMware 升级替代研讨会上收集的用户反馈&#xff0c;近 50% 的 VMware 用户已计划使用其他厂商的超融合方案或相关产品替换 VMware 超融合或部分组件。 在…

使用python互相转换AVI、MP4、GIF格式视频文件

一、AVI文件转MP4文件 要将AVI格式的视频转换为 MP4&#xff0c;你可以使用 Python的 moviepy 库。以下是一个示例代码&#xff0c;用于将 AVI 文件转换为 MP4 文件&#xff1a; from moviepy.editor import VideoFileClip# 读取 AVI 文件 clip VideoFileClip("input.a…

【spring】AOP切面注解学习(二)

文接上篇&#xff1a;【spring】AOP切面注解学习&#xff08;一&#xff09; AOP切面注解测试示例代码 示例代码 一 maven的pom文件导入 <dependency><groupId>org.springframework</groupId><artifactId>spring-aop</artifactId></depende…

使用Kotlin进行全栈开发 Ktor+Kotlin/JS

首发于Enaium的个人博客 前言 本文将介绍如何使用 Kotlin 全栈技术栈KtorKotlin/JS来构建一个简单的全栈应用。 准备工作 创建项目 首先我们需要创建一个Kotlin项目&#xff0c;之后继续在其中新建两个子项目&#xff0c;一个是Kotlin/JS项目&#xff0c;另一个是Ktor项目。…

上海计算机学会 2023年10月月赛 丙组T1 三个数的中位数(模拟)

第一题&#xff1a;T1三个数的中位数 标签&#xff1a;模拟题意&#xff1a;给定三个整数&#xff0c;请输出按大小排序后&#xff0c;位于正中间的数字。题解&#xff1a;给三个数从小到大排序&#xff0c;输出中间的即可。代码&#xff1a; #include <bits/stdc.h> u…

itop4412内核编译_编译自定义函数到内核

我的itop4412开发板是半路捡的&#xff0c;所以没办法加他们的售后群&#xff0c;遇到的问题只好一点点记录吧 内核驱动编译 在日常工作过程中&#xff0c;编写内核程序可能机会不多&#xff0c;但是将厂商提供的内核源码编译到固件中&#xff0c;这个技能还是必须掌握的。 i…

每天学习一个Linux命令之w

每天学习一个Linux命令之w 介绍&#xff1a; 在Linux操作系统中&#xff0c;我们经常需要查看当前登录用户信息、系统负载以及其他用户的登录情况。w命令就是一个很常用的命令&#xff0c;它可以提供这些信息。本篇博客将详细介绍w命令及其所有可用的选项&#xff0c;帮助你更…

Redis入门到通关之String命令

文章目录 ⛄1 String 介绍⛄2 命令⛄3 对应 RedisTemplate API❄️❄️ 3.1 添加缓存❄️❄️ 3.2 设置过期时间(单独设置)❄️❄️ 3.3 获取缓存值❄️❄️ 3.4 删除key❄️❄️ 3.5 顺序递增❄️❄️ 3.6 顺序递减 ⛄4 以下是一些常用的API⛄5 应用场景 ⛄1 String 介绍 Stri…

Asterisk 21.2.0编译安装经常遇到的问题和解决办法之卸载pjsip

目录 会安装也要会卸载make uninstallldconfig 会安装也要会卸载 有些人就只会装。 最常见的场景就是需要卸载之前版本的pjproject。 一般来说&#xff0c;其他版本的 pjproject 会被作为静态链接库安装。这些库跟 Asterisk可能不兼容。 因此&#xff0c;在安装正确版本的pjpro…

连锁收银系统哪个好用 国内三大连锁收银系统评比

随着数字化管理趋势下互联网技术的不断发展革新&#xff0c;互联网技术&#xff0c;以及不断升级优化传统行业渠道模式&#xff0c;线上线下结合的电子商务模式正逐渐成为企业发展的趋势。而门店管理系统也在越来越多的企业应用。但市场上连锁店管理系统品牌诸多&#xff0c;很…

生产事故:线程管理不善诱发P0故障

背景 处于业务诉求&#xff0c;需要建立一个统一的调度平台&#xff0c;最终是基于 Dolphinscheduler 的 V1.3.6 版本去做二次开发。在平台调研建立时&#xff0c;这个版本是最新的版本 命运之轮开始转动 事故 表象 上班后业务部门反馈工作流阻塞&#xff0c;登录系统发现大…

设计模式(23):访问者模式

定义 表示一个作用于某对象结构中的各元素的操作&#xff0c;它使我们可以在不改变元素的类的前提下定义作用与这些元素的新操作。 模式动机 对于存储在一个集合中的对象&#xff0c;他们可能具有不同的类型(即使有一个公共的接口)&#xff0c;对于该集合中的对象&#xff0…

Java-博客系统(前后端交互)

目录 前言 博客系统基本情况 1 创建项目&#xff0c;引入依赖 2 数据库设计 2.1 分析 2.2 建库建表 3 封装数据库 3.1 在java目录下创建DBUtil类&#xff0c;通过这个类对数据库进行封装 3.2 在java目录下创建实体类&#xff08;博客类Blog&#xff09; 3.2 在java目录下创建…

docker nginx-lua发送post json 请求

环境准备 dockerfile from fabiocicerchia/nginx-lua:1.25.3-ubuntu22.04 run apt-get -qq update && apt-get -qq install luarocks run luarocks install lua-cjson run luarocks install lua-iconv run luarocks install lua-resty-http后台代理服务准备&#xff…

3D场景编辑方法——CustomNeRF

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;3D场景编辑方法——CustomNeRF1、研究背景2、提出方法3、CustomNeRF3.1、整体框架步骤3.2、对特定问题的解决 4、实验结果5、总结…

组合模式:构建树形对象结构的设计艺术

在软件开发中&#xff0c;组合模式是一种结构型设计模式&#xff0c;用于表示对象的部分-整体层次结构。通过使单个对象和组合对象具有相同的接口&#xff0c;这种模式允许客户端以统一的方式处理单个对象和组合对象。本文将详细介绍组合模式的定义、实现、应用场景以及优缺点。…

自动化运维(二十六)Ansible 实战变量插件和连接插件

Ansible 支持多种类型的插件&#xff0c;这些插件可以帮助你扩展和定制 Ansible 的功能。每种插件类型都有其特定的用途和应用场景。今天我们一起学习变量插件和连接插件。 一、变量插件 Ansible 变量插件允许动态地添加变量到主机或组中&#xff0c;这些变量可以在 playbook…