uni-app 真机测试下,uni.chooseVideo选择视频后uni.showLoading动画执行1秒后自动关闭

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app 真机测试下,uni.chooseVideo选择视频后uni.showLoading动画执行1秒后自动关闭

测试过的手机

华为nova5pro 鸿蒙系统2.0.0

示例代码:

uni.chooseVideo({  
    sourceType: ["camera", "album"],  
    compressed: true,  
    success: (res) => {  
        console.log(res);  
        uni.showLoading({  
            title: '上传中',  
            mask: true  
        })  
});

操作步骤:

uni.chooseVideo({  
    sourceType: ["camera", "album"],  
    compressed: true,  
    success: (res) => {  
        console.log(res);  
        uni.showLoading({  
            title: '上传中',  
            mask: true  
        })  
});

预期结果:

uni.chooseVideo从相机选择视频后uni.showLoading动画不自动关闭

实际结果:

uni.chooseVideo从相机选择视频后uni.showLoading动画执行1秒自动关闭

bug描述:

真机测试下,uni.chooseVideo从相机选择视频后uni.showLoading动画执行1秒后会自动关闭,而使用拍摄视频则不会自动关闭

信息类别 信息内容
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 4.08
手机系统 全部
手机厂商 华为
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

2 回复

没复现出这个问题 我手机正常显示loading 会不会是你项目中有代码影响到了这个loading 提供个能复现的demo 或者你创建一个新项目 把你的示例代码放进去测试下


在 uni-app 中进行真机测试时,如果你使用 uni.chooseVideo 选择视频后,uni.showLoading 动画只执行了 1 秒就自动关闭,可能是因为某些异步操作或回调函数触发了 uni.hideLoading,导致加载动画提前关闭。以下是一些可能的原因和解决方案:

1. 检查异步操作

  • uni.chooseVideo 是一个异步操作,如果在选择视频后有其他异步操作(如上传视频、处理视频等),这些操作可能会导致 uni.hideLoading 被提前调用。
  • 确保在所有的异步操作完成后再调用 uni.hideLoading
uni.showLoading({
  title: '加载中...',
  mask: true
});

uni.chooseVideo({
  sourceType: ['camera', 'album'],
  success: (res) => {
    // 处理视频
    processVideo(res.tempFilePath).then(() => {
      uni.hideLoading(); // 在所有异步操作完成后关闭加载动画
    });
  },
  fail: (err) => {
    uni.hideLoading(); // 如果失败,也需要关闭加载动画
    console.error('选择视频失败', err);
  }
});

function processVideo(filePath) {
  return new Promise((resolve, reject) => {
    // 模拟异步操作,如上传视频
    setTimeout(() => {
      console.log('视频处理完成');
      resolve();
    }, 3000); // 假设处理视频需要3秒
  });
}

2. 检查其他代码

  • 确保代码中没有其他地方调用了 uni.hideLoading,尤其是在 uni.chooseVideosuccessfail 回调之外。
  • 如果有其他地方调用了 uni.hideLoading,可能会导致加载动画提前关闭。

3. 使用 setTimeout 模拟延迟

  • 如果你怀疑是异步操作执行时间过短导致的,可以使用 setTimeout 模拟延迟,确保加载动画显示足够长的时间。
uni.showLoading({
  title: '加载中...',
  mask: true
});

uni.chooseVideo({
  sourceType: ['camera', 'album'],
  success: (res) => {
    // 模拟延迟
    setTimeout(() => {
      uni.hideLoading();
      console.log('视频选择成功', res);
    }, 1000); // 延迟1秒后关闭加载动画
  },
  fail: (err) => {
    uni.hideLoading();
    console.error('选择视频失败', err);
  }
});

4. 检查真机环境

  • 有时候真机环境可能与模拟器不同,某些操作在真机上可能会更快或更慢。确保在真机上进行充分的测试,确保加载动画的行为符合预期。

5. 使用 uni.showToast 替代

  • 如果你只需要简单的提示信息,而不是加载动画,可以考虑使用 uni.showToast
uni.showToast({
  title: '加载中...',
  icon: 'loading',
  duration: 1000 // 持续1秒
});

uni.chooseVideo({
  sourceType: ['camera', 'album'],
  success: (res) => {
    console.log('视频选择成功', res);
  },
  fail: (err) => {
    console.error('选择视频失败', err);
  }
});
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!