微信JSSDK接口,previewImage
官方说明和例子:
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中
<div id="previewImage"> <img src="https://www.hackhp.com/1.jpg"><img src="https://www.hackhp.com/2.jpg" > </div>
把图片链接都添加到wx.previewImage里
<script> $(document).on(click, #previewImage img,function(event) { var imgArray = []; var curImageSrc = $(this).attr(src); var oParent = $(this).parent(); if (curImageSrc && !oParent.attr(href)) { $(#previewImage img).each(function(index, el) { var itemSrc = $(this).attr(src); imgArray.push(itemSrc); }); wx.previewImage({ current: curImageSrc, urls: imgArray }); } }); </script>
上一篇:
uniapp开发微信小程序-2.页面制作