【uniapp】举例解决uniapp无法注销回调函数，导致多次调用 + 举例EPS32-arduino 与uniapp间蓝牙JSON通信 BLE链接与通信过程

合集 - 【uniApp+ESP32 arduino编程】(6)

1.【uniapp】举例解决uniapp无法注销回调函数，导致多次调用 + 举例EPS32-arduino 与uniapp间蓝牙JSON通信 BLE链接与通信过程2024-07-02

2.【uni-app】uni-icons 图标使用和通过文心一言解决icon不显示BUG2024-06-233.【uniapp】BLE及通信过程+举例EPS32-arduino 与uniapp间蓝牙JSON通信2024-06-204.【ESP32 Arduino】使用ArduinoJson 7.x库处理JSon数据2024-06-255.【uniapp】使用举例 radio控件与data()内数据 响应式双向数据绑定2024-07-046.【ESP32 Arduino】RS485通信及MODBUS RTU通信实例2024-07-18

收起

主要经验

1、ESP32 作为BLE服务器，将BLE客户端发来数据返回，作为调试手机APP的工具

2、编写一个公共文件ble_api.js，实现蓝牙功能。编写一个类，类中存储BLE通信数据和方法，定义此类唯一一个实例，供网页.vue调用。

3、为了解决uniapp蓝牙无法注销回调函数，在ble_api.js就BLE uni.notify编写唯一一个回调函数，保证唯一回调函数注册一次。否者会出现多次调用问题。

4、在回调函数中，使用uni.$emit公共函数，将BLE数据发送至具体网页.vue中。

5、经实验具体做法，在每个网页script内， onshow()中调用BLE类实例注册一次BLE uni.notify的回调函数。否者，要么BLE不接收数据，要么回调函数重复多次执行。

      BLE uni.notify的回调函数中使用uni.$emit()转发BLE数据，在具体网页.vue的 onshow()使用uni.$on()监听接收与处理数据，在此具体网页.vue的onhide()中使用uni.$off()注销此监听。

 6、推测：其他uniapp设备中，回调函数是否可以按照类似方法处理， 要么app生命周期内注册一次，要么在网页显示周期内注册一次？

ESP32程序

ESP32作为BLE服务器，将BLE客户端发来数据返回，作为调试手机APP的工具。

/*
  将接收的数据，返送回去。
   Create a BLE server that, once we receive a connection, will send periodic notifications.
   The service advertises itself as: 6E400001-B5A3-F393-E0A9-E50E24DCCA9E
   Has a characteristic of: 6E400002-B5A3-F393-E0A9-E50E24DCCA9E - used for receiving data with "WRITE"
   Has a characteristic of: 6E400003-B5A3-F393-E0A9-E50E24DCCA9E - used to send data with  "NOTIFY"

   The design of creating the BLE server is:
   1. Create a BLE Server
   2. Create a BLE Service
   3. Create a BLE Characteristic on the Service
   4. Create a BLE Descriptor on the characteristic
   5. Start the service.
   6. Start advertising.

    将接收的数据，返送回去。
*/
#include <BLEDevice.h>
#include <BLEServer.h>
#include <BLEUtils.h>
#include <BLE2902.h>
#include "String.h"
#include <ArduinoJson.h>  // 需安装 ArduinoJson库

BLEServer *pServer = NULL;
BLECharacteristic *pTxCharacteristic;
bool deviceConnected = false;
bool oldDeviceConnected = false;
uint8_t txValue = 0;
String Receive_Char_Read = "";
String Receive_char;
// See the following for generating UUIDs:
// https://www.uuidgenerator.net/

#define SERVICE_UUID "6E400001-B5A3-F393-E0A9-E50E24DCCA9E"  // UART service UUID
#define CHARACTERISTIC_UUID_RX "6E400002-B5A3-F393-E0A9-E50E24DCCA9E"
#define CHARACTERISTIC_UUID_TX "6E400003-B5A3-F393-E0A9-E50E24DCCA9E"
StaticJsonDocument<200> jsonBuffer;  //声明一个JsonDocument对象，长度200
StaticJsonDocument<200> doc;

void str2json(String jsonString) {
  // 反序列化JSON
  DeserializationError error = deserializeJson(jsonBuffer, jsonString);
  if (error) {
    Serial.print(F("deserializeJson() failed: "));
    Serial.println(error.f_str());
    return;
  }
  // 解析JSON
  const char *str = jsonBuffer["name"];  // 读取字符串
  int data1 = jsonBuffer["age"];     // 读取整形数据
  Serial.println(str);
  Serial.println(data1);
  return;
};
// 定义发送数据函数
void sendData(String jsonString)
{
    // json数据及其字符串化
    // doc["sensor"] = "sensor";
    // doc["value"] = 1234;
    // String jsonString;
    // serializeJson(doc, jsonString);
    // 发送Json字符串
    pTxCharacteristic->setValue(jsonString);  // 设定特性值
    //Serial.println(jsonString);
    //pTxCharacteristic->setValue(txString);
    pTxCharacteristic->notify();  //发送特性（描述符、值等）
    delay(100);  // bluetooth stack will go into congestion, if too many packets are sent
}
// 定义处理连接等回调函数
class MyServerCallbacks : public BLEServerCallbacks {
  void onConnect(BLEServer *pServer) {
    deviceConnected = true;
  };

  void onDisconnect(BLEServer *pServer) {
    deviceConnected = false;
  }
};

// 定义回调函数，处理接收数据。
class MyCallbacks : public BLECharacteristicCallbacks {

