在微信里看过文章的应该知道,文章里的图片点击后可以放大、分享和保存。
然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调用。
previewImage是微信客户端给内置浏览器增加的一个Javascript Interface,通过调用这个API,可以调起微信客户端提供的大图片查看组件。
官方说明和例子:
wx.previewImage({ current: '', // 当前显示图片的http链接 urls: [] // 需要预览的图片http链接列表});
document.querySelector('#previewImage').onclick = function () { wx.previewImage({ current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg', urls: [ 'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg', 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg', 'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg' ] });};
可以看出例子中的数据是写死在里面的,所以要自己写个JS,然后把指定div里面图片加载到wx.previewImage中
把图片链接都添加到wx.previewImage里
效果图:
多张图片支持左右滑动
放大后