话不多说直接上代码,我这里没有蓝牙协议,直接询问蓝牙硬件工程师的解码方式。并且也涉及到一个大小端的问题,我这里是项目需要。
<template>
<view>
<page-head :title="title"></page-head>
<!-- 心电图显示区 -->
<view class="displayarea">
心电图显示区
</view>
<!-- <view style="background-color: red;">心率:{{heartRateData[heartRateData.length-1]}}</view> -->
<canvas canvas-id="waveform" id="waveform" style="width: 500px; height: 400px; margin: 0 auto;"></canvas>
<view class="uni-padding-wrap uni-common-mt">
<!-- button class="heartrate">心率</button> -->
<view class="uni-btn-v">
<button type="primary" :disabled="disabled[0]" @click="openBluetoothAdapter">
初始化蓝牙模块
</button>
<view v-if="!adapterState.available">
{{ '蓝牙适配器不可用,请初始化蓝牙模块' }}
</view>
<button type="primary" :loading="searchLoad" :disabled="disabled[1]"
@click="startBluetoothDevicesDiscovery">
开始搜索蓝牙设备
</button>
<button type="primary" :disabled="disabled[2]" @click="stopBluetoothDevicesDiscovery(false)">
停止搜索蓝牙设备
</button>
<button type="primary" :loading="newDeviceLoad" :disabled="disabled[3]" @click="queryDevices">
选择设备
</button>
<view v-if="equipment.length > 0">
{{
(connected ? '已连接设备' : '已选择设备') +
' : ' +
equipment[0].name +
' (' +
equipment[0].deviceId +
')'
}}
</view>
<button type="primary" :disabled="disabled[4]" @click="createBLEConnection">
连接蓝牙设备
</button>
<button type="primary" :disabled="disabled[5]" @click="getBLEDeviceServices">
选择设备服务
</button>
<view v-if="servicesData.length > 0">已选服务uuid:{{ servicesData[0].uuid }}</view>
<button type="primary" :disabled="disabled[6]" @click="getBLEDeviceCharacteristics">
获取服务的特征值
</button>
<view v-if="characteristicsData.length > 0">
<view class="uni-list_name">uuid:{{ characteristicsData[0].uuid }}</view>
<view class="uni-list_item">
是否支持 read 操作:{{ characteristicsData[0].properties.read }}
</view>
<view class="uni-list_item">
是否支持 write 操作:{{ characteristicsData[0].properties.write }}
</view>
<view class="uni-list_item">
是否支持 notify 操作:{{ characteristicsData[0].properties.notify }}
</view>
<view class="uni-list_item">
是否支持 indicate 操作:{{ characteristicsData[0].properties.indicate }}
</view>
</view class="uni-list_item">
<button type="primary" :disabled="disabled[7]" @click="readBLECharacteristicValue">
读取特征值数据
</button>
<view>
<!-- <view v-if="valueChangeData.serviceId"> -->
<view class="list-name"></view>
<text>特征值最新的值:{{ valueChangeData|| '还没有最新值' }}</text>
<!-- </view> -->
</view>
<button type="primary" @click="notifyBLECharacteristicValueChange">启用NOTIFY</button>
<!-- <view>
读取NOTIFY返回mac地址:{{macAddress}}
</view>
<view>
读取NOTIFY返回数据:{{macValue}}
</view> -->
<!-- <button type="primary" :disabled="disabled[8]" @click="w">写入特征值数据</button> -->
<button type="primary" :disabled="disabled[9]" @click="closeBLEConnection">
断开蓝牙设备
</button>
<button type="primary" :disabled="disabled[10]" @click="closeBluetoothAdapter">
关闭蓝牙模块
</button>
</view>
</view>
<!-- 遮罩 -->
<view v-if="maskShow" class="uni-mask" @touchmove.stop.prevent="moveHandle" @click="maskclose">
<scroll-view class="uni-scroll_box" scroll-y @touchmove.stop.prevent="moveHandle" @click.stop="moveHandle">
<view class="uni-title">
已经发现{{ list.length }}{{ showMaskType === 'device' ? '台设备' : '个服务' }}:
</view>
<view class="uni-list-box" v-for="(item, index) in list" :key="index" @click="tapQuery(item)">
<view v-if="showMaskType === 'device'">
<view class="uni-list_name">{{ item.name || item.localName }}</view>
<view class="uni-list_item">信号强度:{{ item.RSSI }}dBm</view>
<view class="uni-list_item">UUID:{{ item.deviceId }}</view>
<view class="list-item" v-if="showMaskType === 'device'">
Service数量:{{ item.advertisServiceUUIDs.length }}
</view>
</view>
<view v-if="showMaskType === 'service'">
<view class="uni-list_item" style="line-height:2.2;">
UUID: {{ item.uuid }}
<text v-if="showMaskType === 'service'">
{{ item.isPrimary ? '(主服务)' : '' }}
</text>
</view>
</view>
<view v-if="showMaskType === 'characteristics'">
<view class="uni-list_name">uuid:{{ item.uuid }}</view>
<view class="uni-list_item">是否支持 read 操作:{{ item.properties.read }}</view>
<view class="uni-list_item">
是否支持 write 操作:{{ item.properties.write }}
</view>
<view class="uni-list_item">
是否支持 notify 操作:{{ item.properties.notify }}
</view>
<view class="uni-list_item">
是否支持 indicate 操作:{{ item.properties.indicate }}
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
let num =0;
let timer=null;
export default {
data() {
return {
title: 'bluetooth',
disabled: [false, true, true, true, true, true, true, true, true, true, true],
newDeviceLoad: false,
searchLoad: false,
maskShow: false,
equipment: [],
adapterState: {
discovering: false,
available: false
},
connected: false,
showMaskType: 'device',
servicesData: [],
characteristicsData: [],
valueChangeData: '',
isStop: true,
list: [],
macAddress: "",
macValue: '',
extraLine: [],
heartRateData: []
};
},
onLoad() {
this.onBLEConnectionStateChange();
const ctx = uni.createCanvasContext('waveform', this);
timer = setInterval(()=>{
if(this.heartRateData.length){
this.drawLine(ctx,this.heartRateData)
}
},50)
},
beforeDestroy() {
clearInterval(timer);
timer = null;
},
methods: {
moveHandle() {},
/**
* 关闭遮罩*/
maskclose() {
this.maskShow = false;
},
/**
* 选择设备*/
queryDevices() {
// this.newDeviceLoad = true;
this.showMaskType = 'device';
this.maskShow = true;
},
tapQuery(item) {
if (this.showMaskType === 'device') {
this.$set(this.disabled, 4, false);
if (this.equipment.length > 0) {
this.equipment[0] = item;
} else {
this.equipment.push(item);
}
this.newDeviceLoad = false;
}
if (this.showMaskType === 'service') {
this.$set(this.disabled, 6, false);
if (this.servicesData.length > 0) {
this.servicesData[0] = item;
} else {
this.servicesData.push(item);
}
}
if (this.showMaskType === 'characteristics') {
this.$set(this.disabled, 7, false);
if (this.characteristicsData.length > 0) {
this.characteristicsData[0] = item;
} else {
this.characteristicsData.push(item);
}
}
this.maskShow = false;
},
/**
* 初始化蓝牙设备 */
openBluetoothAdapter() {
uni.openBluetoothAdapter({
success: e => {
console.log('初始化蓝牙成功:' + e.errMsg);
console.log(JSON.stringify(e));
this.isStop = false;
this.$set(this.disabled, 0, true);
this.$set(this.disabled, 1, false);
this.$set(this.disabled, 10, false);
this.getBluetoothAdapterState();
},
fail: e => {
console.log(e)
console.log('初始化蓝牙失败,错误码:' + (e.errCode || e.errMsg));
if (e.errCode !== 0) {
initTypes(e.errCode, e.errMsg);
}
}
});
},
/**
* 开始搜索蓝牙设备*/
startBluetoothDevicesDiscovery() {
uni.startBluetoothDevicesDiscovery({
success: e => {
console.log('开始搜索蓝牙设备:' + e.errMsg);
this.searchLoad = true;
this.$set(this.disabled, 1, true);
this.$set(this.disabled, 2, false);
this.$set(this.disabled, 3, false);
this.onBluetoothDeviceFound();
},
fail: e => {
console.log('搜索蓝牙设备失败,错误码:' + e.errCode);
if (e.errCode !== 0) {
initTypes(e.errCode);
}
}
});
},
/**
* 停止搜索蓝牙设备*/
stopBluetoothDevicesDiscovery(types) {
uni.stopBluetoothDevicesDiscovery({
success: e => {
console.log('停止搜索蓝牙设备:' + e.errMsg);
if (types) {
this.$set(this.disabled, 1, true);
} else {
this.$set(this.disabled, 1, false);
}
this.$set(this.disabled, 2, true);
// this.$set(this.disabled, 3, true);
this.searchLoad = false;
},
fail: e => {
console.log('停止搜索蓝牙设备失败,错误码:' + e.errCode);
if (e.errCode !== 0) {
initTypes(e.errCode);
}
}
});
},
/**
* 发现外围设备*/
onBluetoothDeviceFound() {
uni.onBluetoothDeviceFound(devices => {
console.log('开始监听寻找到新设备的事件');
// this.$set(this.disabled, 3, false);
this.getBluetoothDevices();
});
},
/**
* 获取在蓝牙模块生效期间所有已发现的蓝牙设备。包括已经和本机处于连接状态的设备。*/
getBluetoothDevices() {
uni.getBluetoothDevices({
success: res => {
this.newDeviceLoad = false;
console.log('获取蓝牙设备成功:' + res.errMsg, res);
// console.log(JSON.stringify(res))
this.list = res.devices;
},
fail: e => {
console.log('获取蓝牙设备错误,错误码:' + e.errCode);
if (e.errCode !== 0) {
initTypes(e.errCode);
}
}
});
},
/**
* 获取本机蓝牙适配器状态*/
getBluetoothAdapterState() {
console.log('--->');
uni.getBluetoothAdapterState({
success: res => {
console.log(JSON.stringify(res));
this.adapterState = res;
},
fail: e => {
console.log('获取本机蓝牙适配器状态失败,错误码:' + e.errCode);
if (e.errCode !== 0) {
initTypes(e.errCode);
}
}
});
},
/**
* 连接低功耗蓝牙*/
createBLEConnection() {
let deviceId = this.equipment[0].deviceId;
uni.showToast({
title: '连接蓝牙...',
icon: 'loading',
duration: 99999
});
uni.createBLEConnection({
// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
deviceId,
success: res => {
console.log(res);
console.log('连接蓝牙成功:' + res.errMsg);
// 连接设备后断开搜索 并且不能搜索设备
this.stopBluetoothDevicesDiscovery(true);
uni.hideToast();
uni.showToast({
title: '连接成功',
icon: 'success',
duration: 2000
});
this.$set(this.disabled, 3, true);
this.$set(this.disabled, 4, true);
this.$set(this.disabled, 5, false);
this.$set(this.disabled, 9, false);
this.connected = true;
},
fail: e => {
console.log('连接低功耗蓝牙失败,错误码:' + e.errCode);
if (e.errCode !== 0) {
initTypes(e.errCode);
}
}
});
},
/**
* 断开与低功耗蓝牙设备的连接*/
closeBLEConnection() {
let deviceId = this.equipment[0].deviceId;
uni.closeBLEConnection({
deviceId,
success: res => {
console.log(res);
console.log('断开低功耗蓝牙成功:' + res.errMsg);
this.$set(this.disabled, 1, false);
this.$set(this.disabled, 3, true);
this.$set(this.disabled, 4, true);
this.$set(this.disabled, 5, true);
this.$set(this.disabled, 6, true);
this.$set(this.disabled, 7, true);
this.$set(this.disabled, 8, true);
this.$set(this.disabled, 9, true);
this.equipment = [];
this.servicesData = [];
this.characteristicsData = [];
},
fail: e => {
console.log('断开低功耗蓝牙成功,错误码:' + e.errCode);
if (e.errCode !== 0) {
initTypes(e.errCode);
}
}
});
},
/**
* 获取所有服务 */
getBLEDeviceServices() {
let deviceId = this.equipment[0].deviceId;
console.log('获取所有服务的 uuid:' + deviceId);
setTimeout(() => {
uni.getBLEDeviceServices({
// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
deviceId,
success: res => {
console.log(JSON.stringify(res.services));
console.log('获取设备服务成功:' + res.errMsg);
this.$set(this.disabled, 7, true);
this.$set(this.disabled, 8, true);
this.showMaskType = 'service';
this.list = res.services;
this.characteristicsData = [];
if (this.list.length <= 0) {
toast('获取服务失败,请重试!');
return;
}
this.maskShow = true;
},
fail: e => {
console.log('获取设备服务失败,错误码:' + e.errCode);
if (e.errCode !== 0) {
initTypes(e.errCode);
}
}
});
}, 0)
},
/**
* 获取某个服务下的所有特征值*/
getBLEDeviceCharacteristics() {
let deviceId = this.equipment[0].deviceId;
let serviceId = this.servicesData[0].uuid;
console.log(deviceId);
console.log(serviceId);
setTimeout(() => {
uni.getBLEDeviceCharacteristics({
// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
deviceId,
// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
serviceId,
success: res => {
console.log(JSON.stringify(res));
console.log('获取特征值成功:' + res.errMsg);
this.$set(this.disabled, 7, true);
this.valueChangeData = {};
this.showMaskType = 'characteristics';
this.list = res.characteristics;
if (this.list.length <= 0) {
toast('获取特征值失败,请重试!');
return;
}
this.maskShow = true;
},
fail: e => {
console.log('获取特征值失败,错误码:' + e.errCode);
if (e.errCode !== 0) {
initTypes(e.errCode);
}
}
});
}, 0)
},
/**
* 监听低功耗蓝牙连接状态的改变事件。包括开发者主动连接或断开连接,设备丢失,连接异常断开等等 */
onBLEConnectionStateChange() {
uni.onBLEConnectionStateChange(res => {
// 该方法回调中可以用于处理连接意外断开等异常情况
console.log(`蓝牙连接状态 -------------------------->`);
console.log(JSON.stringify(res));
if (!res.connected) {
if (this.isStop) return;
console.log('断开低功耗蓝牙成功:');
this.$set(this.disabled, 1, false);
this.$set(this.disabled, 3, true);
this.$set(this.disabled, 4, true);
this.$set(this.disabled, 5, true);
this.$set(this.disabled, 6, true);
this.$set(this.disabled, 7, true);
this.$set(this.disabled, 8, true);
this.$set(this.disabled, 9, true);
this.searchLoad = false;
this.equipment = [];
this.servicesData = [];
this.characteristicsData = [];
this.valueChangeData = {};
toast('已经断开当前蓝牙连接');
}
});
},
/**
* 订阅操作成功后需要设备主动更新特征值的 value,才会触发 uni.onBLECharacteristicValueChange 回调。 */
notifyBLECharacteristicValueChange() {
let deviceId = this.equipment[0].deviceId;
let serviceId = this.servicesData[0].uuid;
let characteristicId = this.characteristicsData[0].uuid;
let notify = this.characteristicsData[0].properties.notify;
console.log(deviceId);
console.log(serviceId);
console.log(characteristicId);
console.log(notify);
uni.notifyBLECharacteristicValueChange({
state: true, // 启用 notify 功能
// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
deviceId,
// 这里的 serviceId 需要在 getBLEDeviceS ervices 接口中获取
serviceId,
// 这里的 characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取
characteristicId,
success: (res) => {
console.log('notifyBLECharacteristicValueChange success:' + res.errMsg);
console.log(JSON.stringify(res));
this.onBLECharacteristicValueChange(this.deviceId);
},
fail: (res) => {
console.log('notifyBLECharacteristicValueChange success', res.errMsg);
this.onBLECharacteristicValueChange(this.deviceId);
},
});
},
ab2hex(buffer) {
const hexArr = Array.prototype.map.call(
new Uint8Array(buffer),
function(bit) {
return ('00' + bit.toString(16)).slice(-2)
}
)
return hexArr.join('')
},
drawLine(ctx){
// num++;
// console.log("----------------num",num)
// const y = (Number(unit8Array[0]) + (Number(unit8Array[1])<<8) + (Number(unit8Array[2])<<16) + (Number(unit8Array[3])<<24));
// console.log("----",y);
// // console.log("ctx: ", ctx);
// console.log("that.heartRateDat: ", heartRate);
// 绘制波形图
const width = 600;
const height = 600;
// 设置波形图样式
ctx.setStrokeStyle('#F79A18');
ctx.setLineWidth(3);
ctx.setLineCap("round")
ctx.clearRect(0, 0, width, height);
// 清除Canvas并绘制新的波形图
ctx.beginPath();
ctx.moveTo(-10, 0); // 将起点移动到Canvas的中间位置
// con st y = (Number(unit8Array[0]) + (Number(unit8Array[1])<<8) + (Number(unit8Array[2])<<16) + (Number(unit8Array[3])<<24));
// ctx.lineTo(i, y/260 + 200); // 将数据绘制到Canvas上,放大50倍以适应Canvas高度
// const y = (value[0] + value[1]+(value[2])+ (value[3]))/4;
for (let i = 0; i < this.heartRateData.length; i++) {
const y = (Number(this.heartRateData[i][0]) + (Number(this.heartRateData[i][1]) << 8) + (Number(this.heartRateData[i][2]) << 16) + (Number(
this.heartRateData[i][3]) << 24));
// console.log("----",value, y / 285);
// const x = i; // 根据动画进度添加弧度
ctx.lineTo(i*5, -y / 260 + 250); // 将数据绘制 n 到Canvas上,放大50倍以适应Canvas高度
}
ctx.stroke();
ctx.draw();
},
/**
* 监听低功耗蓝牙设备的特征值变化事件。必须先启用 notifyBLECharacteristicValueChange 接口才能接收到设备推送的 notification。 */
onBLECharacteristicValueChange() {
let that = this
// 必须在这里的回调才能获取
uni.onBLECharacteristicValueChange((res) => {
console.log('监听低功耗蓝牙设备的特征值变化事件成功');
console.log(
`characteristic ${res.characteristicId} has changed, now is ${JSON.stringify(res)}`);
// console.log("res.value====",res.value.toString());
// console.log(this.ab2hex(res.value));
// const buffer = res.value
// console.log(JSON.stringify(res));
const unit8Array = new Uint8Array(res.value);
// console.log("unit8Array: ", unit8Array);
// 获取canvas绘图上下文
// let heartRate = that.heartRateData;
if (this.heartRateData.length >=100) {
this.heartRateData.shift();
}
this.heartRateData.push(unit8Array);
// that.heartRateData = heartRate;
console.log("----heartRate",this.heartRateData)
console.log("length",this.heartRateData.length)
this.macAddress = res.deviceId;
this.macValue = this.ab2hex(res.value);
this.valueChangeData.value = this.ab2hex(res.value);
this.extraLine.push(this.macValue);
this.valueChangeData = this.extraLine.join(' \n ');
});
},
/**
* 读取低功耗蓝牙设备的特征值的二进制数据值。注意:必须设备的特征值支持 read 才可以成功调用 */
readBLECharacteristicValue() {
let deviceId = this.equipment[0].deviceId;
let serviceId = this.servicesData[0].uuid;
let characteristicId = this.characteristicsData[0].uuid;
console.log("deviceId=>", deviceId);
console.log("serviceId=>", serviceId);
console.log('characteristicId=>', characteristicId);
uni.readBLECharacteristicValue({
// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
deviceId,
// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
serviceId,
// 这里的 characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取
characteristicId,
success: (res) => {
console.log('读取设备数据值成功');
console.log(JSON.stringify(res));
//this.notifyBLECharacteristicValueChange();
this.onBLECharacteristicValueChange(this.deviceId);
},
fail: (res) => {
console.log('读取设备数据值失败,错误码:' + e.errCode);
if (e.errCode !== 0) {
initTypes(e.errCode);
}
this.onBLECharacteristicValueChange(this.deviceId);
}
});
//this.onBLECharacteristicValueChange();
},
/**
* 断开蓝牙模块 */
closeBluetoothAdapter(OBJECT) {
uni.closeBluetoothAdapter({
success: res => {
console.log('断开蓝牙模块成功');
this.isStop = true;
this.$set(this.disabled, 0, false);
this.$set(this.disabled, 1, true);
this.$set(this.disabled, 2, true);
this.$set(this.disabled, 3, true);
this.$set(this.disabled, 4, true);
this.$set(this.disabled, 5, true);
this.$set(this.disabled, 6, true);
this.$set(this.disabled, 7, true);
this.$set(this.disabled, 8, true);
this.$set(this.disabled, 9, true);
this.$set(this.disabled, 10, true);
this.equipment = [];
this.servicesData = [];
this.characteristicsData = [];
this.valueChangeData = {};
this.adapterState = [];
this.searchLoad = false;
toast('断开蓝牙模块');
}
});
}
}
};
/**
* 判断初始化蓝牙状态*/
function initTypes(code, errMsg) {
switch (code) {
case 10000:
toast('未初始化蓝牙适配器');
break;
case 10001:
toast('未检测到蓝牙,请打开蓝牙重试!');
break;
case 10002:
toast('没有找到指定设备');
break;
case 10003:
toast('连接失败');
break;
case 10004:
toast('没有找到指定服务');
break;
case 10005:
toast('没有找到指定特征值');
break;
case 10006:
toast('当前连接已断开');
break;
case 10007:
toast('当前特征值不支持此操作');
break;
case 10008:
toast('其余所有系统上报的异常');
break;
case 10009:
toast('Android 系统特有,系统版本低于 4.3 不支持 BLE');
break;
default:
toast(errMsg);
}
}
/**
* 弹出框封装 */
function toast(content, showCancel = false) {
uni.showModal({
title: '提示',
content,
showCancel
});
}
</script>
<style>
.uni-title {
/* width: 100%; */
/* height: 80rpx; */
text-align: center;
}
.displayarea{
}
.uni-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
display: flex;
align-items: center;
width: 100%;
background: rgba(0, 0, 0, 0.6);
padding: 0 30rpx;
box-sizing: border-box;
}
.uni-scroll_box {
height: 70%;
background: #fff;
border-radius: 20rpx;
}
.uni-list-box {
margin: 0 20rpx;
padding: 15rpx 0;
border-bottom: 1px #f5f5f5 solid;
box-sizing: border-box;
}
.uni-list:last-child {
border: none;
}
.uni-list_name {
font-size: 30rpx;
color: #333;
white-space: pre-wrap;
}
.uni-list_item {
font-size: 24rpx;
color: #555;
line-height: 1.5;
}
.uni-success_box {
position: absolute;
left: 0;
bottom: 0;
min-height: 100rpx;
width: 100%;
background: #fff;
box-sizing: border-box;
border-top: 1px #eee solid;
}
.uni-success_sub {
/* width: 100%%; */
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
}
.uni-close_button {
padding: 0 20rpx;
height: 60rpx;
line-height: 60rpx;
background: #ce3c39;
color: #ffffff;
border-radius: 10rpx;
}
.uni-success_content {
height: 600rpx;
margin: 30rpx;
margin-top: 0;
border: 1px #eee solid;
padding: 30rpx;
}
.uni-content_list {
padding-bottom: 10rpx;
border-bottom: 1px #f5f5f5 solid;
}
.uni-tips {
text-align: center;
font-size: 24rpx;
color: #666;
}
.heartrate{
width: 200rpx;
height: 150rpx;
line-height: 150rpx;
background-color: #ce3c39;
border: 0;
color: #fff;
}
</style>