  void onWrite(BLECharacteristic *pCharacteristic) {
    String rxValue = pCharacteristic->getValue();
    if (rxValue.length() > 0) {
      Serial.println("*********");
      Serial.print("Received: ");
      Serial.println(rxValue);
      // for (int i = 0; i < rxValue.length(); i++) {
      //   Serial.print(rxValue[i]);
      // }
      // str2json(rxValue);
      // Serial.println();
      // Serial.println("*********");
      sendData(rxValue);//蓝牙发送
    }
  }
};

void setup() {
  Serial.begin(115200);

  // Create the BLE Device 初始化蓝牙外设
  BLEDevice::init("UART Service");

  // Create the BLE Server 创建一个服务器
  pServer = BLEDevice::createServer();
  pServer->setCallbacks(new MyServerCallbacks());

  // Create the BLE Service 创建一个BLE服务
  BLEService *pService = pServer->createService(SERVICE_UUID);

  // Create a BLE Characteristic 创建一个BLE特性 通知属性
  pTxCharacteristic = pService->createCharacteristic(CHARACTERISTIC_UUID_TX, BLECharacteristic::PROPERTY_NOTIFY);

  pTxCharacteristic->addDescriptor(new BLE2902());  // 绑定描述符
  // Create a BLE Characteristic 创建一个BLE特性  读属性
  BLECharacteristic *pRxCharacteristic = pService->createCharacteristic(CHARACTERISTIC_UUID_RX, BLECharacteristic::PROPERTY_WRITE);

  pRxCharacteristic->setCallbacks(new MyCallbacks());  // 绑定回调函数

  // Start the service 启动服务器
  pService->start();

  // Start advertising  开始广播
  pServer->getAdvertising()->start();
  Serial.println("Waiting a client connection to notify...");
}

void loop() {

  if (deviceConnected) {

  }

  // disconnecting
  if (!deviceConnected && oldDeviceConnected) {
    delay(500);                   // give the bluetooth stack the chance to get things ready
    pServer->startAdvertising();  // restart advertising
    Serial.println("start advertising");
    oldDeviceConnected = deviceConnected;
  }
  // connecting
  if (deviceConnected && !oldDeviceConnected) {
    // do stuff here on connecting
    oldDeviceConnected = deviceConnected;
  }
}

 

 uniAPP程序

手机作为BLE客户端，包括功能有 BLE设备搜索、连接、接收和发送数据。

公共文件 BLEl类

// ble_api.js 
 
// 文档地址 https://uniapp.dcloud.net.cn/api/system/ble.html
// 同ESP32内定义的UUID
const SERVICE_UUID_ESP32 = "6E400001-B5A3-F393-E0A9-E50E24DCCA9E"; // UART service UUID
const CHARACTERISTIC_UUID_ESP32_RX = "6E400002-B5A3-F393-E0A9-E50E24DCCA9E";
const CHARACTERISTIC_UUID_ESP32_TX = "6E400003-B5A3-F393-E0A9-E50E24DCCA9E";
// globalClass.js  
class BLE_DeviceClass {
    constructor() {
        // ... 初始化代码 
        this.name = "BLE_APP";
        // 是否已连接
        this.connected = false;
        this.inited = false;

        // 当前连接的设备id
        this.connectId = "";
        this.previousConnectId = ""; //有链接时，为空

        this.devices = []; //蓝牙周围设备列表
        // 接收到的JSON字符串
        this.rxJSONString = "";
        // 用于存储 接收到的JSON object数据
        this.rxJSONobject = {}; // 用于存储BLE发来的JSON object数据 在defaultCallback(jsonString)方法中完成

        // 避免以下重复注册回调函数,内部使用
        this.BLEAdapterStateChangeCallback = false;
        this.BLEConnectionStateChangeCallback = false;
        //周期性函数
        this.intervalId = null; // 用于存储setInterval返回的ID

        // 创建一个数组来存储BLE接收事件监听器的引用（但实际上这里只是模拟，防止重复注册相同监听函数）  
        this.eventListeners = [];
    }
    /*-----------------------------------------------------------------------*/
    // 内部函数，防止重复添加 蓝牙接收数据回调函数
    addeventListeners(callback) { // 参数为 funcction

        // this.eventListeners.forEach(listener => {// 遍历
        //     // 判别是否已经注册  
        const index = this.eventListeners.indexOf(callback);
        if (index !== -1) {
            return false; // 已有，不重复添加
        };
        // });
        this.eventListeners.push(callback); //添加
        return true;
    }
    /*-----------------------------------------------------------------------*/
    // 内部函数，防止重复添加 蓝牙接收数据回调函数    
    isIneventListeners(callback) {
        const index = this.eventListeners.indexOf(callback);
        if (index !== -1) {
            return true;
        } else {
            return false;
        };
    }
    /*-----------------------------------------------------------------------*/
    // 测试
    myMethod() {


        // ... 方法实现  
        console.log(this.name);

        /*
        const person = {
          firstName: "Bill",
          lastName : "Gates",
          language : "EN"
        };
        
        
        console.log( Object.keys(person));
        console.log( Object.values(person));
        let keys = Object.keys(person);// 获取JSON objet的键
        let text = "";
        for (let key in person) {
          text += person[key];
          person[key] = key+"_value";
        }
        console.log( text);
        console.log( person);
        if(keys.includes("language"))
        {
            console.log(person["language"]);
        }*/
    }

