关于微信小程序低功耗蓝牙ECharts实时刷新

最近搞了这方面的东西，是刚刚开始接触微信小程序，因为是刚刚开始接触蓝牙设备，所以这篇文章适合既不熟悉小程序，又不熟悉蓝牙的新手看。

项目要求是获取到蓝牙传输过来的数据，并显示成图表实时显示；

我看了很多网上的文章，也鼓捣了很长时间ChatGPT，最后弄出来了，其中出现了很多坑，在这里分享一下；

我想了一下这个文章还是写在CSDN，我知道这个平台有点拉，广告多，但毕竟这个平台普及度高，我希望这篇文章能帮到更多的人，至于什么关注看文章，收费！收NMLGB的费！

首先，微信开发者工具一些简单的配置我就不多说了，先说一些坑的地方；

当我刚刚准备在微信小程序搞蓝牙的是时候，当然是先去翻微信的官方文档，官方文档还是很不错的，给了一个蓝牙项目例子，运行起来很丝滑；

蓝牙 (Bluetooth) | 微信开放文档

在这个文档的最后会有一个代码示例：

我下载下来直接用，可以获取到数据，这个示例里提供了一个16进制显示的函数；

其中获取数据的地方是这里：

getBLEDeviceCharacteristics(deviceId, serviceId) {wx.getBLEDeviceCharacteristics({deviceId,serviceId,success: (res) => {console.log('getBLEDeviceCharacteristics success', res.characteristics)for (let i = 0; i < res.characteristics.length; i++) {let item = res.characteristics[i]if (item.properties.read) {wx.readBLECharacteristicValue({deviceId,serviceId,characteristicId: item.uuid,})}if (item.properties.write) {this.setData({canWrite: true})this._deviceId = deviceIdthis._serviceId = serviceIdthis._characteristicId = item.uuidthis.writeBLECharacteristicValue()}if (item.properties.notify || item.properties.indicate) {wx.notifyBLECharacteristicValueChange({deviceId,serviceId,characteristicId: item.uuid,state: true,})}}},fail(res) {console.error('getBLEDeviceCharacteristics', res)}})// 操作之前先监听，保证第一时间获取数据wx.onBLECharacteristicValueChange((characteristic) => {const idx = inArray(this.data.chs, 'uuid', characteristic.characteristicId)const data = {}if (idx === -1) {data[`chs[${this.data.chs.length}]`] = {uuid: characteristic.characteristicId,// value: ab2hex(characteristic.value)  //转16进制value: toASCII(characteristic.value)}} else {data[`chs[${idx}]`] = {uuid: characteristic.characteristicId,value: toASCII(characteristic.value)}}this.setData(data);// 图表刷新this.Refresh2(dataGenerator(this.data.bleDataList01, this.data.chs[0].value, 50));})},
})

