微信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>
经验分享 程序员 微信小程序 职场和发展