uniapp实现蓝牙通信

原创

已于 2023-03-04 11:01:53 修改 · 2.2k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

于 2023-03-04 10:46:17 首次发布

本文通过uniapp演示了如何使用vue2和js进行蓝牙连接操作，包括初始化蓝牙、搜索设备、连接设备、获取蓝牙服务和特征值，以及监听和发送数据。示例代码展示了设备列表、服务列表和特征值列表的UI界面，以及相关方法的实现过程。

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

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

参考博客地址：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: 3re