    /*-----------------------------------------------------------------------*/
    // API函数，开启蓝牙外设
    initBlue() {
        console.log('初始化蓝牙开始...')
        const _this = this;
        return new Promise((resolve) => {
            uni.openBluetoothAdapter({
                success(res) {
                    console.log('初始化蓝牙成功')
                    _this.inited = true;
                    resolve(true);
                },
                fail(err) {
                    console.log('初始化蓝牙失败', err)
                    uni.showModal({
                        title: '失败提示',
                        content: "初始化蓝牙失败",
                        showCancel: false
                    });
                }
            })
        });
    }
    /*-----------------------------------------------------------------------*/
    //API函数，扫描外围设备，包括ESP32
    async scan_start() {

        const _this = this;
        if (!_this.inited) {
            await _this.initBlue(); //注意this的作用域
        };
        // 设定扫描回调函数
        this.scan_callback();
        // 开始扫描外围设备
        await uni.startBluetoothDevicesDiscovery({
            success(res) {
                console.log('启动搜索');
            },
            fail(err) {
                console.log('启动搜索失败', err)
                uni.showModal({
                    title: '失败提示',
                    content: "启动搜索失败",
                    showCancel: false
                });
            }
        });
        //console.log('读取搜索结果');
        // 扫描到外围蓝牙设备后的回调
    }
    //  内部函数，在扫描scan_start()前设定回调函数。
    async scan_callback() {
        const _this = this;
        //console.log('搜索结果');
        await uni.onBluetoothDeviceFound(
            ({
                devices
            }) => {
                _this.devices.push(...devices);
                // 去重
                _this.devices = [..._this.devices].filter((cur, index, self) => {
                    return self.findIndex(item => item.deviceId == cur.deviceId) ===
                        index;
                });
                //console.log(_this.devices);
            });
    }
    /*-----------------------------------------------------------------------*/
    //API函数，扫描外围设备，包括ESP32
    async scan_stop() {
        // 停止扫描设备, 否则会浪费性能
        await uni.stopBluetoothDevicesDiscovery({
            success(res) {
                console.log("停止蓝牙设备搜索")
                //console.log(res)
            },
            fail(err) {
                console.error(err);
            }
        });
    }

    /*-----------------------------------------------------------------------*/
    // 内部函数，字符串转为ArrayBuffer对象，参数为字符串
    str2ab(str) {
        var buf = new ArrayBuffer(str.length * 2); // 每个字符占用2个字节
        var bufView = new Uint16Array(buf);
        for (var i = 0, strLen = str.length; i < strLen; i++) {
            bufView[i] = str.charCodeAt(i);
        }
        return buf;
    }

    /*-----------------------------------------------------------------------*/
    // 内部函数，监听蓝牙模块状态
    setCheckAdapterStateChange() {
        // 避免以下重复注册回调函数
        let _this = this;
        if (_this.BLEAdapterStateChangeCallback) {
            return;
        }
        //this.BLEConnectionStateChangeCallback = false;
        uni.onBluetoothAdapterStateChange(function(res) {
            console.log('BLE adapterState changed, now is', res)
            _this.BLEAdapterStateChangeCallback = true;
        });
    }
    /*-----------------------------------------------------------------------*/
    //监听低功耗蓝牙连接状态的改变事件。包括开发者主动连接或断开连接，设备丢失，连接异常断开等等
    setCheckConnectionStateChange() {
        // 避免以下重复注册回调函数
        let _this = this;
        if (_this.BLEConnectionStateChangeCallback) {
            return;
        };

        uni.onBLEConnectionStateChange(function(res) {
            //console.log('BLEConnectionState changed, now is', res);
            // 该方法回调中可以用于处理连接意外断开等异常情况
            //console.log(`device ${res.deviceId} state has changed, connected: ${res.connected}`);
            
            if (!res.connected) {
                // 是否已连接
                _this.connected = false;
                // 当前连接的设备id
                console.log(`BLE device ${res.deviceId} state has disconnected`);
                this.connectId = "";
            };

            _this.BLEConnectionStateChangeCallback = true;

        });
    }
    /*-----------------------------------------------------------------------*/
    // 内部函数
    setMTU() {
        const _this = this;
        //3）设置MTU，否则传输报文不全，默认是23bytes，但是蓝牙本身是需要3bytes，故而只能传输20bytes
        setTimeout(() => {
            console.log('deviceId>>>', _this.connectId);
            uni.setBLEMTU({
                deviceId: _this.connectId,
                mtu: 512,
                success: (res) => {
                    console.log('设置MTU最大值512成功', res);
                    //启动蓝牙接收数据
                },
                fail: (res) => {
                    console.log('设置MTU最大值512失败', res);
                }
            });
        }, 1000);

    }
    //API函数，
    connect() {
        const _this = this;
        console.log('设备id', _this.connectId);

        const promise = new Promise((resolve) => {
            uni.showLoading({
                title: '连接蓝牙设备中...'
            })
            uni.createBLEConnection({
                deviceId: _this.connectId,
                success(res) {
                    console.log('蓝牙设备连接成功');
                    _this.previousConnectId = null; // 有连接时置为空
                    console.log(res);
                    // 监听蓝牙模块状态
                    _this.setCheckAdapterStateChange();
                    // 设置MTU，传输报文255字节
                    _this.setMTU();
                    // 在需要关闭加载提示的时候，调用 uni.hideLoading 方法
                    uni.hideLoading();
                },
                fail(err) {
                    console.log('蓝牙设备连接失败');
                    console.error(err);
                    // 在需要关闭加载提示的时候，调用 uni.hideLoading 方法
                    uni.hideLoading();
                }
            });
        });

    }
    /*-----------------------------------------------------------------------*/
    //API函数，断开链接
    disConnect() {
        const _this = this;
        _this.previousConnectId = _this.connectId;
        if (!_this.connectId) return;
        uni.showLoading({
            title: '断开蓝牙连接中...'
        });
        return new Promise((resolve) => {
            uni.closeBLEConnection({
                deviceId: _this.connectId,
                success(res) {
                    console.log("断开连接成功：", res)

                    // 断开后必须释放蓝牙资源，不然再点击连接就连不上了
                    // https://uniapp.dcloud.net.cn/api/system/bluetooth.html
                    uni.closeBluetoothAdapter({
                        success() {
                            console.log('释放蓝牙资源成功')
                            _this.connected = false;
                            _this.connectId = null
                            _this.SERVICE_UUID = null
                            _this.CHARACTERISTIC_UUID = null;
                            _this.inited = false;
                            _this.received = false;

                            // 延时下保险点
                            setTimeout(() => {
                                uni.hideLoading();
                                resolve();
                            }, 600)
                        },
                        fail() {
                            uni.hideLoading();
                        }
                    })

                },
                fail(err) {
                    uni.hideLoading();
                    console.log('断开连接失败：', err)
                    uni.showModal({
                        title: '失败提示',
                        content: "断开连接失败 " + err.errMsg,
                        showCancel: false
                    });
                }
            })
        })
    }
    /*-----------------------------------------------------------------------*/
    // API函数，获取蓝牙服务UUID等信息
    getServices() {
        uni.getBLEDeviceServices({
            deviceId: this.connectId, // 设备ID
            success(res) {
                console.log(res);
            },
            fail(err) {
                console.error(err);
            }
        });
    }
    /*-----------------------------------------------------------------------*/
    // API函数，获取指定服务下的特性
    getCharacteristics() {
        uni.getBLEDeviceCharacteristics({
            deviceId: this.connectId, // 设备ID
            serviceId: SERVICE_UUID_ESP32, // 服务UUID
            success(res) {
                console.log(res);
            },
            fail(err) {
                console.error(err);
            }
        });
    }
    /*-----------------------------------------------------------------------*/
    /*接收外设设备发来的具有通知属性服务及其特性*/
    // 内部函数，ArrayBuffer转16进度字符串示例
    ab2hex(buffer) {
        const hexArr = Array.prototype.map.call(
            new Uint8Array(buffer),
            function(bit) {
                return ('00' + bit.toString(16)).slice(-2);
            }
        );
        return hexArr.join('');
    }

