uniapp启用蓝牙

<template>
	<view class="container">
		<button class="btn" @click="startBluetoothDevicesDiscovery">搜索蓝牙设备</button>
		<view class="device-list">
			<view v-for="(device, index) in devices" :key="index" class="device-item">
				<text>{{ device.deviceId }}</text>
				<text v-if="device.name">{{ device.name }}</text>
				<text v-else>未命名设备</text>
				<text>{{ device.connectable }}</text>

				<button @click="connectToDevice(device.deviceId)">连接</button>
				<button @click="Status">查看连接状态</button>
			</view>

		</view>
	</view>
</template>

  device.connectable为true表示可以连接

页面

单页面非常的简陋,因为侧重蓝牙模块

	data() {
			return {
				devices: [],
				status: [],
			};
		},

方法

开启蓝牙适配器

	startBluetoothDevicesDiscovery() {
		uni.openBluetoothAdapter({
			success: () => {
			  console.log('蓝牙适配器开启成功');
			  uni.startBluetoothDevicesDiscovery({
			     success: () => {
				  console.log('开始搜索蓝牙设备');
					},
			     fail: (err) => {
			 	  console.error('搜索蓝牙设备失败', err);
					 }
					});
					},
			fail: (err) => {
						console.error('蓝牙适配器开启失败', err);
					}
				});

				uni.onBluetoothDeviceFound((devices) => {
					console.log('找到设备', devices.devices[0]);
					this.devices.push(devices.devices[0]);
				});
			},

点击连接蓝牙设备

connectToDevice(deviceId) {
				uni.showLoading({
					title: '正在连接......'
				})

				uni.createBLEConnection({
					deviceId: deviceId,
					success: (res) => {
						console.log('连接蓝牙设备成功', res);
						wx.hideLoading({

						})

						uni.showToast({
							icon: 'none',
							title: '连接成功!'
						})
						this.getServiceId()
					},
					fail: (err) => {
						console.error('连接蓝牙设备失败', err);
						wx.hideLoading({
							title: '连接蓝牙设备失败!'
						})
					}
				});
			},

查看设备连接状态

	Status() {
				uni.getBluetoothAdapterState({
					success: (res) => {
						console.log(res)
						this.status = res
					}

				})
			},

 getServiceId()

			getServiceId() {
				var that = this
				uni.getBLEDeviceServices({
					// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
					deviceId: that.deviceId,
					success: function(res) {
						console.log(res)
						//需要什么服务就用对应的services 
						that.readyservices = res.services[0].uuid //因设备而议:该特征值只支持读
						that.services = res.services[1].uuid //因设备而议:该特征值支持write和notfy服务
						that.getCharacteId() //6.0
					}
				})
			},

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,它允许开发者编写一次代码,然后发布到 iOS、Android、Web(包括微信小程序)等多个平台。uni-app 支持 W3C 标准的弹性盒模型(Flexbox),这是一种用于布局和对齐的布局模型。 启用弹性效果通常是指在布局中使用 Flexbox,以实现更加灵活的布局方式,包括水平或垂直对齐、换行、元素排序等。在 uni-app启用弹性效果,你需要为父容器设置 `display: flex;` 或者 `display: -webkit-flex;`(针对一些老旧的浏览器)属性,然后可以使用其它相关 Flexbox 属性来控制布局。 例如,以下是一些基本的 Flexbox 属性和它们的作用: - `justify-content`: 设置主轴方向上的对齐方式。 - `align-items`: 设置交叉轴方向上的对齐方式。 - `flex-direction`: 设置弹性容器的主轴方向。 - `flex-wrap`: 设置弹性容器的子项是否换行。 - `align-content`: 设置多根轴线的对齐方式。 下面是一个简单的示例,展示如何在 uni-app 中创建一个基本的弹性布局: ```html <template> <view class="flex-container"> <view class="flex-item">1</view> <view class="flex-item">2</view> <view class="flex-item">3</view> </view> </template> <style> .flex-container { display: flex; /* 启用弹性布局 */ justify-content: space-around; /* 子项在主轴上的分布方式 */ align-items: center; /* 子项在交叉轴上的对齐方式 */ } .flex-item { width: 50px; /* 子项宽度 */ height: 50px; /* 子项高度 */ background-color: #409eff; /* 背景颜色 */ margin: 10px; /* 子项外边距 */ } </style> ``` 在这个例子中,`.flex-container` 是启用弹性布局的容器,它里面的 `.flex-item` 是弹性项目。我们设置了容器的主轴对齐方式、交叉轴对齐方式和子项的宽度、高度、外边距等属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值