uni.previewImage是最轻量多端兼容的图片预览方案,需传入urls数组(即使单图)、current索引严格匹配路径,注意H5不支持file://、小程序需网络地址或base64且域名白名单。

uni-app里怎么用uni.previewImage实现点击放大
直接调用uni.previewImage是最轻量、最稳妥的方案,它原生支持iOS/Android/App/小程序多端,不需要自己写全屏组件或处理手势缩放。但很多人调用后没反应,常见原因是传参格式不对或图片路径不合法。
-
urls必须是数组,哪怕只预览一张图也要写成['https://xxx.jpg'],不能传字符串 -
current要和urls里对应项完全一致(包括协议、大小写、斜杠),否则安卓端可能定位失败 - H5端默认不支持本地
file://路径,必须走http(s)://或/static/xxx.jpg这种相对路径(需确保已放在static目录下) - App端若用
uni.chooseImage选的临时路径(如file:///var/mobile/.../xxx.jpg),可直接传入,但不能跨平台复用——小程序里这个路径会报错
为什么previewImage在微信小程序里点不动
微信小程序要求所有图片必须是网络地址或base64,且需在downloadFile白名单域名中。如果你传的是本地/static/路径,微信开发者工具可能显示正常,真机上会静默失败,控制台也不报错。
- 检查
manifest.json里的“微信小程序服务器域名”是否配置了图片所在域名 - 临时调试可用
uni.getFileSystemManager().readFileSync读取static图转base64,再传给urls(注意长度限制,大图慎用) - 更可靠的做法:把
static里的图提前上传到CDN,运行时用CDN地址替换本地路径
自定义全屏看图组件的三个硬伤
有人坚持手写swiper + scale动画模拟预览,结果卡顿、双指失效、内存暴涨。这不是代码问题,而是uni-app生命周期和渲染机制导致的固有限制。
- Webview层对
transform: scale()的重绘优化差,尤其在iOS WKWebView里,快速缩放极易掉帧 - 手势事件(如
touchmove)在swiper内部被拦截,双指缩放逻辑很难精准捕获两指间距变化 - 每张图都用
image标签加载,预加载多图时内存占用翻倍,低端安卓机容易闪退
除非你明确需要加水印、下载按钮或自定义toolbar,否则别碰自定义方案。
如何让previewImage支持长按保存
默认情况下,uni.previewImage在App和微信小程序里长按能保存,但H5端不支持。如果业务强依赖此功能,得降级处理:
- App端:无需额外操作,系统相册权限开启后自动支持
- 微信小程序:确保
manifest.json中mp-weixin节点有"permission": {"scope.writePhotosAlbum": {"desc": "保存图片到相册"}} - H5端:只能用
canvas临时绘制+toDataURL生成blob,再触发download属性下载——但用户感知是“下载”,不是“保存到相册”,且部分浏览器会拦截弹窗
真机测试时务必分端验证,同一套代码在H5里长按无反应,不代表小程序也有问题。


