    // 内部函数，将16进制的内容转成我们看得懂的字符串内容
    hexCharCodeToStr(hexCharCodeStr) {
        var trimedStr = hexCharCodeStr.trim();
        var rawStr =
            trimedStr.substr(0, 2).toLowerCase() === '0x' ?
            trimedStr.substr(2) :
            trimedStr;
        var len = rawStr.length;
        if (len % 2 !== 0) {
            alert('存在非法字符!');
            return '';
        }
        var curCharCode;
        var resultStr = [];
        for (var i = 0; i < len; i = i + 2) {
            curCharCode = parseInt(rawStr.substr(i, 2), 16);
            resultStr.push(String.fromCharCode(curCharCode));
        }
        return resultStr.join('');
    }
    // 接收回调函数，将数据进行处理,保存为JSON object
    // 在网页中，编写回调函数处理业务，并且要调用此函数。
    defaultCallback(jsonString) {
        const _this = this;
        console.log('Callback function called, raised by onBLECharacteristicValueChange');
        if (!jsonString) {
            return;
        }
        //将监听到的值转发其他网页
        uni.$emit('BLE_RX_Value', {
            msg: jsonString
        }) //触发全局的自定义事件。附加参数都会传给监听器回调。

        //
        console.log(jsonString);
        _this.rxJSONString = jsonString; // 收到json字符串 
        // 使用JSON.parse()将字符串转换回对象
        let rxjsonObj = JSON.parse(_this.rxJSONString);

        // 遍历rxjsonObj的所有键，组成数组
        let keys = [];
        for (let key in rxjsonObj) {
            // 键在obj中不存在或值不相同  
            if (rxjsonObj.hasOwnProperty(key)) {
                keys.push(key); // 获取JSON objet的键
            }
        };
        //console.log(keys);

        // 保存键值对  放在 this.rxJSONobject
        for (let key in rxjsonObj) {
            let element = key;
            let value = rxjsonObj[element];
            _this.rxJSONobject[element] = value;
        }
        console.log(_this.rxJSONobject);
    }
    // API函数，接收，将数据进行处理在回调函数中callback处理
    // 仅在App.vue 中调用一次。
    async notify(callback = this.defaultCallback()) {
        const _this = this;
        try {
            // 已从BLE接收的数据，设置回调调函数处理。
            let resultFromFunB = await uni.onBLECharacteristicValueChange(res => {
                // 结果
                //console.log(res);
                // 结果里有个value值，该值为 ArrayBuffer 类型，所以在控制台无法用肉眼观察到，必须将该值转换为16进制
                let resHex = this.ab2hex(res.value);
                //console.log(resHex);
                // 最后将16进制转换为ascii码，就能看到对应的结果
                let jsonString = this.hexCharCodeToStr(resHex);

                callback(jsonString); // 回调函数实现功能
            });
            console.log('funB的结果：', resultFromFunB); // 打印funB的结果  
            // 启动BLE接收功能
            const resultFromFunA = await uni.notifyBLECharacteristicValueChange({
                deviceId: this.connectId, // 设备ID
                serviceId: SERVICE_UUID_ESP32, // 服务UUID
                characteristicId: CHARACTERISTIC_UUID_ESP32_TX, // 特性UUID
                success(res) {
                    console.log(res);
                },
                fail(err) {
                    console.error(err);
                }
            });

        } catch (error) {
            // 处理可能出现的错误  
            console.error('执行函数时出错：', error);
        } finally {
            console.log('notify() finish'); // 打印结果  
        };
    }
    /*-----------------------------------------------------------------------*/
    //API函数， 向外围蓝牙设备发送数据，指定服务及其特性的UUID
    send(jsonObject) {
        // 向蓝牙设备发送一个0x00的16进制数据
        // let jsonObject = {
        //     name: "John",
        //     age: -30,
        //     city: "New York"
        // };
        return new Promise((resolve, reject) => {
            let jsonString = JSON.stringify(jsonObject);
            //字符串转为arraybuffer
            const buffer = new ArrayBuffer(jsonString.length);
            const dataView = new DataView(buffer);
            // dataView.setUint8(0, 0)
            for (var i = 0; i < jsonString.length; i++) {
                dataView.setUint8(i, jsonString.charAt(i).charCodeAt());
            }

            uni.writeBLECharacteristicValue({
                deviceId: this.connectId, // 设备ID
                serviceId: SERVICE_UUID_ESP32, // 服务UUID
                characteristicId: CHARACTERISTIC_UUID_ESP32_RX, // 特性UUID
                value: buffer,
                success(res) {

                    //console.log(res);
                    resolve(res);
                },
                fail(err) {
                    //console.error(err);
                    reject(err);
                }
            });
        });
    }
    /*-----------------------------------------------------------------------*/
    // 接口函数 点击某个设备的连接
    async connectClick(item) {
        let _this = this;
        console.log('即将连接蓝牙：', item);
        // 如果当前有连接的设备，需要先断开
        if (this.connected) {
            await this.disConnect();
        }
        if (!this.inited) {
            await this.initBlue();
        }
        // 停止扫描设备, 否则会浪费性能
        await uni.stopBluetoothDevicesDiscovery({
            success(res) {
                console.log("停止蓝牙设备搜索")
                //console.log(res)                
            },
            fail(err) {
                console.error(err);

            }
        });
        // 连接指定蓝牙设备
        //console.log('开始连接蓝牙设备');
        this.connectId = item.deviceId; // MAC地址
        this.connect();
    }
    /*-----------------------------------------------------------------------*/

