微信企業號辦公系統-圖片預覽放大功能-previewImage

在微信里看過文章的應該知道，文章里的圖片點擊后可以放大、分享和保存。

然而自己在微信里開發的網頁，里面的圖片點擊后沒辦法實現這個效果，然后就去看了下微信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>

　　效果圖：

多張圖片支持左右滑動

放大后