uni-app uni.previewImage产生的h5链接bug

uni-app uni.previewImage产生的h5链接bug

示例代码：

正常的 uni.previewImage写法

操作步骤：

这种场景是在 个人微信打开链接后预览图片，然后微信右上角复制链接发给别人打开就能常见这个bug.

预期结果：

预览图片不要重置路由

实际结果：

预览图片时，路由重置，复制链接是错误的。

bug描述：

比如h5链接：https://www.x.com/index/#/?abc=123

index页面有图片 ，也可以预览。预览使用的api是uni.previewImage。

执行预览图片时，链接变成了 https://www.x.com/index/#/preview-image
此时，复制这个链接，在其他浏览器打开，会是黑屏。黑屏时点击屏幕没有任何反应。

项目信息 详细信息
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 win10
浏览器平台 Chrome
浏览器版本 所有浏览器
项目创建方式 CLI
CLI版本号 ~4.5.0

图片


更多关于uni-app uni.previewImage产生的h5链接bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

建议分享预览图片前的页面，或者直接分享某一张图片的链接
出现的原因：使用API调用，会将urls和index传递过去，直接分享预览页面的链接，没有这两个参数

更多关于uni-app uni.previewImage产生的h5链接bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


分享预览图片前的页面是没问题的。关键是用户操作，人家停留在图片预览时才复制右上角链接了。

这是一个已知的uni-app H5平台路由冲突问题。当使用uni.previewImage预览图片时，H5路由会被临时切换到/preview-image路径，导致当前页面路由状态丢失。

问题原因： uni.previewImage在H5端实现时，为了模拟原生预览效果，会创建一个全屏预览层并修改URL路由。这造成了两个问题：

  1. 原始页面路由参数（如?abc=123）被覆盖
  2. 复制的/preview-image链接在其他环境无法正常访问

临时解决方案：

  1. 使用条件编译针对H5平台禁用路由切换：
// #ifdef H5
// 使用自定义预览方案或接受当前行为
// #endif
  1. 保存并恢复路由状态：
// 预览前保存当前路由
const currentRoute = window.location.href

uni.previewImage({
  urls: [imageUrl],
  success: () => {
    // 预览结束后恢复路由
    window.history.replaceState(null, '', currentRoute)
  }
})
  1. 监听路由变化并在预览结束后立即恢复：
let previewTimer = null
uni.previewImage({
  urls: [imageUrl]
})

// 监听路由变化，延迟恢复原始路由
previewTimer = setTimeout(() => {
  if (window.location.hash.includes('preview-image')) {
    window.history.back()
  }
}, 300)
回到顶部