    /*-----------------------------------------------------------------------*/
    //API函数， 周期性调用的函数
    periodicFunction() {
        console.log('这个函数被周期性调用了！');
        // 在这里执行你的周期性任务  
    }

    /*-----------------------------------------------------------------------*/
    //API函数，开始周期性调用  
    startPeriodicCall(callback, intervalms = 1000) {
        if (!this.intervalId) { // 确保没有重复的定时器  
            this.intervalId = setInterval(callback, intervalms); // 每秒调用一次periodicFunction  
        }
    }
    /*-----------------------------------------------------------------------*/
    //API函数， 停止周期性调用  
    stopPeriodicCall() {
        if (this.intervalId) { // 确保有定时器在运行  
            clearInterval(this.intervalId); // 停止周期性调用  
            this.intervalId = null; // 清空ID，以便下次可以重新开始
            console.log('这个周期性函数被停止了！');
        }
    }
    /*-----------------------------------------------------------------------*/
    //API函数，  重新开始周期性调用 
    restartPeriodicCall(callback, intervalms = 1000) {
        if (this.intervalId) { // 确保有定时器在运行  
            clearInterval(this.intervalId); // 停止周期性调用  
            this.intervalId = null; // 清空ID，以便下次可以重新开始
            console.log('这个周期性函数被停止了！');
        };
        if (!this.intervalId) { // 确保没有重复的定时器  
            this.intervalId = setInterval(callback, intervalms); // 每秒调用一次periodicFunction  
        };
    }
    /*-----------------------------------------------------------------------*/

}

// 创建一个单例实例  
const BLE_DeviceInstance = new BLE_DeviceClass();

/*-----------------------------------------------------------------------*/
// module.exports = {
//     BLE_DeviceInstance, // 导出实例 ,作为全局实例
// }
export {
    BLE_DeviceClass,
    BLE_DeviceInstance
}
// import * as api from '@/util/api.js';// 导入公用变量与函数方法
// 在函数中引用  api.BLE_DeviceInstance.initBlue();

BLE搜索与连接   网页.vue

<template>
    <view>
        <!--功能按钮-->
        <label class="flex-container">
            <button class="button_Green"
                style="background-color: white;color: black;border-style: solid;border: 2px solid #4CAF50;">注意：开启手机蓝牙与定位功能
            </button>
        </label>

        <!--设备列表-->
        <view>
            <div v-for="item in deviceArray" :key="item.deviceId">
                <view class="flex-container"
                    style="flex-direction: column; border: 2px solid #4CAF50; margin_left:2%; margin_top:2%;padding: 0rpm;">
                    <label class="flex-container">
                        <text class="flex-item" style="text-align: center;"> 蓝牙名称：{{item.name}}</text>
                    </label>
                    <label class="flex-container" style="align-items: left;">
                        <view style="display:flex; text-align: left;flex:5">MAC:{{item.deviceId}}</view>
                        <view style="display:flex; text-align: left;flex:5">信号:{{item.RSSI}}</view>

                        <view class="button_Green" style="flex:5;">
                            <a @click="selectlick(item)" v-if="connectId !== item.deviceId">连接</a>
                            <a @click="unselectlick(item)" v-else style="color: red;">断开连接</a>
                        </view>

                    </label>
                </view>
            </div>
        </view>

        <label class="flex-container">
            <button @click="startScanBLE" :disabled="!btn_select" class="button_Green"
                style="background-color: #007aff;">搜索蓝牙外设 </button>
        </label>
        <label class="flex-container">
            <button @click="stopScanBLE" :disabled="btn_select" class="button_Green"
                style="background-color: #4CAF50;">停止搜索蓝牙</button>
        </label>

    </view>
