uniapp/微信小程序获取蓝牙设备

2021/6/19 12:28:33

本文主要是介绍uniapp/微信小程序获取蓝牙设备,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

uniapp/微信小程序获取蓝牙设备

  • view
  • script
  • style

此文章只是获取蓝牙设备,不涉及连接设备,连接设备敬请期待!!!

view

<u-navbar :is-back="true" title="设备" :background="background" title-color="#FFFFFF" back-icon-color="#FFFFFF"
			:border-bottom="false">
		</u-navbar>
		<button class='button' hover-class="hover" @click="startSearch" :loading='isScanning'> 搜索蓝牙设备 </button>
		<scroll-view class="device_list" scroll-y scroll-with-animation>
			<view v-for="(item,index) in list" :data-title="item.deviceId" :data-name="item.name"
				:data-advertisData="item.advertisServiceUUIDs" :key="item.deviceId" @click="bindViewTap" class="item"
				hover-class="item_hover">
				<view style="font-size: 16px; color: #333;">{{item.name}}</view>
				<view style="font-size: 16px; color: #333;">{{item.deviceId}}</view>
				<view style="font-size: 10px">信号强度: {{item.RSSI}}dBm</view>
			</view>
		</scroll-view>

script

export default {
		data() {
			return {
				background: {
					backgroundColor: '#60BFAC',
				},
				list: [],
				services: [],
				serviceId: 0,
				writeCharacter: false,
				readCharacter: false,
				notifyCharacter: false,
				isScanning: false,
				isOpenBle: false,
				deviceId: '',
				
				globalData: {
					userInfo: null,
					platform: "",
					sysinfo: '',
					screenWidth: wx.getSystemInfoSync().screenWidth,
					screenHeight: wx.getSystemInfoSync().screenHeight,
				},
				BLEInformation: {
					platform: "",
					deviceId: "",
					writeCharaterId: "",
					writeServiceId: "",
					notifyCharaterId: "",
					notifyServiceId: "",
					readCharaterId: "",
					readServiceId: "",
				}
			}
		},
		onLoad() {
			//获取手机型号model,微信版本号version,操作系统版本system,客户端平台platform,客户端基础库版本SDKVersion
			this.globalData.sysinfo = uni.getSystemInfoSync();
			console.log(this.globalData);
			//在页面加载时候初始化蓝牙适配器
			uni.openBluetoothAdapter({
				success: e => {
					console.log('初始化蓝牙成功:' + e.errMsg);
					this.isOpenBle = true;
					console.log(this.isOpenBle);
					// 初始化完毕开始搜索
					this.startBluetoothDeviceDiscovery()
				},
				fail: e => {
					console.log('初始化蓝牙失败,错误码:' + (e.errCode || e.errMsg));
					wx.showModal({
						title: '提示',
						content: '蓝牙初始化失败,请到设置打开蓝牙',
						showCancel: false
					})
				}
			});
		},
		methods: {
			startBluetoothDeviceDiscovery() {
				//在页面显示的时候判断是都已经初始化完成蓝牙适配器若成功,则开始查找设备
				let self = this;
				setTimeout(function() {
					if (self.isOpenBle) {
						console.log("开始搜寻智能设备");
						uni.startBluetoothDevicesDiscovery({
							success: res => {
								self.onBluetoothDeviceFound();
							},
							fail: res => {
								console.log("查找设备失败!");
								uni.showToast({
									icon: "none",
									title: "查找设备失败!",
									duration: 3000
								})
							}
						});
					} else {
						console.log("未初始化蓝牙是配饰器:" + self.isOpenBle);
					}
				}, 300);
			},
			/**
			 * 停止搜索蓝牙设备
			 */
			stopBluetoothDevicesDiscovery() {
				uni.stopBluetoothDevicesDiscovery({
					success: e => {
						console.log('停止搜索蓝牙设备:' + e.errMsg);
					},
					fail: e => {
						console.log('停止搜索蓝牙设备失败,错误码:' + e.errCode);
					}
				});
			},
			/**
			 * 发现外围设备
			 */
			onBluetoothDeviceFound() {
				console.log("监听寻找新设备");
				// this.getBluetoothDevices();
				uni.onBluetoothDeviceFound(devices => {
					console.log('开始监听寻找到新设备的事件');
					this.getBluetoothDevices();
				});
			},
			/**
			 * 获取在蓝牙模块生效期间所有已发现的蓝牙设备。包括已经和本机处于连接状态的设备。
			 */
			getBluetoothDevices() {
				console.log("获取蓝牙设备");
				uni.getBluetoothDevices({
					success: res => {
						console.log('获取蓝牙设备成功:' + res.errMsg);
						console.log(res)
						var devices = [];
						var num = 0;
						for (var i = 0; i < res.devices.length; i++) {
							if (res.devices[i].name != "未知设备") {
								devices[num] = res.devices[i]
								num++
							}
						}
						this.list = devices;
					}
				});
			},
		}
	}

style

.button {
		margin-top: 20px;
		width: 90%;
		background-color: #60BFAC;
		color: white;
		border-radius: 98rpx;
	}

	.device_list {
		height: auto;
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 10px;
		margin-bottom: 20px;
		border: 1px solid #EEE;
		border-radius: 5px;
		width: auto;
	}

	.td {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
	}

	/* .item {
	    padding-top: 10px;
	    padding-bottom: 10px;
	     height: 130rpx;
	     width: 100%;
	} */
	.item {
		display: block;
		/* font-family:  Arial, Helvetica, sans-serif;
	  font-size:14px;
	  margin: 0 10px;
	  margin-top:10px;
	  margin-bottom: 10px;
	  background-color:#FFA850; 
	  border-radius: 5px;
	  border-bottom: 2px solid #68BAEA; */
		border-bottom: 1px solid #EEE;
		padding: 4px;
		color: #666;
	}

	.item_hover {
		background-color: rgba(0, 0, 0, .1);
	}

	.block {
		display: block;
		color: #ffffff;
		padding: 5px;
	}


这篇关于uniapp/微信小程序获取蓝牙设备的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程