调用微信JSSDK接口实现图片点击放大预览

点击微信公众号中的文章图片，可以放大图片，并且可以滑动预览，如果自己做的网页也想实现这样的效果可以调用微信提供的图片预览接口。

微信sdk文档地址：

https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E9.A2.84.E8.A7.88.E5.9B.BE.E7.89.87.E6.8E.A5.E5.8F.A3

 

首先在网页头部中引入微信的js：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

然后在网页底部添加如下代码：

<script>
    //获取需要预览的图片http链接列表
    function getAllImg()
    {
        var aa = [];
        var i = 0;
        var src = [];
        aa = $("img");
        for (i = 0; i < aa.length; i++) {
            var imgsrc = aa[i].src;
            //确保图片链接是加了http的链接，不能是相对路径
            if(imgsrc.indexOf('http://')==-1) imgsrc = 'http://你的网址'+imgsrc;               
            src[i] = imgsrc;  //把所有的src存到数组里
        }
        return src;
    }

    $("img").click(function(){
        var imgsrc = $(this).attr('src');
        if(imgsrc.indexOf('http://')==-1) imgsrc = 'http://你的网址'+imgsrc;
        wx.previewImage({
            current: imgsrc, // 当前显示图片的http链接
            urls: getAllImg() // 需要预览的图片http链接列表
        });
    });
</script>

效果演示：