</template>

<script>
    import * as ble_api from '@/utilities/ble_api.js'; // 导入公用变量与函数方法

    export default {
        data() {
            return {
                onscanBLE: true,
                deviceArray: [], //蓝牙周围设备列表
                connectId: "", // 连接的MAC
                btn_select: true, // 控制按钮有效性
            }
        },
        onLoad() {
            //console.log("test.vue");
            ble_api.BLE_DeviceInstance.setCheckAdapterStateChange();
            ble_api.BLE_DeviceInstance.setCheckConnectionStateChange();
        },
        onShow() {
            // 监听页面显示  
            // if(ble_api.BLE_DeviceInstance.previousConnectId){
            // this.connectId = "";    
            // }
            console.log('页面显示');
            console.log(this.connectId);
        },
        onHide() {
            // 监听页面隐藏  
            console.log('页面隐藏');
        },
        methods: {
            //启动手机蓝牙功能
            openBLE() {
                ble_api.BLE_DeviceInstance.initBlue();
            }, // end of openBLE() 
            //搜索蓝牙外设
            startScanBLE() {
                this.btn_select = false;
                let _this = this;
                _this.onscanBLE = true;
                ble_api.BLE_DeviceInstance.scan_start();
                _this.getScanBLE();
            }, // end of startScanBLE()
            //搜索蓝牙外设
            stopScanBLE() {
                this.btn_select = true;
                let _this = this;
                _this.onscanBLE = false;
                ble_api.BLE_DeviceInstance.scan_stop();
            }, // end of stopScanBLE()
            //定时获取 搜索蓝牙外设 的结果
            async getScanBLE() {
                let _this = this;
                // 使用Promise包装setTimeout
                while (_this.onscanBLE) {
                    //console.log('发一个数据包，开始延时...');
                    await new Promise(resolve => {
                        setTimeout(() => {
                            // 检测已发现的蓝牙外设列表，并根据两次搜索数量判断是否停止
                            let len_previous = _this.deviceArray.length;
                            _this.deviceArray.length = 0;
                            let len = ble_api.BLE_DeviceInstance.devices.length;
                            for (var i = 0; i < len; i++) {
                                if (ble_api.BLE_DeviceInstance.devices[i].name) {
                                    _this.deviceArray.push(ble_api.BLE_DeviceInstance.devices[i]);
                                }
                            }
                            console.log("设备列表：");
                            console.log(_this.deviceArray);
                            // 比较相邻两次搜索结果，判断是否停止搜索蓝牙。
                            len = _this.deviceArray.length;
                            if (len_previous == len) //没有收到新外设
                            {

                                _this.stopScanBLE(); // 含有 _this.onscanBLE = false;
                            }
                            //console.log('延时100ms后执行（使用await）！');
                            resolve(); // 调用resolve来继续执行async函数  
                        }, 2000);
                    });
                    // 这段代码将在延时后执行  
                };
                console.log('关闭定时器（搜索蓝牙外设）');
            }, // end of async getScanBLE()
            //选择与连接蓝牙设备            
            selectlick(item) {
                this.connectId = "";
                console.log(item.deviceId);
                this.connectId = item.deviceId;

                //断开蓝牙连接，连接新蓝牙
                ble_api.BLE_DeviceInstance.connectClick(item);
            }, // end of selectlick(item)
            //断开蓝牙设备
            unselectlick(item) {
                this.connectId = "";

                //断开蓝牙连接
                ble_api.BLE_DeviceInstance.disConnect();
            }, // end of unselectlick(item)
            // 
        }
    }
</script>

<style>
    .flex-container {
        display: flex;
        flex-direction: row;
        /* 主轴方向，默认为 row */
        flex-wrap: nowrap;
        /* 是否换行，默认为 nowrap */

        justify-content: center;
        /* 如果需要的话，可以水平居中 */
        align-items: center;
        /* 如果需要的话，可以垂直居中  */
        box-sizing: border-box;
        width: 100%;
        /* 或其他你需要的宽度 width: 96%;*/

        /* 或其他你需要的高度 height: 100%;*/
        /* 其他样式... */
    }

    .flex-item {
        flex: 1;
        /* 使按钮占据全部可用空间 */
        /* 如果需要的话，可以添加边距或填充 */
        /* margin: ...; */
        /* padding: ...; */
        /* 其他样式... */
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 50rpx;
    }

    .button_Green {
        flex: 1;
        /* Green */
        background-color: #4CAF50;
        /* Green */
        border: none;
        color: white;
        /*padding: 15px 32px; */
        text-align: center;
        text-decoration: none;
        /*display: inline-block;*/
        font-size: 40rpx;

        border-radius:20rpx;
        /* 或者使用 50% 来确保它总是圆形的 */
    }
</style>

 

BLE数据发送与接收举例     网页.vue

