uni.previewImage是唯一推荐的跨端多图预览方案,必须传urls数组和数字索引current,禁止传单URL或字符串current,需过滤无效路径、统一HTTPS/base64协议,禁用loop和indicator以保兼容。

uni.previewImage 是唯一推荐的跨端多图预览方案,不用自己写手势、不用 canvas、不依赖第三方组件——但必须传 urls 数组,current 必须是数字索引,否则 H5 黑屏、小程序跳首图、App 卡死。
urls 必须是数组,不能只传单图 URL
常见错误是点击某张图就只把它的 URL 传进去:uni.previewImage({ current: 'https://a.jpg' })。这会导致预览器只显示一张、无法左右滑动,因为 urls 是必填项,缺了就降级失败。
- 哪怕只预览一张,也要包成数组:
urls: [singleUrl] - 多图时确保数组里全是有效字符串:
urls = this.imageList.filter(u => u && typeof u === 'string') - 过滤掉
null、undefined、video地址、data:base64(部分平台不支持) - 微信小程序不支持
tempFilePath直传,H5 不支持任何本地路径(/static/或file://),统一转 HTTPS 或 base64 前缀
current 必须传数字索引,别用字符串匹配
传字符串如 current: 'https://a.jpg' 看似直观,但实际会触发全等(===)遍历匹配:大小写、末尾斜杠、?v=1 和 ?v=2 都算不相等,直接 fallback 到第 0 张。
- 始终用渲染时的数组下标:
current: index,不是current: urls[index] - 如果图片列表来自分页或搜索过滤,index 是局部索引,要映射回全局数组位置
- App 平台(1.9.5+)中
current是必填项,不传会直接报错;小程序和 H5 虽可省略,但建议显式写上
H5 和小程序对临时路径处理完全不同
用户用 uni.chooseImage 拿到的 tempFilePaths 在不同端行为差异极大,混用会导致黑屏或静默失败。
- 小程序:不支持
tempFilePath直传urls,必须先uni.uploadFile上传,或转 base64(加前缀data:image/png;base64,) - App:支持
tempFilePath和_www/路径,但 iOS 可能因沙盒限制需补全协议(file://) - H5:只认完整 URL(
https://)或相对路径(/static/),tempFilePath是无效字符串,传进去就是黑屏 - 稳妥做法:H5 端提前判断
uni.getSystemInfoSync().platform === 'h5',走本地服务代理或 CDN 上传后拼 URL
loop 和 indicator 别开,默认表现不一致
看着方便的功能,实际跨端几乎没法统一:iOS App 的 loop: true 滑到末尾可能卡住,H5 根本不响应 indicator,微信小程序显示 “1/3” 但抖音小程序不显示。
- 禁用
loop(设为false),除非你只跑 App 端且已真机测过边界滑动 - 不要依赖
indicator: 'number',需要指示器就自己写悬浮层 + 监听uni.onPreviewImageChange(仅 App 支持) - 所有平台都支持
success回调,但不包含当前索引;想做进度同步,得在@click触发前缓存好 index
最易忽略的是数据清洗和路径协议一致性——90% 的“预览白屏”“点第三张却显示第一张”都源于 urls 数组里混入了空值、视频地址或大小写不一致的 URL,而不是代码逻辑本身有问题。


















