uniapp实现蓝牙通信

已于 2023-03-04 11:01:53 修改
阅读量1.7k 收藏 16
点赞数 2
分类专栏： uniapp 文章标签： uni-app javascript 前端
于 2023-03-04 10:46:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46639390/article/details/129331390
版权

uniapp实现读取蓝牙连接蓝牙等操作（vue2+js）直接一把梭版

参考博客地址：https://juejin.cn/post/7093171532318375950

界面demo如下

在这里插入图片描述
在这里插入图片描述

代码部分

<template>
	<view>
		<view class="BuuetoothServiceList">
			<text>蓝牙设备列表</text>
		</view>
		<scroll-view scroll-y class="box">
			<view class="item" v-for="item in blueDeviceList" @click="connect(item)">
				<view>
					<text>id: {{ item.deviceId }}</text>
				</view>
				<view>
					<text>RSSI:{{item.RSSI}}</text>
				</view>
				<view>
					<text>name: {{ item.name }}</text>
				</view>
			</view>
		</scroll-view>
		<button @click="initBluetooth()"
			style="width: 9rem;height: 3rem;background-color: rgb(138, 145, 159);">①蓝牙连接</button>
		<view class="BuuetoothServiceList">
			<text>蓝牙服务列表</text>
		</view>
		<scroll-view scroll-y class="box">
			<view class="item" v-for="item in sevicesList">
				<view>
					<text user-select="true">uuid: {{ item.uuid }}</text>
				</view>
			</view>
		</scroll-view>
		<view class="BuuetoothServiceList">
			<text>蓝牙特征值列表</text>
		</view>
		<scroll-view scroll-y class="box">
			<view class="item" v-for="item in eigenvalueList">
				<view>
					<text user-select="true">uuid: {{ item.uuid }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- <uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" /> -->
		<view class="btnBox"><input type="text"
				style="width: 75%;height: 3rem;background-color: rgb(246, 244, 241);margin-left: 5%;border-radius: 20rpx;box-shadow:0 0 8rpx #000;margin-top: 20rpx;"
				placeholder="请输入蓝牙服务表中的uuid" v-model="serviceUuid" />
			<view class="clearInput">
				<icon type="clear" @click="clearIptA()"></icon>
			</view>
		</view>

		<view class="btnBox">
			<!-- <button @click="discovery()"
				style="width: 12rem;height: 3rem;margin-top: 1rem;background-color: rgb(138, 145, 159);">②搜索附近蓝牙设备</button>
			<button @click="getServices()"
				style="width: 10rem;height: 3rem;margin-top: 1rem;background-color: rgb(138, 145, 159);">③获取蓝牙服务</button> -->

			<button @click="getCharacteristics()"
				style="width: 10rem;height: 3rem;margin-top: 1rem;background-color:rgb(138, 145, 159);">②获取特征值</button>
			<!-- <button @click="notify()"
				style="width: 10rem;height: 3rem;margin-top: 1rem;background-color:rgb(138, 145, 159);">③开启消息监听</button> -->
		</view>
		<view class="btnBox">
			<input type="text"
				style="box-shadow:0 0 8rpx #000;width: 75%;height: 3rem;background-color: rgb(246, 244, 241);margin-left: 5%;border-radius: 20rpx;margin-top: 20rpx;"
				placeholder="开始监听之前,请输入需要监听的特征值" v-model="eigenvalue" />
			<view class="clearInput">
				<icon type="clear" @click="clearIptB()"></icon>
			</view>
		</view>

		<view class="btnBox">
			<button @click="notify()"
				style="width: 10rem;height: 3rem;margin-top: 1rem;background-color:rgb(138, 145, 159);">③开启消息监听</button>
			<input type="text"
				style="width: 75%;height: 3rem;background-color: rgb(246, 244, 241);margin-left: 5%;border-radius: 20rpx;box-shadow:0 0 8rpx #000;margin-top: 20rpx;"
				placeholder="请填写需要发送的内容" v-model="sendMessage" />
			<!-- <uni-icons type="icon-youxi" size="30"></uni-icons> -->
			<view class="clearInput">
				<icon type="clear" @click="clearIptC()"></icon>
			</view>
			<!-- <text style="background-color: aqua;height: 3rem;line-height: 3rem;margin-left: 2.5%;"></text> -->
			<button @click="send()"
				style="width: 10rem;height: 3rem;margin-top: 1rem;background-color:rgb(138, 145, 159);">④发送数据</button>
			<button @click="read()"
				style="width: 10rem;height: 3rem;margin-top: 1rem;background-color:rgb(138, 145, 159);">⑤读取数据</button>
		</view>
		<view class="msg_x" style="background-color: rgb(246, 244, 241);">
			<view class="msg_txt">
				监听到的内容：{{ message }}
			</view>
			<view class="msg_hex">
				监听到的内容（十六进制）：{{ messageHex }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				blueDeviceList: [],
				deviceId: null,
				sevicesList: [],
				serviceUuid: null,
				eigenvalueList: [],
				eigenvalue: null,
				message: "",
				messageHex: "",
				sendMessage: ""
			}
		},
		methods: {
			initBluetooth() {
				let that = this
				uni.openBluetoothAdapter({
					success(res) {
						console.log('初始化蓝牙成功')
						console.log(res)
						//开始搜索蓝牙设备
						that.discovery()
						//获取蓝牙服务
						console.log('调用服务预备');
						that.getServices()
					},
					fail(err) {
						console.log('初始化蓝牙失败')
						console.error(err)
					}
				})
			},
			// 开始搜索蓝牙设备
			discovery() {
				let that = this
				uni.startBluetoothDevicesDiscovery({
					//services:['FFE0'],
					success(res) {
						console.log('开始搜索')
						// 开启监听回调
						//uni.onBluetoothDeviceFound(that.found(res))
						uni.onBluetoothDeviceFound(function(res) {
							console.log(res, '---')
							if (res.devices[0].name == "iCore Server") {
								that.blueDeviceList.push(res.devices[0])
							}

						})
					},
					fail(err) {
						console.log('搜索失败')
						console.error(err)
					}
				})
			},
			//连接蓝牙设备
			connect(data) {
				console.log(data, '---+++___')
				this.deviceId = data.deviceId
				let that = this
				uni.createBLEConnection({
					deviceId: this.deviceId,
					success(res) {
						uni.showToast({
							icon: 'success',
							title: '蓝牙连接成功'
						})
						console.log('连接成功')
						console.log(res)
						that.stopDiscovery()
						//获取蓝牙服务
						that.getServices()
					},
					fail(err) {
						uni.showToast({
							icon: 'error',
							title: '蓝牙连接失败'
						})
						console.log('连接失败')
						console.log(err)
					}
				})
			},
			//停止搜索
			stopDiscovery() {
				uni.stopBluetoothDevicesDiscovery({
					success(res) {
						console.log('停止成功')
						console.log(res)
					},
					fail(err) {
						console.log('停止失败')
						console.error(err)
					}
				})
			},
			//获取蓝牙服务
			getServices() {
				console.log('开始获取蓝牙服务');
				let that = this;
				uni.getBLEDeviceServices({
					deviceId: that.deviceId, // 设备ID，在上一步【4】里获取
					success(res) {
						that.sevicesList = res.services
						console.log(that.sevicesList, '=================')
					},
					fail(err) {
						console.error(err)
					}
				})
			},
			//获取特征值
			getCharacteristics() {
				if (this.serviceUuid == null) {
					console.log('----')
					uni.showToast({
						icon: 'error',
						title: '请在上面输入框中输入uuid'
					})
				}
				let that = this
				//console.log(this.serviceUuid, 'serviceUuid')
				uni.getBLEDeviceCharacteristics({
					deviceId: that.deviceId, // 设备ID，在【4】里获取到
					serviceId: that.serviceUuid, // 服务UUID，在【6】里能获取到
					success(res) {
						that.eigenvalueList = res.characteristics
						console.log(res)
					},
					fail(err) {
						console.error(err)
					}
				})
			},
			notify() {
				let that = this
				uni.notifyBLECharacteristicValueChange({
					state: true, // 启用 notify 功能
					deviceId: that.deviceId, // 设备ID，在【4】里获取到
					serviceId: that.serviceUuid, // 服务UUID，在【6】里能获取到
					characteristicId: that.eigenvalue, // 特征值，在【7】里能获取到
					success(res) {
						console.log(res)

						// 接受消息的方法
						that.listenValueChange()
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// ArrayBuffer转16进度字符串示例
			ab2hex(buffer) {
				const hexArr = Array.prototype.map.call(
					new Uint8Array(buffer),
					function(bit) {
						return ('00' + bit.toString(16)).slice(-2)
					}
				)
				return hexArr.join('')
			},
			// 将16进制的内容转成我们看得懂的字符串内容
			hexCharCodeToStr(hexCharCodeStr) {
				var trimedStr = hexCharCodeStr.trim();
				var rawStr = trimedStr.substr(0, 2).toLowerCase() === "0x" ? trimedStr.substr(2) : trimedStr;
				var len = rawStr.length;
				if (len % 2 !== 0) {
					alert("存在非法字符!");
					return "";
				}
				var curCharCode;
				var resultStr = [];
				for (var i = 0; i < len; i = i + 2) {
					curCharCode = parseInt(rawStr.substr(i, 2), 16);
					resultStr.push(String.fromCharCode(curCharCode));
				}
				return resultStr.join("");
			},
			listenValueChange() {
				let that = this
				uni.onBLECharacteristicValueChange(res => {
					// 结果
					console.log(res, '这是监听成功的回调');
					// 结果里有个value值，该值为 ArrayBuffer 类型，所以在控制台无法用肉眼观察到，必须将该值转换为16进制
					let resHex = that.ab2hex(res.value)
					//console.log(resHex)​;
					that.messageHex = resHex
					// 最后将16进制转换为ascii码，就能看到对应的结果
					let result = that.hexCharCodeToStr(resHex);
					that.message = String(result)
					console.log(String(result),'000000')
				})
			},

			//发送数据
			send() {
				// 向蓝牙设备发送一个0x00的16进制数据
				let msg = this.sendMessage
				console.log(msg,'$$$$$$$$$$$$$$$$$$$$$$$$$$');
				if (this.sendMessage == "") {
					uni.showToast({
						icon: 'error',
						title: '需要发送的内容不能为空'
					})
					return
				}


				const buffer = new ArrayBuffer(msg.length)
				const dataView = new DataView(buffer)
				// dataView.setUint8(0, 0)

				for (var i = 0; i < msg.length; i++) {
					dataView.setUint8(i, msg.charAt(i).charCodeAt())
				}

				let that = this

				uni.writeBLECharacteristicValue({
					deviceId: that.deviceId,
					serviceId: that.serviceUuid,
					characteristicId: that.eigenvalue,
					value: buffer,
					success(res) {
						console.log('writeBLECharacteristicValue success', res.errMsg)
						uni.showToast({
							title: 'write指令发送成功'
						})
					},
					fail(err) {
						console.error(err,"写入指令发送失败")
						uni.showToast({
							title: 'write指令发送失败',
							icon: 'error'
						})
					}
				})
			},
			//读取数据
			read() {
				let that = this
				uni.readBLECharacteristicValue({
					deviceId: that.deviceId,
					serviceId: that.serviceUuid,
					characteristicId: that.eigenvalue,
					success(res) {
						console.log(res,"数据读取成功")
						uni.showToast({
							title: 'read指令发送成功'
						})
					},
					fail(err) {
						console.error(err)
						uni.showToast({
							title: 'read指令发送失败',
							icon: 'error'
						})
					}
				})
			},
			//清除输入框中数据
			//清除蓝牙表中的uuid
			clearIptA() {
				this.serviceUuid = ""
			},
			//清除监听特定值的
			clearIptB() {
				this.eigenvalue = ""
			},
			//发送内容的输入框
			clearIptC() {
				this.sendMessage = ""
			}
		},
		onLoad() {

		}
	}
</script>

<style>
	.box {
		width: 100%;
		height: 500rpx;
		box-sizing: border-box;
		margin-bottom: 8rpx;
		border: 1px solid rgb(138, 145, 159);
	}

	.item {
		box-sizing: border-box;
		padding: 10rpx;
		border-bottom: 1px solid gray;
	}

	/* button {
		margin-bottom: 20rpx;
	} */

	.btnBox {
		display: flex;
		display: flex;
		align-items: flex-end;
		flex-wrap: wrap;
	}

	.BuuetoothServiceList {
		width: 100%;
		height: 2rem;
		margin-bottom: 8rpx;
		line-height: 2rem;
		text-align: center;
		font-weight: 700;

	}

	.msg_x {
		border: 2px solid seagreen;
		width: 98%;
		margin: 10rpx auto;
		box-sizing: border-box;
		padding: 20rpx;
	}

	/*	​.msg_txt {
		margin-bottom: 20rpx;
	} */

	.clearInput {
		width: 5%;
		height: 3rem;
		line-height: 3rem;
		float: left;
		margin-left: 2%;
	}
</style>

总结如下：

参考uniapp官方文档api
初始化：打开蓝牙模块
搜寻：检测附近存在的设备
连接：找到目标设备进行
监听：开启监听功能，接收其他设备传过来的数据
发送指令：不管发送数据还是读取数据，都可以理解为向外发送指令

写bug的小张
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【手把手教程】uniapp + vue 从0搭建简易蓝牙BLE通讯插件：扫描+连接+收发数据
05-28 2796
基于 Uniapp + VUE 实现简易的低功耗蓝牙（BLE）通讯应用，实现一下功能 扫描周边蓝牙设备 连接选定设备 HEX/TEXT 数据收发 项目开发环境 IDE：HbuilderX 3.0+ 开发框架：uniapp + vue2.x + sass 运行平台：Android（4.4 - 11.0）、iOS（9 - 15） 环境要求：window7+，macOS 10.12.6+, node 10.14.5+ 效果演示 项目实践 首先需要开发者提前准备好“技术实现”部分的...
uniapp-蓝牙模块连接
03-06
【标题】"uniapp-蓝牙模块连接"涉及的是在uni-app框架中实现蓝牙设备的连接与通信技术。uni-app是一个基于Vue.js开发的多端框架，可以用来构建跨平台的小程序、H5、APP等应用。在uni-app中，开发者可以利用其提供的...
vue手机项目如何控制蓝牙连接
qq_43592064的博客
11-01 8548
vue手机项目如何控制蓝牙连接
vue操作蓝牙教程
最新发布
renkai721的专栏
06-11 725
vue操作蓝牙教程，uniapp操作蓝牙教程，uniapp+bluetooth，vue+bluetooth，uniapp操作低功耗蓝牙，vue操作低功耗蓝牙
uniapp蓝牙连接操作详解
qq_52151772的博客
08-10 3739
蓝牙对接硬件操作详解
uniapp 蓝牙连接测温仪
qq_32439381的博客
06-17 977
需求：app通过蓝牙连接硬件测温仪，使用uniapp的ble蓝牙连接
uni-app开发微信小程序使用BLE低功耗蓝牙正确步骤
qq_43813351的博客
04-03 1301
微信小程序通过蓝牙连接设备，所以需要使用到BLE连接。思路：小程序连接BLE的步骤+已经知道设备的BLE名称、服务id、特征值ID。需要根据蓝牙模块提供商的说明书去选择相应的服务、特征值。注意：监听和写入不一定是同一个特征值。
vue3 vueUse 连接蓝牙
LlanyW的专栏
04-13 1089
vue3的网页项目连接电脑或者手机上的蓝牙设备，使用vueUse库，可以快速检查连接蓝牙设备。
uniapp蓝牙封装.zip
07-17
通过vuex的集成，可以实现应用程序状态的统一管理和跨组件通信，使得蓝牙打印功能在整个应用中的调用变得简单且高效。用户只需提供要打印的数据，无需关心底层的蓝牙连接和打印细节，也无需额外安装其他依赖包，提高...
download (2)_uniapp蓝牙打印_
10-02
综上所述，`uniapp蓝牙打印`涉及到跨平台开发、蓝牙通信协议、数据编码等多个方面的知识。理解并掌握这些知识点，开发者能构建出高效、稳定的蓝牙打印解决方案，提升用户体验。在实际项目中，还需要考虑性能优化、...
基于vue的uniapp原生蓝牙模块插件-soket流读写蓝牙数据
04-25
uniapp基于vue的原生蓝牙模块插件，使用nativejs调用底层蓝牙模块，支持蓝牙数据读写，可自定义扩展方法
Node.js-Bluetoothlib用于Android设备与蓝牙模块串口通信的库
08-12
该库基于SPP协议（Serial Port Profile）开发，主要用于Android设备与蓝牙模块串口通信。支持蓝牙模块的扫描，支持Android设备和蓝牙模块之间的快速连接，支持串口数据的接收和发送
Android Phone蓝牙通信方式总结（Socket与Gatt）
01-03
Android手机间通过蓝牙方式进行通信，有两种常见的方式，一种是socket方式，另一种是通过Gatt Server（Android 5.0以后）通信，socket方式最为简单，但是很多低功耗的蓝牙设备，如单片机上的蓝牙模块可能不支持。而Gatt方式说起来就比较复杂，我研究了好会儿，搜索了不少资料，走了不少弯路才总结出来。 首先来看比较简单的socket方式 其实无论是socket方式还是Gatt，Android设备间蓝牙通信都是一种CS（client-server)模式。 1）socket服务端： 使用listenUsingInsecureRfcommWithServiceRecord接口
低功耗蓝牙App Demo
11-16
自己写的的Ble低功耗蓝牙的Android app的Demo，此例子适用于cc2541 和 jdy 08 蓝牙芯片，其他芯片如果不能正常通讯只需要根据芯片手册进行少许更改即可！
uni-app uniApp蓝牙打印机安卓通用型
03-03
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，能够编译到iOS、Android... JS与原生代码通信：在uni-app的Vue.js代码中，使用uni-app提供的API与原生代码进行通信，发送打印任务。这可能涉及到使用plus.android等
保姆级别uni-app使用低功耗蓝牙
weixin_44395210的博客
08-19 2100
帮您了解uniapp的低功耗蓝牙的使用过程。代码可直接使用
uni-app 设备（蓝牙BLE）
SongYuLong
02-10 6295
uni-app 蓝牙设备蓝牙接口API接口API使用示例 蓝牙接口API 接口API使用示例 <template> <view class="content"> <!-- image class="logo" src="/static/logo.png"></image --> <view class="text-area"> <text class="title">{{title}}</text> &
『uni-app、小程序』蓝牙连接、读写数据全过程
weixin_39415598的博客
05-03 7416
theme: smartblue 本文简介 点赞 + 关注 + 收藏 = 学会了 这是一次真实的 蓝牙收发数据 的全过程讲解。 本文使用 uni-app + Vue3 的方式进行开发，以手机app的方式运行(微信小程序同样可行)。 uni-app 提供了 蓝牙 和 低功耗蓝牙 的 api ，和微信小程序提供的 api 是一样的，所以本文的讲解也适用于微信小程序。 本文只实现 蓝牙收...
uni-app微信小程序使用佳博蓝牙打印机
热门推荐
努力奔跑的小不点
05-23 2万+
1.佳博打印js copy到项目里。2.需要打印的vue页面引入js。
uniapp封装蓝牙打卡
07-18
UniApp是一个跨平台开发框架，可以帮助开发者快速地开发多平台的应用程序。...通过使用UniApp扩展插件来引用蓝牙相关的API，开发者可以方便地在UniApp中实现蓝牙打卡功能，并且可以跨平台运行，适配更多的设备。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值