<template>
    <view>
        <!--设备列表-->
        <div class="flex-container" style="flex-direction: column;" v-for="item in deviceArray" :key="item.deviceId">
            <view class="flex-container"
                style="flex-direction: column; border: 2px solid #4CAF50; margin_left:2%; margin_top:2%;padding: 0rpm;">
                <label class="flex-container">
                    <text class="flex-item" style="text-align: center;">设备编号：{{item.deviceId+1}}</text>
                </label>
                <label class="flex-container">
                    <text class="flex-item" style="text-align: left;">安装位置：{{item.locate}}</text>
                    <text class="flex-item" style="text-align: left;">运动状态：{{item.state}}</text>

                </label>
                <label class="flex-container">
                    <button @click="btnForwardClick(item)" class="button_Green" style="background-color: #4CAF50;"
                        :disabled="!item.btn_forward">前进</button>
                    <button @click="btnBackwardClick(item)" class="button_Green" style="background-color: #008CBA;"
                        :disabled="!item.btn_backward">返回</button>
                    <button @click="btnStopClick(item)" class="button_Green" style="background-color: #f44336;"
                        :disabled="!item.btn_stop">停止</button>
                </label>
            </view>
        </div>
        <!--设备列表-->
    </view>
</template>

<script>
    import * as ble_api from '@/utilities/ble_api.js'; // 导入公用变量与函数方法
    export default {
        data() {
            return {

                deviceRegs: { // 编号：0bit，device0;bit1，device1;...bit31，device31;
                    existence: 0,
                    forward_state: 0,
                    backward_state: 0,
                    origin_pos: 0,   //驻泊位状态 有，或无
                    end_pos: 0,      //暂停位状态 有，或无
                    deviceId_cmd: 0, //接收命令的RS485设备
                    forward_cmd: 0,
                    backward_cmd: 0,
                },
                deviceArray: [],
                // item: {
                //     deviceId: 0,
                //     locate: "设备NO.",
                //     state: "",
                //     btn_forward: true,
                //     btn_backward: true,
                //     btn_stop: false,
                // },
            } // end of return
        },
        onLoad() {
            // BLE 读取 RS485设备状态
            this.button_disable = true;
            this.deviceRegs.existence = 15 + 15 * 16;
            this.deviceRegs.backward_state = 5;
            this.deviceRegs.forward_state = 10;
            this.deviceRegs.origion_pos = 5 * 16;
            this.deviceRegs.end_pos = 10 * 16;
            console.log(this.deviceRegs);

            this.setDeviceArray();
        }, // end of onLoad()
        onShow() {
            // 监听页面显示  
            // 必须在此添加一次。否者不能接收数据。回调函数只有一个。
            ble_api.BLE_DeviceInstance.notify(ble_api.BLE_DeviceInstance.defaultCallback);
            //**别的页面  监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
            // uni.$on('BLE_RX_Value', function(data) {
            //     console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
            // });
            uni.$on('BLE_RX_Value', this.BLE_RX_ValueFun);

            //此处应延时读取设备状态
        },
        onHide() {
            // 监听页面隐藏  
            uni.$off('BLE_RX_Value', this.BLE_RX_ValueFun); //移除全局自定义事件监听器。

            console.log('页面隐藏');
        },
        methods: {
            //回调函数 。uni.$on（）监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
            BLE_RX_ValueFun(data) {
                console.log('监听到事件来自 BLE_RX_Value ，携带参数 msg 为：' + data.msg);
                let jsonString = data.msg;
                this.BLE_RX_DataRead(jsonString); //定义函数，完成对ESP32发来的数据处理。
            },
            //定义函数，完成对ESP32发来的数据处理。
            BLE_RX_DataRead(jsonString) {
                let _this = this;
                let Keys = [];
                // 解析 JSON string
                let JsonObj = JSON.parse(jsonString);
                //取得键值 
                let obj1 = _this.deviceRegs;
                for (let key in obj1) { // 遍历obj1={}的所有键  
                    Keys.push(key);
                };
                //根据蓝牙发来的JsonObj，更新this.deviceRegs
                for (let key in JsonObj) { // 遍历JsonObj ={}的所有键 
                    if (Keys.includes(key)) { // 更新 JsonObj{}内的值
                        obj1[key] = JsonObj[key];
                        //console.log(key);
                    }
                };
            },

            // 机APP通过蓝牙通信发送数据给外围蓝牙设备ESP32
            //  报文功能是向设备写数据。
            BLE_write_device(jsonObject) {
                let _this = this;
                //let ble_all_object = ble_api.BLE_DeviceInstance.rxJSONobject; // 用于存储JSON object数据
                jsonObject["command"] = "write_device";
                //API函数， 向外围蓝牙设备发送数据，指定服务及其特性的UUID
                ble_api.BLE_DeviceInstance.send(jsonObject)
                console.log("BLE_write_device(jsonObject)");
            }, // end of BLE_write_device(jsonObject)
            //  报文功能是读取设备状态。
            BLE_read_device(jsonObject) {
                let _this = this;
                //let ble_all_object = ble_api.BLE_DeviceInstance.rxJSONobject; // 用于存储JSON object数据
                jsonObject["command"] = "read_device";
                //API函数， 向外围蓝牙设备发送数据，指定服务及其特性的UUID
                ble_api.BLE_DeviceInstance.send(jsonObject)
                console.log("BLE_write_device(jsonObject)");
            }, // end of BLE_read_device(jsonObject)
            /*-----------------------------------------------------------------------*/
            /*<!-------------------------------------------------------------------------------------------->*/
            /*根据this.deviceRegs 设置 this.deviceArray*/
            setDeviceArray() {
                let _this = this;
                let existflag = _this.deviceRegs.existence;

                this.deviceArray.length = 0; //清空数组
                //arr.splice(0, arr.length);

                for (var i = 0; i < 16; i++) { //最多16个RS85设备
                    let bit = 0x0001;
                    let bit_flag = bit << i;
                    if ((bit_flag & existflag) != bit_flag) {
                        continue; // 无RS85设备
                    };
                    //有编号i的RS485设备
                    let item = {
                        deviceId: i,
                        locate: "RS485设备安装位置",
                        state: "",
                        btn_forward: false,
                        btn_backward: false,
                        btn_stop: false,
                    };
                    // RS485运转时，只能停
                    let _forward = ((_this.deviceRegs.forward_state & bit_flag) == bit_flag);
                    let _backward = ((_this.deviceRegs.backward_state & bit_flag) == bit_flag);

                    // 使能 停止按钮
                    if (_forward || _backward) {
                        item.btn_forward = false;
                        item.btn_backward = false;
                        item.btn_stop = true;
                        if (_forward) {
                            item.state = "前进中";
                        } else {
                            item.state = "返回中";
                        }
                        _this.deviceArray.push(item);
                        continue;
                    }
                    // RS485在端部时，只能向另外一端运动
                    // 使能 前进按钮
                    let at_origion = ((_this.deviceRegs.origion_pos & bit_flag) == bit_flag);
                    if (at_origion) {
                        item.btn_forward = true;
                        item.btn_backward = false;
                        item.btn_stop = false;

                        item.state = "驻停端";
                        _this.deviceArray.push(item);
                        continue;
                    }
                    // 使能 返回按钮
                    let at_end = ((_this.deviceRegs.end_pos & bit_flag) == bit_flag);
                    if (at_end) {
                        item.btn_forward = false;
                        item.btn_backward = true;
                        item.btn_stop = false;

                        item.state = "暂停端";
                        _this.deviceArray.push(item);
                        continue;
                    }
                    // 处于中部，且停止，使能 前进 和 返回
                    item.btn_forward = true;
                    item.btn_backward = true;
                    item.btn_stop = false;
                    item.state = "停在中间段";
                    _this.deviceArray.push(item);
                }
                console.log(_this.deviceArray);
            }, // end of setDeviceArray()
            // 点击某个设备的连接
            //
            btnForwardClick(item) {
                console.log(item.deviceId);
                let pos = item.deviceId;
                let bit = 0x0001 << pos;
                let flag = this.deviceRegs.existence;
                if ((flag & bit) != bit) { //无设备
                    return;
                };
                this.deviceRegs.deviceId_cmd = bit;
                this.deviceRegs.backward_cmd = 0;
                this.deviceRegs.forward_cmd = bit;

                // BLE 发送命令给ESP32
                let jsonObject = {
                    deviceId_cmd: this.deviceRegs.deviceId_cmd, //接收命令的RS485设备
                    forward_cmd: this.deviceRegs.forward_cmd,
                    backward_cmd: this.deviceRegs.backward_cmd,
                };
                jsonObject["command"] = "write_device";

                this.BLE_write_device(jsonObject);
            }, // end of btnForwardClick(item)

            btnBackwardClick(item) {
                console.log(item.deviceId);
                let pos = item.deviceId;
                let bit = 0x0001 << pos;
                let flag = this.deviceRegs.existence;
                if ((flag & bit) != bit) { //无设备
                    return;
                };
                this.deviceRegs.deviceId_cmd = bit;
                this.deviceRegs.backward_cmd = bit;
                this.deviceRegs.forward_cmd = 0;

                // BLE 发送命令给ESP32
                let jsonObject = {
                    deviceId_cmd: this.deviceRegs.deviceId_cmd, //接收命令的RS485设备
                    forward_cmd: this.deviceRegs.forward_cmd,
                    backward_cmd: this.deviceRegs.backward_cmd,
                };
                jsonObject["command"] = "write_device";

                this.BLE_write_device(jsonObject);
            }, // end of btnBackwardClick(item)

            btnStopClick(item) {
                console.log(item.deviceId);
                let pos = item.deviceId;
                let bit = 0x0001 << pos;
                let flag = this.deviceRegs.existence;
                if ((flag & bit) != bit) { //无设备
                    return;
                };
                this.deviceRegs.deviceId_cmd = bit;
                this.deviceRegs.backward_cmd = 0;
                this.deviceRegs.forward_cmd = 0;

                // BLE 发送命令给ESP32
                let jsonObject = {
                    deviceId_cmd: this.deviceRegs.deviceId_cmd, //接收命令的RS485设备
                    forward_cmd: this.deviceRegs.forward_cmd,
                    backward_cmd: this.deviceRegs.backward_cmd,
                };
                jsonObject["command"] = "write_device";

                this.BLE_write_device(jsonObject);
            }, // end of btnStopClick(item)
        }
    }
</script>


<style>
    .flex-container {
        display: flex;
        flex-direction: row;
        /* 主轴方向，默认为 row */
        flex-wrap: nowrap;
        /* 是否换行，默认为 nowrap */

        justify-content: center;
        /* 如果需要的话，可以水平居中 */
        align-items: center;
        /* 如果需要的话，可以垂直居中  */
        width: 100%;
        box-sizing: border-box;

        /* 或其他你需要的宽度 width: 96%;*/

        /* 或其他你需要的高度 height: 100%;*/
        /* 其他样式... */
    }

    .flex-item {
        flex: 1;
        /* 使按钮占据全部可用空间 */
        /* 如果需要的话，可以添加边距或填充 */
        /* margin: ...; */
        /* padding: ...; */
        /* 其他样式... */
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }

    .button_Green {
        flex: 1;
        /* Green */
        background-color: #4CAF50;
        /* Green */
        border: none;
        color: white;
        /*padding: 15px 32px; */
        text-align: center;
        text-decoration: none;
        /*display: inline-block;*/
        font-size: 16px;
    }
</style>