有点长，监听数据变化并获取数据的仅仅是 wx.onBLECharacteristicValueChange((characteristic)这部分；

我发现一个问题，这个示例代码跑真机测试经常经常经常连不上，连的我怀疑人生，这样我Log大法输出的变量和任何报错都看不到！

最后还是新建了一个项目，使用这个示例程序的代码重新写才稳定的连接到手机，诸位如果和我一样，那我们真是难兄难弟……

OK，现在回到重构好的之后的程序。

硬件的蓝牙芯片是沁恒，型号是CH9141，这个是他们官网的下载资源：

搜索 CH9141 - 南京沁恒微电子股份有限公司 (wch.cn)

他们提供了Android的串口助手，在电脑端我用的Windows商店的串口工具：

感觉确实比网上的野鸡串口工具好用。

我的的硬件是低功耗蓝牙，这里连接后会有很多uuid，甚至这些uuid还分组，这是用Android串口工具看到的数据：

左边的uuid才是我要的。

我也不是搞硬件的，只能摸索代码，最后发现是这里：

  getBLEDeviceServices(deviceId) {wx.getBLEDeviceServices({deviceId,success: (res) => {console.log(res);//这里的services[1]就是定位分组的位置this.getBLEDeviceCharacteristics(deviceId, res.services[1].uuid)return}})},

这里我的低功耗蓝牙硬件是有多个服务，然后对应的，我要的服务在这里数组中的位置是1：

可以看一下和上面对的上，然后在这个服务里又有两个uuid，我只要第一个（具体服务具体对应），所以我在第一个代码块那里才会有 this.data.chs[0].value这种写法；

所以对接蓝牙数据的时候各位先打印一下这里的services，然后改成自己需要的uuid。

Refresh2(dataLists) {const chart = this.chart;if (chart) {chart.setOption({series: [{data: dataLists}]});console.log('完成刷新');}},

最开始我按照ECharts官网的小程序代码，把ECharts的初始化代码写在了Page对象外面，这样出现了一个问题，我在Page外部不能使用this来吧我声明好的chart对象保存到Page中；

所以改造了一下写法：

Page({data: {motto: 'Hello World',devices: [],connected: false,chs: [],bleDataList01: [],bleDataList02: [],ec: {onInit: null,},option: option,},onLoad() {this.chart = null; // 保存图表实例this.setData({ec: {onInit: this.initChart}});},initChart(canvas, width, height, dpr) {this.chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // 像素比});canvas.setChart(this.chart);this.chart.setOption(this.data.option);return this.chart;},
})

option是定义在Page外部的ECharts样式变量，所有代码都是写在index.js文件里的，

这样就能保证我在Page内部写ECharts初始化函数，又不用ECharts懒加载了；

最后写一下数据刷新函数，其调用是这样的：

// 图表数据填充
const dataGenerator = (dataList, data, xLength) => {if (data != "") {dataList.push(Number(data));}if (dataList.length === xLength) {dataList.shift()}return dataList;
};//这里的数据刷新是写在Page内部的
Refresh(dataLists) {const chart = this.chart;if (chart) {chart.setOption({series: [{data: dataLists}]});console.log('完成刷新');}},// 图表刷新，在    wx.onBLECharacteristicValueChange中调用，因为是写在Page内部的，所以前面带过this
this.Refresh(dataGenerator(this.data.bleDataList01, this.data.chs[0].value, 50));

整体代码是这样的：

import * as echarts from '../components/ec-canvas/echarts';var option = {title: {text: '蓝牙对接数据图表',left: 'center'},legend: {data: ['测试数据'],top: 50,left: 'center',z: 100},grid: {containLabel: true},tooltip: {show: true,trigger: 'axis'},xAxis: {type: 'category',boundaryGap: true,},yAxis: {x: 'center',type: 'value',},series: [{name: '测试数据',type: 'line',smooth: true,data: []}, ]
};function inArray(arr, key, val) {for (let i = 0; i < arr.length; i++) {if (arr[i][key] === val) {return i;}}return -1;
}// ArrayBuffer转16进度字符串示例
function ab2hex(buffer) {var hexArr = Array.prototype.map.call(new Uint8Array(buffer),function (bit) {return ('00' + bit.toString(16)).slice(-2)})return hexArr.join('');
}function toASCII(buffer) {return String.fromCharCode.apply(null, new Uint8Array(buffer));
};
// 图表数据填充
const dataGenerator = (dataList, data, xLength) => {if (data != "") {dataList.push(Number(data));}if (dataList.length === xLength) {dataList.shift()}return dataList;
};Page({data: {motto: 'Hello World',devices: [],connected: false,chs: [],bleDataList01: [],bleDataList02: [],ec: {onInit: null,},option: option,},onLoad() {this.chart = null; // 保存图表实例this.setData({ec: {onInit: this.initChart}});},Refresh(dataLists) {const chart = this.chart;if (chart) {chart.setOption({series: [{data: dataLists}]});console.log('完成刷新');}},initChart(canvas, width, height, dpr) {this.chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // 像素比});canvas.setChart(this.chart);this.chart.setOption(this.data.option);return this.chart;},openBluetoothAdapter() {wx.openBluetoothAdapter({success: (res) => {console.log('openBluetoothAdapter success', res)this.startBluetoothDevicesDiscovery()},fail: (res) => {if (res.errCode === 10001) {wx.onBluetoothAdapterStateChange(function (res) {console.log('onBluetoothAdapterStateChange', res)if (res.available) {this.startBluetoothDevicesDiscovery()}})}}})},getBluetoothAdapterState() {wx.getBluetoothAdapterState({success: (res) => {console.log('getBluetoothAdapterState', res)if (res.discovering) {this.onBluetoothDeviceFound()} else if (res.available) {this.startBluetoothDevicesDiscovery()}}})},startBluetoothDevicesDiscovery() {if (this._discoveryStarted) {return}this._discoveryStarted = truewx.startBluetoothDevicesDiscovery({allowDuplicatesKey: true,success: (res) => {console.log('startBluetoothDevicesDiscovery success', res)this.onBluetoothDeviceFound()},})},stopBluetoothDevicesDiscovery() {wx.stopBluetoothDevicesDiscovery()},onBluetoothDeviceFound() {wx.onBluetoothDeviceFound((res) => {res.devices.forEach(device => {if (!device.name && !device.localName) {return}const foundDevices = this.data.devicesconst idx = inArray(foundDevices, 'deviceId', device.deviceId)const data = {}if (idx === -1) {data[`devices[${foundDevices.length}]`] = device} else {data[`devices[${idx}]`] = device}this.setData(data)})})},createBLEConnection(e) {const ds = e.currentTarget.datasetconst deviceId = ds.deviceIdconst name = ds.namewx.createBLEConnection({deviceId,success: (res) => {this.setData({connected: true,name,deviceId,})this.getBLEDeviceServices(deviceId)}})this.stopBluetoothDevicesDiscovery()},closeBLEConnection() {wx.closeBLEConnection({deviceId: this.data.deviceId})this.setData({connected: false,chs: [],canWrite: false,bleDataList01: [],bleDataList02: [],});//断开连接的时候清理图表数据if (this.chart) {this.chart.setOption({series: [{data: []}]});}console.log('Bluetooth connection closed and data cleared');},getBLEDeviceServices(deviceId) {wx.getBLEDeviceServices({deviceId,success: (res) => {console.log(res);//这里的services[1]就是定位分组的位置this.getBLEDeviceCharacteristics(deviceId, res.services[1].uuid)return}})},getBLEDeviceCharacteristics(deviceId, serviceId) {wx.getBLEDeviceCharacteristics({deviceId,serviceId,success: (res) => {console.log('getBLEDeviceCharacteristics success', res.characteristics)for (let i = 0; i < res.characteristics.length; i++) {let item = res.characteristics[i]if (item.properties.read) {wx.readBLECharacteristicValue({deviceId,serviceId,characteristicId: item.uuid,})}if (item.properties.write) {this.setData({canWrite: true})this._deviceId = deviceIdthis._serviceId = serviceIdthis._characteristicId = item.uuidthis.writeBLECharacteristicValue()}if (item.properties.notify || item.properties.indicate) {wx.notifyBLECharacteristicValueChange({deviceId,serviceId,characteristicId: item.uuid,state: true,})}}},fail(res) {console.error('getBLEDeviceCharacteristics', res)}})// 操作之前先监听，保证第一时间获取数据wx.onBLECharacteristicValueChange((characteristic) => {const idx = inArray(this.data.chs, 'uuid', characteristic.characteristicId)const data = {}if (idx === -1) {data[`chs[${this.data.chs.length}]`] = {uuid: characteristic.characteristicId,// value: ab2hex(characteristic.value)  //转16进制value: toASCII(characteristic.value)}} else {data[`chs[${idx}]`] = {uuid: characteristic.characteristicId,value: toASCII(characteristic.value)}}this.setData(data);// 图表刷新this.Refresh(dataGenerator(this.data.bleDataList01, this.data.chs[0].value, 50));})},writeBLECharacteristicValue() {// 向蓝牙设备发送一个0x00的16进制数据let buffer = new ArrayBuffer(1)let dataView = new DataView(buffer)dataView.setUint8(0, Math.random() * 255 | 0)wx.writeBLECharacteristicValue({deviceId: this._deviceId,serviceId: this._deviceId,characteristicId: this._characteristicId,value: buffer,})},closeBluetoothAdapter() {wx.closeBluetoothAdapter()this._discoveryStarted = false},
})

再说一下，这些代码都是写在index.js文件里的，

这个是项目代码：GitHub - DingAi/WeChatProject-EchartsBluetooth: 一个微信小程序，用Echarts实时显示蓝牙数据

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/15884.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

转运机器人负载最高可达 1000kg，重复精度高达±5mm

转运机器人负载最高可达 1000kg，重复精度高达±5mm

转运机器人&#xff0c;内部搭载ICD系列核心控制器&#xff0c;拥有不同的移载平台&#xff0c;负载最高可达 1000kg;重复精度高达5mm;支持 Wi-Fi漫游&#xff0c;实现更稳健的网络数据交互;无轨化激光 SLAM 导航&#xff0c;配合 3D 避障相机等多传感器进行安全防护。转运器人…
阅读更多...
租赁系统|北京租赁系统|租赁软件开发流程

租赁系统|北京租赁系统|租赁软件开发流程

在数字化时代的浪潮下&#xff0c;小程序成为了各行各业争相探索的新领域。租赁行业亦不例外&#xff0c;租赁小程序的开发不仅提升了用户体验&#xff0c;更为商家带来了更多商业机会。本文将详细解析租赁小程序的开发流程&#xff0c;为有志于进军小程序领域的租赁行业从业者…
阅读更多...
Kubeblocks系列2-redis尝试之出师未捷身先死

Kubeblocks系列2-redis尝试之出师未捷身先死

背景&#xff1a; 上一节&#xff0c;完成了Kubeblocks系列1-安装。现在就想拿一个简单的应用测试一下kubeblocks这个所谓的神器是否好用&#xff0c;是否可以应用与生产&#xff01; Kubeblocks系列2-redis尝试 参照官方文档&#xff1a;创建并连接到 Redis 集群 确保 Red…
阅读更多...
【教程】Linux部署Android安卓模拟器

【教程】Linux部署Android安卓模拟器

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 未完成&#xff0c; 先简单记录下指令。 docker-android https://github.com/budtmo/docker-android 检查系统是否支持&#xff1a; sudo apt instal…
阅读更多...
【C++】深入解析C++智能指针：从auto_ptr到unique_ptr与shared_ptr

【C++】深入解析C++智能指针：从auto_ptr到unique_ptr与shared_ptr

文章目录 前言&#xff1a;1. 智能指针的使用及原理2. C 98 标准库中的 auto_ptr:3. C 11 中的智能指针循环引用&#xff1a;shared_ptr 定制删除器 4. 内存泄漏总结&#xff1a; 前言&#xff1a; 随着C语言的发展&#xff0c;智能指针作为现代C编程中管理动态分配内存的一种…
阅读更多...
【面试干货】猴子吃桃问题

【面试干货】猴子吃桃问题

【面试干货】猴子吃桃问题 1、实现思想2、代码实现 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 猴子吃桃问题&#xff1a;猴子第一天摘下若干个桃子&#xff0c;当即吃了一半&#xff0c;还不瘾&#xff0c;又多吃了一个 二天早上又将剩…
阅读更多...
牛客小白月赛94 解题报告 | 珂学家 | 茴字有36种写法

牛客小白月赛94 解题报告 | 珂学家 | 茴字有36种写法

前言 很久没写题解了&#xff0c;有幸参加了94小白月赛内测&#xff0c;反馈是很nice&#xff0c;AK场。 争议的焦点在于哪题最难 D题E题(没有F题)F题(没有E题) 你选哪题呢&#xff1f; 题解 欢迎关注 珂朵莉 牛客周赛专栏 珂朵莉 牛客小白月赛专栏 A. 小苯的九宫格 思路…
阅读更多...
手机相册的照片彻底删除了怎么恢复？删除照片恢复的5种方法

手机相册的照片彻底删除了怎么恢复？删除照片恢复的5种方法

在数字化时代&#xff0c;手机相册里装满了我们的生活点滴和珍贵回忆。然而&#xff0c;一不小心就可能误删那些意义非凡的照片。别担心&#xff0c;今天小编就给大家介绍5种恢复误删照片的方法&#xff0c;让你的回忆不再丢失&#xff01; 方法一&#xff1a;相册App的“最近删…
阅读更多...
Docker Compose使用

Docker Compose使用

Docker-Compose是什么 docker建议我们每一个容器中只运行一个服务,因为doker容器本身占用资源极少&#xff0c;所以最好是将每个服务单独分割开来&#xff0c;但是这样我们又面临了一个问题&#xff1a; 如果我需要同时部署好多个服务&#xff0c;难道要每个服务单独写Docker…
阅读更多...
P4097 【模板】李超线段树 / [HEOI2013] Segment 题解

P4097 【模板】李超线段树 / [HEOI2013] Segment 题解

题意 有一个平面直角坐标系&#xff0c;总共 n n n 个操作&#xff0c;每个操作有两种&#xff1a; 给定正整数 x 0 , y 0 , x 1 , y 1 x_0,y_0,x_1,y_1 x0​,y0​,x1​,y1​ 表示一条线段的两个端点。你需要在平面上加入这一条线段&#xff0c;第 i i i 条被插入的线段的标…
阅读更多...
Photoshop插件（UXP）编写过程中，如何更新sp-checkbox的选中状态

Photoshop插件（UXP）编写过程中，如何更新sp-checkbox的选中状态

✨问题说明 sp-checkbox是uxpSpectrum UXP Widgets下的一个小组件&#xff0c;内置样式大概是这样&#xff1a; 那么&#xff0c;如果用js动态的改变选中的状态&#xff0c;应该如何做呢&#xff1f; 如果直接是html来写&#xff1a; <sp-checkbox checked>Checked<…
阅读更多...
特斯拉FSD的「端到端」到底能不能成？

特斯拉FSD的「端到端」到底能不能成？

引言 近年来&#xff0c;特斯拉的全自动驾驶&#xff08;Full Self-Driving&#xff0c;FSD&#xff09;技术备受关注&#xff0c;尤其是其「端到端」的AI软件框架更是引发了广泛讨论。端到端技术到底是一条正确的路径吗&#xff1f;它能否真正实现完全自动驾驶&#xff1f;本…
阅读更多...
Echarts 实现将X轴放在图表顶部并且自动播放展示提示信息内容

Echarts 实现将X轴放在图表顶部并且自动播放展示提示信息内容

文章目录 需求分析效果预览需求 如下图所示，实现柱状图中反转倒着绘制 分析 使用 ECharts 来实现对 Y 轴的倒序排序时，可以通过设置 yAxis 的 inverse 属性为 true 来实现。以下是一个简单的示例，演示了如何使用 ECharts 来创建一个柱状图，并将 Y 轴进行倒序排序：并且…
阅读更多...
前缀和算法：提升编程效率的秘密武器(Java版)

前缀和算法：提升编程效率的秘密武器(Java版)

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人能接…
阅读更多...
代码审计--一道简单的文件包含题目的多种利用方式

代码审计--一道简单的文件包含题目的多种利用方式

NO.1 传统方法 首先来看下代码 <?php error_reporting(0); if(isset($_GET["file"])){include($_GET["file"]); }else{highlight_file(__FILE__);phpinfo(); } ?>看完代码后再来学习学习函数吧&#xff0c;毕竟菜啊&#xff01;&#xff01;&…
阅读更多...
NASA数据集——阿尔法喷气式大气实验甲醛（HCHO）数据

NASA数据集——阿尔法喷气式大气实验甲醛（HCHO）数据

Alpha Jet Atmospheric eXperiment Formaldehyde Data 简介 阿尔法喷气式大气实验甲醛数据 阿尔法喷气式大气实验&#xff08;AJAX&#xff09;是美国国家航空航天局艾姆斯研究中心与 H211, L.L.C. 公司的合作项目&#xff0c;旨在促进对加利福尼亚、内华达和太平洋沿岸地区的…
阅读更多...
【NOIP2014普及组复赛】题4：子矩阵

【NOIP2014普及组复赛】题4：子矩阵

题3&#xff1a;子矩阵 【题目描述】 给出如下定义&#xff1a; 1.子矩阵&#xff1a;从一个矩阵当中选取某些行和某些列交叉位置所组成的新矩阵&#xff08;保持行与列的相对顺序&#xff09;被称为原矩阵的一个子矩阵。 例如&#xff0c;下面左图中选取第 2 、 4 2、4 2、…
阅读更多...
vue项目中使用json编辑器

vue项目中使用json编辑器

实现效果&#xff1a; 借助插件json-editor-vue3实现效果如图一&#xff0c;如果嫌丑可以通过类名改一下样式如图二。 实现过程&#xff1a; 安装插件&#xff1a;npm install json-editor-vue3 文档链接&#xff1a;GitCode - 开发者的代码家园 <script setup name&quo…
阅读更多...
AcWing 3466. 清点代码库(STL：map,vector)

AcWing 3466. 清点代码库(STL：map,vector)

3466. 清点代码库 需要求有几种不同数列&#xff0c;每种有多少个&#xff0c;可以想到用map。它的键是一个数列&#xff0c;可以把它放在vector里。也就是map<vector<int>,int> 要满足要求的输出序列&#xff0c;就要想把它放在其他容器&#xff0c;或数组里&…
阅读更多...
Vite + Vue3 部署 GitHub

Vite + Vue3 部署 GitHub

因为静态资源是可以部署到 GitHub 上&#xff0c;自己顺便学习部署网站 因为我使用的是 Vite 工具&#xff0c;官方有提供相应 Demo 部署静态站点 | Vite 官方中文文档 新建文件夹 .github 然后再建一个文件夹 workflows 新建文件 main.yml 文件 直接使用官方文档 demo #…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023