微信JSSDK接口,previewImage

乱编乱写 21012 Views 7 Comments

在微信里看过文章的应该知道,文章里的图片点击后可以放大、分享和保存。

然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信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中

<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>

标签: JS, 微信,

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
loading