uni-app 升级VUE3后，录音时报错

uni-app 升级VUE3后，录音时报错

示例代码：

【export default】  
LuyinID: {},  

【onLoad】  
this.LuyinID = uni.getRecorderManager();
this.innerAudioContext = uni.createInnerAudioContext();
this.innerAudioContext.autoplay = true;  

【methods】  
this.LuyinID.start();   //开始录音

操作步骤：

如代码描述

预期结果：

升级VUE3后，录音时报错：reportJSException >>>> exception function:WEEX_CALL_JAVASCRIPT, exception:JavaScript execute error!Uncaught TypeError: Cannot read property ‘duration’ of undefined，导致无法录音，在3.4.5前正常

实际结果：

升级VUE3后，录音时报错：reportJSException >>>> exception function:WEEX_CALL_JAVASCRIPT, exception:JavaScript execute error!Uncaught TypeError: Cannot read property ‘duration’ of undefined，导致无法录音，在3.4.5前正常

bug描述：

升级VUE3后，录音时报错：reportJSException >>>> exception function:WEEX_CALL_JAVASCRIPT, exception:JavaScript execute error!Uncaught TypeError: Cannot read property ‘duration’ of undefined，导致无法录音，在3.4.5前正常


更多关于uni-app 升级VUE3后，录音时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

这是什么原因呀，这个报错是啥意思？

更多关于uni-app 升级VUE3后，录音时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


bug 已确认，已加分。预计下版修复

alpha 3.4.10 已修复

谢谢，辛苦了

在 uni-app 升级到 Vue 3 后，如果遇到录音时报错，可能是由于以下几个原因导致的。以下是一些常见的排查步骤和解决方案：

1. 检查 uni-app 版本兼容性

确保你使用的 uni-app 版本支持 Vue 3。可以通过以下命令检查当前版本：

npm list @dcloudio/uni-app

如果版本过低，建议升级到最新版本：

npm install @dcloudio/uni-app@latest

2. 检查录音 API 的使用

uni-app 的录音 API 是 uni.getRecorderManager()。确保你的代码中正确使用了该 API。以下是一个示例：

const recorderManager = uni.getRecorderManager();

recorderManager.onStart(() => {
  console.log('录音开始');
});

recorderManager.onStop((res) => {
  console.log('录音结束', res.tempFilePath);
});

recorderManager.start({
  format: 'mp3', // 录音格式
  duration: 60000, // 录音时长，单位 ms
});

3. 检查权限配置

在 Vue 3 中，权限配置可能需要重新检查。确保在 manifest.json 中正确配置了录音权限：

{
  "app-plus": {
    "permissions": {
      "audio": {
        "description": "需要录音权限"
      }
    }
  }
}

4. 检查 Vue 3 的生命周期钩子

Vue 3 的生命周期钩子与 Vue 2 有所不同。确保你在正确的生命周期钩子中调用录音 API。例如：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const recorderManager = uni.getRecorderManager();

    onMounted(() => {
      recorderManager.start();
    });

    onUnmounted(() => {
      recorderManager.stop();
    });
  }
};

5. 检查错误信息

如果仍然报错，请查看具体的错误信息。常见的错误可能包括：

  • 权限问题：确保用户已授权录音权限。
  • API 调用问题：确保录音 API 在正确的时机调用。
  • 平台兼容性问题：某些 API 可能在不同平台（如 H5、小程序、App）上有不同的表现。

6. 调试和日志

在开发过程中，可以通过 console.log 或 uni.showToast 打印日志，帮助定位问题。例如：

recorderManager.onError((err) => {
  console.error('录音出错', err);
  uni.showToast({
    title: '录音出错',
    icon: 'none'
  });
});
回到顶部