uni-app Vue3使用BLE报错，Vue2正常

uni-app Vue3使用BLE报错，Vue2正常

开发环境 版本号 项目创建方式
Windows 19042.1586 HBuilderX 
### 操作步骤：
使用官方demo，将Vue2改为Vue3使用BLE蓝牙报错，报错为`TypeError: this.getCallbackIDByFunction is not a function`

### 预期结果：
无报错，success正常被回调

### 实际结果：
报错，代码无法正常运行

### bug描述：
使用官方的uni-app模板，将Vue2改为Vue3也会报错，报错为`TypeError: this.getCallbackIDByFunction is not a function`
此错误只会在App上出现，微信小程序无此问题。

更多关于uni-app Vue3使用BLE报错，Vue2正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

如图，初始化和获取蓝牙状态的蓝牙调用是会失败的，后面的调用正常。这样就无法判断是否初始化成功


更多关于uni-app Vue3使用BLE报错，Vue2正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


将官方Demo的Vue版本改为3，点击初始化蓝牙模块，每次都能看到这个TypeError: this.getCallbackIDByFunction is not a function. 且蓝牙初始化状态无法完成回调

已反馈相关人员排查，已加分，感谢您的反馈！

预计下版修复

alpha 3.4.6 已修复

在 uni-app 中使用 BLE（蓝牙低功耗）时，如果 Vue3 报错而 Vue2 正常，可能是由于 Vue3 与 uni-app 的某些 API 或生命周期钩子不兼容，或者 Vue3 的响应式系统在某些场景下的表现与 Vue2 不同。以下是一些可能的原因和解决方法：

1. 生命周期钩子差异

Vue3 和 Vue2 的生命周期钩子有所不同。确保你在 Vue3 中使用了正确的生命周期钩子。

  • Vue2 中的 created 和 mounted 钩子在 Vue3 中仍然存在，但写法可能略有不同。
  • 如果你使用的是 Composition API，可以使用 onMounted 等生命周期钩子。
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // 你的 BLE 初始化代码
    });
  }
};

2. 响应式系统差异

Vue3 的响应式系统与 Vue2 不同，可能会导致某些数据绑定或状态管理出现问题。确保你在 Vue3 中正确使用了 ref 和 reactive。

import { ref, reactive } from 'vue';

export default {
  setup() {
    const bleDevice = ref(null);
    const bleState = reactive({
      connected: false,
      services: []
    });

    // 你的 BLE 逻辑代码

    return {
      bleDevice,
      bleState
    };
  }
};

3. API 兼容性问题

uni-app 的某些 API 可能在 Vue3 中存在兼容性问题。确保你使用的 uni-app 版本支持 Vue3，并且你使用的 API 在 Vue3 中是兼容的。

你可以查看 uni-app 的官方文档，确认你使用的 API 是否支持 Vue3。

4. 依赖库兼容性

如果你在项目中使用了第三方库来处理 BLE 通信，确保这些库与 Vue3 兼容。某些库可能只支持 Vue2，或者需要额外的配置才能在 Vue3 中正常工作。

5. 错误处理

Vue3 的错误处理机制可能与 Vue2 不同。确保你在代码中正确处理了可能的错误，并使用 try-catch 块来捕获异常。

try {
  // 你的 BLE 逻辑代码
} catch (error) {
  console.error('BLE Error:', error);
}

6. 调试

使用 console.log 或 debugger 语句来调试代码，查看在 Vue3 中哪些部分出现了问题。你可以逐步注释掉代码，找到导致问题的具体行。

7. 升级依赖

确保你的 uni-app 和相关依赖库是最新版本，以避免已知的兼容性问题。

npm update

8. 使用 Vue2 模式

如果以上方法都无法解决问题，你可以考虑暂时使用 Vue2 模式进行开发，直到 Vue3 的兼容性问题得到解决。

在 uni-app 项目中，你可以通过修改 manifest.json 文件来指定使用 Vue2 模式：

{
  "vueVersion": "2"
}
回到顶部