访客 前提：需要https协议关于win10前端静态项目怎么配置https我会在下一篇中详细介绍
html中定义按钮
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=\,initial-scale=1.0"><title>测试</title><scripttype="text/javascript"src="./js/bluetooth-bulb.js"></script></head><body><buttononclick="clickme()"class="btn">点击</button></body></html>letdevice=awaitnavigator.bluetooth.requestDevice({filters:[{name:'蓝牙设备名称'},//通过名称筛选{services:[0xfeff]},//通过UUID筛选，可以提供完整的蓝牙UUID或简短的16位或32位形式{namePrefix:'名称前缀'},//通过设备名称前缀过滤，如果通过名称前缀过滤的话则必须配置optionalServices注意参数内的大写字母都要改成小写],optionalServices:['0000fff0-XXXX-XXXX-XXXX-00805f9b34fb'],acceptAllDevices:true//设置acceptAllDevices代表查询所有蓝牙设备也是必须配置optionalServices});device.addEventListener('gattserverdisconnected',onDisconnected);//监听设备断开连接letserver=awaitdevice.gatt.connect();letservice=awaitserver.getPrimaryService(0xfff0);//这里需要服务UUID还是可以提供完整的蓝牙UUID或简短的16位或32位形式letservices=awaitserver.getPrimaryServices();//如果如果不清楚服务UUID的话可以先用getPrimaryServices获取服务的UUID当然最简单的是去找公司的硬件工程师问一下不过一般只做硬件工程师之前没有跟全栈这边配合过的话估计他们也不知道该给什么过来letcharacteristics=awaitservice.getCharacteristics();//获取设备所有信息特征值letcharacteristic=awaitservice.getCharacteristic(0xfff4);//这里需要读的特征值UUID还是可以提供完整的蓝牙UUID或简短的16位或32位形式当然最简单的是去找公司的硬件工程师问一下不过一般只做硬件工程师之前没有跟全栈这边配合过的话估计他们也不知道该给什么过来characteristic.startNotifications();//开始监听characteristic.addEventListener('characteristicvaluechanged',e=>{//监听设备端的操作获取到值之后再解析console.log('e.target.value:',ab2hex(e.target.value.buffer));});letunCharacteristic=awaitservice.getCharacteristic(0xfff5);//这里需要写入的特征值UUID还是可以提供完整的蓝牙UUID或简短的16位或32位形式当然最简单的是去找公司的硬件工程师问一下不过一般只做硬件工程师之前没有跟全栈这边配合过的话估计他们也不知道该给什么过来awaitunCharacteristic.writeValue(string2buffer("55AAF001011165F9F10000"))//到这一步就可以写入了这里的命令还是要去找硬件工程师要functiononDisconnected(event){constdevice=event.target;console.log(`设备:${device.name}已经断开连接`);}functionstring2buffer(str){letval="";if(!str)return;letlength=str.length;letindex=0;letarray=[];while(index<length){array.push(str.substring(index,index2));index=index2;}val=array.join(",");//将16进制转化为ArrayBufferreturnnewUint8Array(val.match(/[\da-f]{2}/gi).map(function(h){returnparseInt(h,16);})).buffer}functionab2hex(buffer){consthexArr=Array.prototype.map.call(newUint8Array(buffer),function(bit){return('00'bit.toString(16)).slice(-2);})returnhexArr.join('');}之前有做过小程序连接蓝牙设备或者是ios再或者是安卓连接蓝牙设备的话一定肯定对服务UUID、读UUID、写UUID不陌生
当然大部分人都应该是第一次去做连接蓝牙设备这些值都是需要硬件工程师提供过来的如果你比较幸运公司的硬件工程师懂这些的话那么恭喜你你会很省事的就做完了这些但是你和我一样什么东西都要不到的话就让他们去理解下面参数是什么意思并提供给你只有这些参数都填对了代码才跑的通最起码需要给到广播UUID然后通过getPrimaryServices和getCharacteristics去获取设备的服务UUID以及所有的特征值ID
{deviceName:"CCPC0XXX",//设备名称以下是我们公司的命名每个都是不同的deviceId:"601A8974-XXXX-XXXX-XXXX-AA6ED12A4502",//设备ID谷歌浏览器需要用到的和苹果手机里面获取到的一样硬件那边管他叫mac地址——马克地址他们知道的和安卓手机里面获取到的一样servicesUUID:"0000FFF0-XXXX-XXXX-XXXX-00805F9B34FB",//服务ID对应getPrimaryService中的参数writeUUID:"0000FFF5-XXXX-XXXX-XXXX-00805F9B34FB",//写入IDnotifyUUID:"0000FFF4-XXXX-XXXX-XXXX-00805F9B34FB",//读IDadvertisServiceUUIDs:"0000FEFF-XXXX-XXXX-XXXX-00805F9B34FB"//这个对应过滤中的services应该是广播ID}