uni-app uni.previewImage在鸿蒙next下异常

uni-app uni.previewImage在鸿蒙next下异常

开发环境 版本号 项目创建方式
Mac 15.5 (24F74) HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：4.66

手机系统：HarmonyOS NEXT

手机系统版本号：HarmonyOS 5.0.1

手机厂商：华为

手机机型：nova 13

页面类型：vue

vue版本：vue3

打包方式：离线

示例代码：


const previewImageClick = (index) => {
console.log("调用了。。。: ");
uni.previewImage({
current: imageLinks.value[index],
urls: imageLinks.value,
success: function(data) {
console.log('成功' + JSON.stringify(data));
console.log('imageLinks.value' + JSON.stringify(imageLinks.value));
},
fail: function(err) {
console.log(err.errMsg);
}
});
};

操作步骤：

  • 点击图片预览

预期结果：

  • 正常可以预览，并且可以滑动

实际结果：

  • 直接黑屏，点击就关掉了

bug描述： uni.previewImage使用这个方法的时候，安卓和iOS可以正常预览图片，但是鸿蒙next，直接就黑屏。试了网络图片和本地图片都不行


更多关于uni-app uni.previewImage在鸿蒙next下异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

测试了一下，可以正常预览图片，下面是我的测试代码，附件是我的测试视频，你试试这个代码有没有问题
<template>
<view>
<slider id="slider"></slider>
<button @click=“handleClick”>打印节点信息</button>
</view>
</template>

<script> export default { methods: { handleClick() { uni.previewImage({ urls: ['https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni.png', 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni.png' ], current: 0, success(res) { console.log('success', res) }, fail(res) { console.log('fail', res) }, }) } } } </script>

更多关于uni-app uni.previewImage在鸿蒙next下异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


感觉鸿蒙next的写法限制有点严格，我之前用的安卓和iOS，都是可以的，现在转为鸿蒙就要使用扩展运算，看我下面的代码。这样的话我项目中所有的预览都要改了，改成扩展运算创建数组

回复 y***@163.com: 先解决你的问题

回复 DCloud_UNI_JBB: 好的，多谢，我先用扩展运算符解决问题吧

回复 DCloud_UNI_JBB:我调用这个api直接报错了

const handleClick = () => { console.log("imageLinks.value: " + JSON.stringify(imageLinks.value)); // let urls=[…imageLinks.value]; let urls=imageLinks.value; uni.previewImage({ urls: urls, current: ‘0’, success(res) { console.log(‘success’, res) }, fail(res) { console.log(‘fail’, res) }, }) }; let urls=[…imageLinks.value]; 可以正常展示 let urls=imageLinks.value; 黑屏
我怀疑是通过ref绑定的拿不到，然后使用扩展运算创建一个新数组就可以正常显示，有点奇怪

根据您描述的问题，uni.previewImage在HarmonyOS NEXT上出现黑屏现象，这可能是由于鸿蒙系统兼容性问题导致的。以下是可能的原因和解决方案：

  1. 兼容性问题：
  • HarmonyOS NEXT与Android/iOS在底层实现上有差异，可能导致uni-app的部分API表现不一致
  1. 临时解决方案：
  • 可以尝试使用条件编译针对鸿蒙系统使用不同的预览方式
  • 检查图片链接格式是否符合鸿蒙要求
  1. 代码调整建议：
const previewImageClick = (index) => {
  if(uni.getSystemInfoSync().osName === 'harmony') {
    // 鸿蒙特殊处理
    uni.showToast({ title: '暂不支持图片预览' })
  } else {
    uni.previewImage({
      current: imageLinks.value[index],
      urls: imageLinks.value,
      success: (data) => {
        console.log('预览成功', data)
      },
      fail: (err) => {
        console.error('预览失败', err)
        uni.showToast({ title: '预览失败' })
      }
    })
  }
}
回到顶部