BlueToothDemo:如何利用uni-app开发的手机app连接ble蓝牙模块源代码

<template> <view class="content"> <!-- 实现蓝牙功能区 --> <u-row> <u-col span=12> <u-button type="success" @click="openBluetoothAdapter">开始扫描(初始化蓝牙)</u-button><br /> </u-col> </u-row> <u-row> <u-col span=12> <u-button type="warning" @click="stopBluetoothDevicesDiscovery" >停止扫描(停止蓝牙搜索)</u-button><br /> </u-col> </u-row> <u-row> <u-col span=12> <u-button type="error" @click="closeBluetoothAdapter">结束流程(关闭蓝牙适配器)</u-button><br /> </u-col> </u-row> <u-row> <u-col span=12> <u-button type="primary" :disabled='myTemplateKey.length==0' @click="sendStorage">发送数据</u-button><br /> </u-col> </u-row> <!-- 搜索蓝牙设备的对话框 --> <view class="devices_summary" v-if="!connected">已发现 {{ devices.length }} 个外围设备：</view> <scroll-view v-if="!connected" class="device_list" scroll-y scroll-with-animation> <view v-for="(item, index) in devices" :key="index" :data-device-id="item.deviceId" :data-name="item.name || item.localName" @click="createBLEConnection($event)" class="device_item" hover-class="device_item_hover" > <view style="font-size: 16px; color: #333">{{ item.name }}</view> <view style="font-size: 10px">信号强度: {{ item.RSSI }}dBm ({{ myMax(0, item.RSSI + 100)}}%) </view> <view style="font-size: 10px">UUID: {{ item.deviceId }}</view> <view style="font-size: 10px">Service数量: {{ myLen(item.advertisServiceUUIDs) }}</view> </view> </scroll-view> <!-- 接收蓝牙模块传入数据的对话框 --> <view class="devices_summary" v-if="connected"> <u-row > <u-col span='3'> <view> <u-button @click="saveGroup">保存本组</u-button> </view> </u-col> <u-col span='3'> <view> <u-button @click="saveStorage">保存本次</u-button> </view> </u-col> <u-col span='3'> <view> <u-button @click="clearLocalStorage">清空本地</u-button> </view> </u-col> <u-col span='3'> <view> <u-button @click="myDataMeasure=[]">清空接收栏</u-button> </view> </u-col> </u-row> <u-row> <u-col span='3'> <view>接收数据:</view> </u-col> </u-row> </view> <scroll-view v-if="connected" class="device_list" scroll-y scroll-with-animation> <view v-for="item,index in myDataMeasure" :key="index"> {{item}} </view> </scroll-view> <!-- 显示连接对话框 --> <view class="connected_info" v-if="connected"> <view> <text>已连接到 {{ deviceName }}</text> <view class="operation"> <button size="mini" @click="hideShowInfo" >{{infoShowHideButton}}</button> <button v-if="canWrite" size="mini" @click="writeBLECharacteristicValue" >写数据</button> <button size="mini" @click="closeBLEConnection">断开连接</button> </view> </view> <view v-show="infoShowHide" v-for="(item, index) in chs" :key="index" style="font-size: 12px; margin-top: 10px"> <view>特性UUID: {{ item.uuid }}</view> <view>接收特性值(当前): {{ item.value }}</view> </view> <view v-show="infoShowHide" v-if="canWrite"> <u-input type='number' v-model="sendData"></u-input> </view> </view> </view> </template> <script> import { fail } from 'assert'; export default { data() { return { //设备id deviceId:'', //服务id，这里根据自己的设备写死 serviceId:'0000FFE0-8888-1000-8000-0088888888888', //特征值id-----这里根据自己的设备写死 characteristicId:'0000FFE1-8888-1000-8000-88888888', //设备名称 deviceName:'', //存放蓝牙设备数组 devices: [], //查看是否连接 connected: false, //存储当前连接状态，里面的value就是手机接收的值 chs: [], //记录电脑向手机传递的数据 myDataMeasure:[], //查询蓝牙适配器的开始时间 _discoveryStarted: false, //是否可写 canWrite:false, //要发送的数据 sendData:'', //下部信息条的显示与隐藏(默认显示) infoShowHide:true, //隐藏和打开按钮的字 infoShowHideButton:'隐藏', //用户对设备设置的基本参数 myData:{}, //临时存储仪器传输的数据以及基本设置信息 myMeatureDataPhone:[], //存放数据的key，等待网络好的时候通过key传递数据到服务器 myTemplateKey:[], //记录存储数据的时间 timeNow:'' }; }, created() { //进入后刷新 //uni.startPullDownRefresh(); }, onPullDownRefresh() { setTimeout(() => { console.log('VUEX数据',this.$store.state.myDataGlobal); console.log('VUEX数据时间间隔',this.$store.state.myDataGlobal.myInterval); console.log('实际蓝牙数据',this.myData); console.log('实际蓝牙输入框数据',this.sendData); uni.showToast({ title:'参数更新成功' }); uni.stopPullDownRefresh(); }, 1000); }, watch:{ '$store.state.myDataGlobal':{ deep:true, immediate:true, handler(){ //监听vuex数据变化，一旦变化及时取数据 this.myData=this.$store.state.myDataGlobal; //获取的第一个数据就是时间间隔，后两个数据就是获取的数量（目前是不能超过99组，到时候可以考虑设置时间间隔，分开发送这两个数据） this.sendData=((Number(this.myData.myInterval))*10).toString()+this.myData.myNumber } } }, mounted(){ }, methods: { //发送存储中数据 sendStorage(){ uni.showLoading({ title:'数据发送中...' }); uni.getStorage({ key:'mykey', success:(res)=>{ this.myTemplateKey=res.data console.log('这是来自手机内存中的key',this.myTemplateKey); }, fail:()=>{ console.log('key不存在，无法发送'); this.myTemplateKey=[]; return; } }); //查询key console.log('数据存储的key：',this.myTemplateKey); for(let i=0;i<this.myTemplateKey.length;i++) { console.log(`第${i}个:`,i) //打印storage中的文件 uni.getStorage({ key: this.myTemplateKey[i],//前后两次存的文件也都能找得到 success: (res)=> { console.log(`打印存储在storage中${i}的数据`,res.data); }, fail:()=>{ console.log('该数据不存在'); } }); } //隐藏显示内容 setTimeout(() => { uni.hideLoading(); uni.showToast({ title:'查询并发送成功' }) }, 1000); }, //为了去除重复的 inArray(arr, key, val) { for (let i = 0; i < arr.length; i++) { if (arr[i][key] === val) { return i; } } return -1; }, //清空本地存储 clearLocalStorage(){ uni.showModal({ title:'警告', content:'确认删除本地数据?请确认数据已及时发送', success: function (res) { if (res.confirm) { uni.clearStorage(); uni.showToast({ title:'本地数据已清空' }); } else if (res.cancel) { console.log('用户点击取消'); return; } } }); }, //将本次接受的数据保存 saveStorage(){ //先向数组中添加基本的设置信息 let date=new Date(); this.timeNow=date.getFullYear()+'-'+date.getMonth()+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds(); this.myMeatureDataPhone.push(this.timeNow); this.myMeatureDataPhone.push(this.myData.myInterval); this.myMeatureDataPhone.push(this.myData.myHomeStation); this.myMeatureDataPhone.push(this.myData.myOppositeStation); //将接收数据的数组进行合并 this.myMeatureDataPhone=this.myMeatureDataPhone.concat(this.myDataMeasure); //查看新数组 console.log('设置参数及数据数组内容：',this.myMeatureDataPhone); //查看本次的key console.log('本次的key:',this.myTemplateKey); //存储到本地storage中，并将key存到数组中，便于将来将数据获取后传递到服务