如何在HBuilder uni-app中添加蓝牙模块（手机蓝牙）

Question

我想要在HBuilder X 的uniapp中有那种按下图片就发送相关指令到小型蓝牙接收模块，请问我该咋办？

Answer 1

♥ 该回答参考ChatGPT，由吾为汝整理提供，如若有用，还请题主采纳！♥

在 HBuilder X 的 uni-app 中添加蓝牙模块并实现按下图片发送指令到小型蓝牙接收模块的功能，可以按照以下步骤进行：

1. 配置项目

确保你的项目已经启用了蓝牙模块。在 manifest.json 文件中，找到 app-plus 配置，确保蓝牙权限已被添加：

"app-plus": {
  "permissions": {
    "bluetooth": {
      "description": "需要使用蓝牙功能"
    }
  }
}

2. 初始化蓝牙

在你的 Vue 组件中，首先需要初始化蓝牙模块。可以在 mounted 生命周期钩子中进行初始化：

export default {
  data() {
    return {
      bluetoothAdapterAvailable: false,
      deviceId: '', // 连接的设备ID
    };
  },
  mounted() {
    this.initBluetooth();
  },
  methods: {
    initBluetooth() {
      uni.openBluetoothAdapter({
        success: (res) => {
          console.log('蓝牙适配器初始化成功', res);
          this.bluetoothAdapterAvailable = true;
          this.startBluetoothDevicesDiscovery();
        },
        fail: (err) => {
          console.error('蓝牙适配器初始化失败', err);
        }
      });
    },
    startBluetoothDevicesDiscovery() {
      uni.startBluetoothDevicesDiscovery({
        success: (res) => {
          console.log('开始搜索蓝牙设备', res);
        }
      });
    },
  }
};

3. 连接蓝牙设备

在发现设备后，你需要连接到目标蓝牙设备。可以在设备列表中选择设备并连接：

connectToDevice(deviceId) {
  uni.createBLEConnection({
    deviceId: deviceId,
    success: (res) => {
      console.log('连接成功', res);
      this.deviceId = deviceId;
      this.getBLEDeviceServices(deviceId);
    },
    fail: (err) => {
      console.error('连接失败', err);
    }
  });
},

4. 发送指令

连接成功后，你可以通过特定的服务和特征向蓝牙设备发送指令。你需要知道设备的服务 UUID 和特征 UUID。以下是发送数据的示例：

sendData(data) {
  const serviceUUID = 'your-service-uuid'; // 替换为你的服务UUID
  const characteristicUUID = 'your-characteristic-uuid'; // 替换为你的特征UUID

  uni.writeBLECharacteristicValue({
    deviceId: this.deviceId,
    serviceId: serviceUUID,
    characteristicId: characteristicUUID,
    value: this.stringToBuffer(data), // 将字符串转换为 ArrayBuffer
    success: (res) => {
      console.log('发送成功', res);
    },
    fail: (err) => {
      console.error('发送失败', err);
    }
  });
},

stringToBuffer(str) {
  const buffer = new ArrayBuffer(str.length);
  const dataView = new Uint8Array(buffer);
  for (let i = 0; i < str.length; i++) {
    dataView[i] = str.charCodeAt(i);
  }
  return buffer;
}

5. 按钮点击事件

最后，在你的模板中添加一个图片或按钮，并绑定点击事件来发送指令：

<template>
  <view>
    <image @click="sendData('your-command')" src="your-image-url" />
  </view>
</template>

总结

以上步骤概述了如何在 HBuilder X 的 uni-app 中添加蓝牙模块，并实现按下图片发送指令到蓝牙接收模块的功能。