uni-app开发蓝牙ble智能设备

最近需要开发一个APP通过蓝牙配置esp32c3的一些参数的项目，之前也接触过移动端开发，所以这次选择uniapp来实现这个项目。

参考资料： uniapp官方文档：https://uniapp.dcloud.io/README

一. 新建工程

我使用的是HBuilder编辑器，新建工程的话按照官方文档中的新建一个uni ui项目模板的工程。

二. 替换工程的代码

将工程文件下的page/index/index.vue替换为下面的代码。

<template>
	<view>
		<button type="primary" @click="startBluetoothDeviceDiscovery">搜索蓝牙</button>
		<button type="primary" @click="onBluetoothDeviceFound">发现外围设备</button>
		<button type="primary" @click="getBluetoothDevices">获取蓝牙设备信息</button>
		<button type="primary" @click="getBLEDeviceServices">获取蓝牙所有服务</button>
		<button type="primary" @click="getBLEDeviceCharacteristics">进入特征</button>
		<view v-for="(item, index) in list" :key="index">
			{{ item.name }}:{{ item.deviceId }}
			<button type="primary" @click="createBLEConnection(item.deviceId)">连接</button>
		</view>
		<button type="primary" @click="writeBLECharacteristicValue">写入蓝牙</button>
		<button type="primary" @click="stopBluetoothDevicesDiscovery">停止搜索蓝牙</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				deviceId:'',
				serviceId:'',
				characteristics:[],
				characteristicId:'',
			}
		},
		onShow(){
			uni.openBluetoothAdapter({
				success:(res)=> { //已打开
					uni.getBluetoothAdapterState({//蓝牙的匹配状态
						success:(res1)=>{
							console.log(res1,'本机设备的蓝牙已打开')
							// 开始搜索蓝牙设备
							this.startBluetoothDeviceDiscovery()
						},
						fail(error) {
							uni.showToast({icon:'none',title: '查看手机蓝牙是否打开'});
						}
					});
					
				},
				fail:err=>{ //未打开 
					uni.showToast({icon:'none',title: '查看手机蓝牙是否打开'});
				}
			})
		},
		methods: {
			// 开始搜索蓝牙设备
			startBluetoothDeviceDiscovery(){
				uni.startBluetoothDevicesDiscovery({
					success: (res) => {
						console.log('startBluetoothDevicesDiscovery success', res)
						// 发现外围设备
						this.onBluetoothDeviceFound()
					},fail:err=>{
						console.log(err,'错误信息')
					}
				})
			},
			// 发现外围设备
			onBluetoothDeviceFound() {
				uni.onBluetoothDeviceFound((res) => {
					console.log(JSON.stringify(res.devices))
					// if(res.devices[0].name == "ESP_SPP_SERVER"){
						if(this.list.indexOf(res.devices[0].deviceId)==-1){
							this.list.push({
								name:res.devices[0].name,
								deviceId:res.devices[0].deviceId
							})
						}
					// }
				})
			},
			//获取在蓝牙模块生效期间所有已发现的蓝牙设备。包括已经和本机处于连接状态的设备。
			getBluetoothDevices() {
				console.log("获取蓝牙设备");
				uni.getBluetoothDevices({
					success: res => {
						console.log('获取蓝牙设备成功:');
						console.log(res.devices);
					}
				});
			},
			//选择设备连接吧deviceId传进来
			createBLEConnection(deviceId){
				//data里面建立一个deviceId，存储起来
				this.deviceId = deviceId,
				//连接蓝牙
				uni.createBLEConnection({
				// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
				  deviceId:this.deviceId,
				  success(res) {
					console.log(res)
					console.log("蓝牙连接成功")
				  },fail(res) {
					console.log("蓝牙连接失败",res)
				  }
				})
			},
			// 停止搜寻蓝牙设备
			stopBluetoothDevicesDiscovery(){
				uni.stopBluetoothDevicesDiscovery({
					success: e => {
						this.loading = false
						console.log('停止搜索蓝牙设备:' + e.errMsg);
					},
					fail: e => {
						console.log('停止搜索蓝牙设备失败，错误码：' + e.errCode);
					}
				});
			},
			//获取蓝牙特征
			getBLEDeviceCharacteristics(){
				console.log("进入特征");
				setTimeout(()=>{
					uni.getBLEDeviceCharacteristics({
					  // 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
					  deviceId:this.deviceId,
					  // 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
					  serviceId:this.serviceId,
					  success:(res)=>{
						console.log(res,'特征getBLEDeviceCharacteristics')
						this.characteristics = res.characteristics
						console.log(this.characteristics)
						
						res.characteristics.forEach((item)=>{
							if(item.uuid.indexOf("470A") != -1){
								this.characteristicId = item.uuid
								//console.log('characteristicId:', item.uuid)
								//利用传参的形势传给下面的notify，这里的uuid如果都需要用到，就不用做判断了，建议使用setTimeout进行间隔性的调用此方法
								this.notifyBLECharacteristicValueChange(item.uuid)
							}
						})
					  },
					  fail:(res)=>{
						console.log(res)
					  }
					})
				},1000)
			},
			// 启用 notify 功能
			notifyBLECharacteristicValueChange(characteristicId){
				console.log(characteristicId,'characteristicId')
				uni.notifyBLECharacteristicValueChange({
				  state: true, // 启用 notify 功能
				  // 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
				  deviceId:this.deviceId,
				  // 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
				  serviceId:this.serviceId,
				  // 这里的 characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取
				  characteristicId:characteristicId,
				  success:(res)=> {
					console.log(res)
					// console.log(this.characteristicId)
					console.log('notifyBLECharacteristicValueChange success', res.errMsg)
				  },
				  fail:(res)=> {
					console.log('notifyBLECharacteristicValueChange fail', res.errMsg)
				  }
				})
			},
			//获取蓝牙的所有服务
			getBLEDeviceServices(){
				setTimeout(()=>{
					uni.getBLEDeviceServices({
					  // 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
					  deviceId:this.deviceId,
					  success:(res)=>{
						console.log('device services:', res)
						//E95D93AF-251D-470A-A062-FA1922DFA9A8
						//6E400001-B5A3-F393-E0A9-E50E24DCCA9E
						res.services.forEach((item)=>{
							if(item.uuid.indexOf("470A")!=-1){
								this.serviceId = item.uuid;
								console.log(this.serviceId)
								//获取特征
								this.getBLEDeviceCharacteristics()
							}
						})
					  }
					})
				},1000)
			},
			//写入蓝牙
			writeBLECharacteristicValue() {
				let buffer = new ArrayBuffer(1)  
				let dataView = new DataView(buffer)
				dataView.setUint8(0, 0x20)
				uni.writeBLECharacteristicValue({
					deviceId: this.deviceId,
					serviceId: this.serviceId,
					characteristicId: this.characteristicId,
					value:buffer,
					success(res) {
						console.log('writeBLECharacteristicValue success', res.errMsg)
					},
					fail(res) {  
						console.log(JSON.stringify(res))
						console.log(JSON.stringify(buffer))
					}
				})
			},
		}
	}
</script>

<style>
</style>

三. 测试代码

1. 运行代码

因为这是涉及到硬件的app，所以必须要通过真机测试，运行也是在真机下面运行。将usb连接手机和电脑后，开启手机的usb调试模式，再按照下图进行运行和下载。

到了这步后，电脑会给手机按照一个app软件， 这个app就是我们开发的app。调试信息在hbuilder下面显示。

2. 测试数据图

(1). 编辑器后台日志信息

下图为编辑器后台的日志信息， 红色框框内的信息为扫描到的蓝牙信息。

(2). 手机APP界面

由于是demo，所以把扫描到了的蓝牙设备信息全部显示出来了。后期可以在这个基础上做修改。