uni.previewimage是uni-app官方推荐的多端图片预览方案,需传数组格式urls和完全匹配的current字符串路径,各端对路径要求不同且存在手势行为差异。

直接用 uni.previewImage 就行,这是 uni-app 官方封装、多端兼容性最好、性能最稳的方案。自己写全屏组件或套 movable-area 不仅开发成本高,还容易在 iOS App 上卡顿、手势失效、内存泄漏——这不是写法问题,是渲染层限制。
urls 必须是数组,current 必须严格匹配某一项
哪怕只预览一张图,urls 也得传数组:['https://xxx.jpg'],不能传字符串。否则 H5 和部分安卓 App 会静默失败。
current 参数不是索引(比如 0),而是必须和 urls 中某一项**完全一致的字符串**(协议、大小写、斜杠都不能差):
- ✅ 正确:
current: 'https://a.com/1.jpg',且该值在urls数组里存在 - ❌ 错误:
current: 0、current: '1.jpg'、current: '/static/1.jpg'(而 urls 是['https://cdn.com/1.jpg'])
安卓端尤其敏感,错一点就定位失败甚至黑屏。
H5 和小程序对图片路径要求完全不同
H5 端支持 /static/xxx.jpg 这类相对路径(需确保文件真在 static 目录下),但不支持 file://;微信小程序则**只认网络地址或 base64**,且域名必须在 manifest.json 的“微信小程序服务器域名”里白名单配置过。
常见静默失败场景:
- 你传了
/static/1.jpg,H5 能跑,微信开发者工具也显示正常,但真机上点不动、无报错 - 你用了
uni.chooseImage拿到的临时路径(如file:///var/mobile/...jpg),App 端可用,小程序直接报错
跨端安全做法:把 static 图片提前上传 CDN,运行时统一用 HTTPS 地址;临时调试可读取后转 base64(注意大图可能超 2MB 限制)。
previewImage 在不同端的手势和行为差异
别指望它在所有平台都一样:
- 微信小程序:支持双指缩放、长按保存、滑动切换、loop 循环
- App(iOS/Android):默认不支持缩放,但能滑动;加
showMenu: true可唤出原生菜单(含保存) - H5:本质是弹层或新开页,不支持手势操作,
loop强制禁用,indicator: 'number'可能只显示进度条
如果你的需求是「必须双指缩放 + 拖动 + 自定义 UI」,那 uni.previewImage 就不合适了——得切回 movable-area 方案,但要接受 H5 卡顿、小程序真机兼容性波动、App 内存压力大的现实。
真正难的不是调用 API,而是路径怎么跨端对齐、错误怎么静默兜底、用户点了没反应时你连日志都看不到。这些细节不提前压测,上线后只能靠用户截图反馈再返工。











