uni.previewImage 原生支持多端预览,但需确保 urls 为合法数组、current 与其中某项完全相等,且路径协议适配各端要求;H5 支持相对/网络路径,小程序仅认网络地址或 base64(需域名白名单),App 支持 file:// 和 /static/;loop、showMenu、indicator 等参数行为因端而异;白屏卡顿多因非法 URL 或平台配置缺失,须逐端验证。

直接用 uni.previewImage,别自己写全屏组件——它原生支持多端、手势缩放、长按保存,且零依赖。
为什么点一下没反应?检查 urls 和 current 格式
最常见失败不是 API 调用错,而是参数不合法:
-
urls必须是数组,哪怕只有一张图也要写成['https://xxx.jpg'],不能传字符串或null -
current必须和urls数组里某一项「完全相等」:协议、大小写、斜杠、后缀都不能差——比如'/static/a.jpg'和'static/a.jpg'在安卓上会定位失败 - 空字符串、
undefined、非图片后缀(如.html)会被静默过滤,预览直接黑屏或卡住
H5 / 小程序 / App 三端路径怎么写才通用?
不同平台对路径协议敏感度差异极大,硬写 /static/xxx.jpg 很可能只在 H5 跑通:
- H5 端:支持
/static/xxx.jpg(需确保已放在static目录),也支持http://或https://;但禁止file:// - 微信小程序:只认网络地址(含
https://)或 base64 字符串,且域名必须在manifest.json的「下载文件合法域名」里配置 - App 端(iOS/Android):支持
file://临时路径(如uni.chooseImage返回的),也支持/static/xxx.jpg,但部分 iOS 版本对相对路径解析不稳定
推荐做法:开发期统一用 require('@/static/xxx.jpg') 或 uni.getRealPathSync('/static/xxx.jpg')(仅 App 有效);上线前全部替换为 CDN 地址,避免协议混用。
缩放、滑动、菜单这些功能怎么控制?
uni.previewImage 的行为不是靠 CSS 或 JS 拦截实现的,而是各端原生能力封装,所以参数影响很直接:
-
loop: true:仅微信小程序和 App 支持循环滚动,H5 端始终禁用 -
showMenu: false:关闭右上角菜单(长按保存、发送给朋友等),App 端默认不显示,小程序默认显示 -
indicator: 'number':微信小程序显示「1/3」样式,H5 端通常只显示进度条,不显示数字 - 双指缩放:微信小程序默认开启;App 端 iOS/Android 默认不支持缩放(除非用
movable-view自研,但体验差、内存高)
点击后白屏 / 卡顿 / 控制台无报错?优先排查这三点
这种“静默失败”最容易浪费时间:
- 检查
urls数组里是否混入了后端返回的错误地址(如'/api/image?xxx=error'),它不会报错,但会导致预览器加载失败 - H5 端若报
Failed to execute 'postMessage' on 'DOMWindow',基本是 iframe 沙箱或跨域导致,此时应放弃uni.previewImage,改用原生+position: fixed手动实现 - 小程序真机调试时,
/static/xxx.jpg在开发者工具能显示,但真机上空白——大概率是域名未加白名单,或图片实际 404(控制台不提示)
复杂点在于:同一套代码,在 H5 是路径问题,在小程序是域名白名单问题,在 App 又可能是 file 协议兼容问题。不要假设“跑通一个端就全通”,每个平台都得单独验一次真实路径和响应状态。











