微信企业号办公系统-图片预览放大功能-previewImage

Posted 2020-07-09 随风

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

然而自己在微信里开发的网页，里面的图片点击后没办法实现这个效果，然后就去看了下微信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.cnblogs.com/1.jpg"><img src="https://www.cnblogs.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>

　　效果图：

多张图片支持左右滑动

放大后