uniapp蓝牙搜索设备并列表展示

news2024/11/22 16:33:36

1.需求:3.0的桩可以值扫码通过蓝牙名字直接绑定,2.0的桩二维码无蓝牙名称则需通过蓝牙列表来绑定
2.碰到问题
1.0 蓝牙列表需要去重(蓝牙列表通过deviceId去重再放进展示列表)
2.0页面会卡顿(调用my.stopBluetoothDevicesDiscovery() )
3.特别注意点
在这里插入图片描述
4.代码

<template>
	<view style="height:100vh;padding-top: 40rpx;">
		<view class="titleHead">请选择蓝牙设备绑定</view>
		<view class="table-body" @touchmove="move">
			<view class="table-item" v-for="(item,index) in bluetoothList" :key="index" @click="selectBluetooth(item)">
				{{item.name}}
			</view>
		</view>
		<view class="bottom-title">
			<view>
				设备名称规则:ZDBT+桩编码后9</view>
			<view>
				:ZDBT000000V01
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.initBluetooth()
		},
		onLoad() {

		},
		onUnload() {
			my.offBluetoothDeviceFound();
			my.closeBluetoothAdapter({
				success: function(res) {
					console.log(res);
				},
				fail: function(err) {
					console.log(err);
				}
			});
		},
		onHide() {
			my.offBluetoothDeviceFound();
			my.closeBluetoothAdapter({
				success: function(res) {
					console.log(res);
				},
				fail: function(err) {
					console.log(err);
				}
			});
		},
		onPullDownRefresh() {
			uni.showToast({
				title: '正在刷新...'
			})
			this.connectBluetooth()
		},
		components: {
			// timePicker
		},
		data() {
			return {
				tipShow: false,
				show: false,
				msg: '',
				pendingShow: false,
				successShow: false,
				timer: null,
				count: 3,
				bluetoothList: [],
				idList:[],//存放设备deviceId数组 去重
			}
		},
		methods: {
			goService() {
				this.tipShow = true;
			},
			// clickFla(){
			// 	my.stopPullDownRefresh()
			// 	my.offBluetoothDeviceFound();
			// },
			move() {
				my.stopPullDownRefresh()
				my.offBluetoothDeviceFound();
				my.stopBluetoothDevicesDiscovery();
			},
			/*选中蓝牙*/
			selectBluetooth(item) {
				my.stopPullDownRefresh()
				my.offBluetoothDeviceFound();
				my.stopBluetoothDevicesDiscovery({
					success: (res) => {
						my.closeBluetoothAdapter();
						uni.reLaunch({
							url: '/pages/bluetoothList/index?name=' + item.name
						})
					},
					fail: (error) => {
						console.log(error);
					},
				});
			},
			/*蓝牙初始化*/
			initBluetooth() {
				console.log('蓝牙初始化')
				let that = this;
				my.openBluetoothAdapter({
					success: res => {
						console.log('蓝牙初始化')
						console.log(res)
						console.log('蓝牙初始化')
						if (!res.isSupportBLE) {
							uni.showToast({
								title: '抱歉,您的手机蓝牙暂不可用'
							})
							return;
						}
						that.connectBluetooth()
					},
					fail: error => {
						uni.showToast({
							title: JSON.stringify(error.errorMessage)
						})
					},
				});
			},
			/*搜索连接蓝牙*/
			connectBluetooth() {
				console.log('开始搜索蓝牙')
				let that = this;
				let list = []
				//启用下拉刷新
				my.startPullDownRefresh({
					success: function(res) {
						console.log(res);
					},
					fail: function(err) {
						console.log(err);
					}
				});
				my.startBluetoothDevicesDiscovery({
					success() {
						my.onBluetoothDeviceFound(res => {
							var deviceArray = res.devices;
							for (let item of deviceArray) {
								if (item.name != undefined && item.name != null) {
									if (that.idList.indexOf(item['deviceId']) == -1) {//数组去重
										that.idList.push(item['deviceId'])
										that.bluetoothList.push(item)
									}
								}
							}
							//10秒后停止搜索释放系统资源
							let timer = setTimeout(() => {
								my.stopBluetoothDevicesDiscovery()
								my.stopPullDownRefresh()
								clearTimeout(timer)
							}, 10000);
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.titleHead {
		width: 100%;
		height: 66rpx;
		font-size: 48rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2D3748;
		line-height: 66rpx;
		margin: 0 50rpx 0 50rpx;
	}

	.table-body {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;
		height: calc(100vh - 350rpx);
		overflow: scroll;

		.table-item {
			width: 650rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 30rpx 14rpx rgba(236, 235, 236, 0.25);
			border-radius: 45rpx;
			padding-left: 50rpx;
			margin-bottom: 20rpx;
		}

		.table-active {
			width: 650rpx;
			height: 90rpx;
			background: #1677FF;
			color: #FFFFFF;
			box-shadow: 0rpx 0rpx 30rpx 14rpx rgba(236, 235, 236, 0.25);
			border-radius: 45rpx;
			padding-left: 50rpx;
			margin-bottom: 20rpx;
		}
	}

	.bottom-title {
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1677FF;
		line-height: 34rpx;

		>view {
			text-align: center;
		}
	}
</style>

5.效果
在这里插入图片描述

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

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

相关文章

(附源码)基于spring boot 房屋租赁系统小程序-计算机毕设 88306

spring boot 房屋租赁系统小程序 目 录 摘要 1 绪论 1.1选题意义 1.2开发现状 1.3springboot框架介绍 1.4论文结构与章节安排 2 房屋租赁系统小程序系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.…

【Spring】AOP实现原理

注册AOP代理创建器 在平时开发过程中&#xff0c;如果想开启AOP&#xff0c;一般会使用EnableAspectJAutoProxy注解&#xff0c;这样在启动时&#xff0c;它会向Spring容器注册一个代理创建器用于创建代理对象&#xff0c;AOP使用的是AnnotationAwareAspectJAutoProxyCreator&…

MES系统数据集成系统源码

MES系统数据集成系统源码 1 MES的生产计划管理综述 生产计划的管理在MES系统中是非常重要的。我们知道&#xff0c;一般的情况下&#xff0c;企业的生产计划是由上层管理系统ERP来完成&#xff0c;那么MES中的生产计划和ERP的生产计划的不同点在于&#xff1a; ERP的生产计划…

选择振弦采集仪进行岩土工程监测时,根据不同工况选择合适的种类

选择振弦采集仪进行岩土工程监测时&#xff0c;根据不同工况选择合适的种类 岩土工程监测是保证工程质量和安全的重要手段。振弦采集仪是一种常用的岩土工程监测仪器&#xff0c;可用于对岩土工程场地振动环境的监测。它具有测量精度高、实时性强、易于安装、使用方便等特点。…

唯众技能大赛公开公平公正践行者

​近日&#xff0c;2023一带一路暨金砖国家技能发展与技术创新大赛网络综合布线赛项成功举办。唯众创始人辜渝傧对本次比赛情况就相关问题回答了记者提问。 采访人&#xff1a;第一个问题&#xff0c;咱们这一次“2023一带一路暨金砖国家技能发展与技术创新大赛之网络综合布线赛…

React【异步逻辑createAsyncThunk(一)、createAsyncThunk(二)、性能优化、createSelector】(十二)

文章目录 异步逻辑 createAsyncThunk&#xff08;一&#xff09; createAsyncThunk&#xff08;二&#xff09; 性能优化 createSelector 异步逻辑 //Product.js const onAdd () > {const name nameRef.current.value// 触发添加商品的事件dispatch(addProduct({name…

基于.NET的强大文件格式开源转换工具

推荐一个非常强大、轻便的强大文件格式转换工具。 01 项目简介 一个基于.NET平台的开源文件格式转换工具&#xff0c;可以支持Windows 7/8/10等操作系统。安装后在右键菜单中出现 “File Converter” 项目&#xff0c;可以方便地通过右键菜单对选中文件进行格式转换&#xff…

HALCON的python下的使用方法(直接开发,不需要调用.hdev文件)

一、环境配置方法 基本要求&#xff1a; Python版本>3.8 ; Halcon版本 >20.11 1&#xff09;首先创建一个python版本大于3.8的基础环境 2&#xff09;然后查看自己的halcon的版本&#xff0c;在该环境下安装halcon 如图所示&#xff0c;版本是20110&#xff0c;执行以…

Java,多线程,线程的两种创建方式

首先是多线程的一些相关概念&#xff1a; 相关概念&#xff1a; 程序&#xff08;program&#xff09;&#xff1a;为完成特定任务&#xff0c;用某种语言编写的一组指令的集合。即指一段静态&#xff08;指不在执行中&#xff09;的代码。 进程&#xff08;process&#xf…

十分钟了解回归测试

1. 什么是回归测试&#xff08;Regression Testing&#xff09; 回归测试是一个系统的质量控制过程&#xff0c;用于验证最近对软件的更改或更新是否无意中引入了新错误或对以前的功能方面产生了负面影响&#xff08;比如你在家中安装了新的空调系统&#xff0c;发现虽然新的空…

34 mysql limit 的实现

前言 这里来看一下 我们常见的 mysql 分页的 limit 的相的处理 这个问题的主要是来自于 之前有一个需要处理 大数据量的数据表的信息, 将数据转移到 es 中 然后就是用了最简单的 “select * from tz_test limit $pageOffset, $pageSize ” 来分页处理 但是由于 数据表的数…

[autojs]逍遥模拟器和vscode对接

第一步&#xff1a;启动autojs服务 第二步&#xff1a;去cmd查看ip地址&#xff0c;输入ipconfig 第三步&#xff1a;打开逍遥模拟器中的sutojs-左上角- 连接电脑&#xff0c;然后输入WLAN或者其他ip也行&#xff0c;根据自己电脑实际情况确认 此时vscode显示连接成功。我们写…

上传ipa到appstore最简单的方法

假如使用原生xcode开发ios的app&#xff0c;可以使用xcode提交打包好的ipa文件到app store&#xff0c;但是假如使用hbuilderx或者apicloud等H5工具开发的app&#xff0c;假如没有mac电脑&#xff0c;是无法将ipa提交到app store的。 因为苹果开发者并不能在线上传ipa到app st…

数据结构-图的应用

最小生成树&#xff08;最小代价树&#xff09; 对于一个带权连通无向图G(V,E)&#xff0c;生成树不同&#xff0c;每棵树的权&#xff08;即树中所有边上的权值之和)也可能不同。设R为G的所有生成树的集合&#xff0c;若T为R中边的权值之和最小的生成树&#xff0c;则T称为G的…

SPI简介及FPGA通用MOSI模块实现

简介 SPI&#xff08;Serial Peripheral Interface&#xff0c;串行外围设备接口&#xff09;通讯协议&#xff0c;是Motorola公司提出的一种同步串行接口技术。是一种高速、全双工、同步通信总线。在芯片中只占用四根管脚用来控制及数据传输。 优缺点&#xff1a; SPI通讯协…

VM17虚拟机设置网络,本地使用工具连接虚拟机

VM17虚拟机设置网络&#xff0c;本地使用工具连接虚拟机 下载及安装虚拟机不再说明&#xff0c;网络一堆教程。此处只对VM17设置网路及本地使用工具连接虚拟机操作&#xff0c;进行说明。 我下载的是VM17&#xff0c;网上有说VM16是较稳定的版本。想尝尝鲜&#xff0c;结果耗…

linux系统源码安装php5.6手把手教程

linux系统源码安装php5.6实用教程 1、下载php5.6安装包2、开始安装3、安装成功 1、下载php5.6安装包 wget http://mirrors.sohu.com/php/php-5.6.2.tar.gz在安装之前&#xff0c;我们需要安装php5.6编译时所依赖的软件包。如下&#xff1a; yum -y install gcc gcc-c lib2、开…

docker下的nginx代理转发到tomcat

多次尝试失败原因&#xff0c;修改nginx配置文件以后&#xff0c;需要./nginx.sh -s reload 下&#xff0c;之前一直不转发&#xff0c;好像完全没有跳转的意思&#xff0c;后来查了多篇文档&#xff0c;最简单的方法如下 docker 安装 nginx 和tomcat就不多说了&#xff0c;可…

一文6个步骤带你实现接口测试入门!

一、接口测试概述 1 什么是接口测试&#xff1a; 接口测试是测试系统组件间交互的一种测试。接口测试主要用于检测外部系统与系统之间&#xff0c;内部各个子系统之间的交互点。测试的重点是要检查数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及系统间的相互逻辑…

CLion配置libtorch找不到xxx.dll

项目场景&#xff1a; 使用CLion配置libtorch时遇到该问题 问题描述 使用CLion配置libtorch时&#xff0c;CMakeLists.txt文件写完后&#xff0c;cmake也能成功&#xff0c;但是一旦运行代码就会报错找不到xxx.dll&#xff0c;比如找不到torch_cuda.dll或找不到c10.dll 原因分…