调用微信接口实现图片预览效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tangtang5963/article/details/53501934

最近在微信开发中用到了点击图片查看预览图的效果。在网上搜到了两种解决方案，大家可以作为参考：

解决方案一：http://www.mamicode.com/info-detail-124081.html

解决方案二：http://www.cnblogs.com/xinlinux/p/4223338.html

经过测试发现都有bug，所以自己理解分析了一下，说一下调用微信接口实现图片预览效果 双指放大图片的实现思路。

1. 获取到当前显示的图片的http链接，预览的图片的http连接列表

2. 在图片上绑定click事件，调用微信预览图片接口

微信JS-SDK——预览图片接口

wx.previewImage({
    current: '', // 当前显示图片的http链接
    urls: [] // 需要预览的图片http链接列表
});

<script src="js/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
$(function(){
	var imgsurl=[];
	var nowurl='';
	var imgObj=$("#content img");
	for(var i=0;i<imgObj.length;i++){
		imgsurl[i]=imgObj[i].src;
		imgObj[i].onclick=function(){
			nowurl=this.src;
			wx.previewImage({
			    current: nowurl,
			    urls: imgsurl
			});				
		}
	}
});
</script>