在微信浏览器中，出现在网页上的图片通过点按一小段时间，可以调出微信隐藏的图片播放器，在播放器中看图可以随意放大缩小，体验更炫酷。不过这个功能默认只对通过微信后台编辑的图文网页有效。想让其他网页在微信浏览器中打开时也拥有这个功能？imagePreview接口可以帮到你。

主要有如下几步：

1. 获取网页中所有图片url，特别注意最后的格式

/**/
var host='http://'+window.location.host;/*获取完整域名*/
var imgs=$('img');
for (i=0;i<imgs.length;i++){f(src===''){src+= "['"+ host +imgs[i].src +"'" ;}else{src+= ",'"+ host +imgs[i].src +"'" ;}
}
src+=']';
src=eval('('+src+')');
/*
*最后src为一个数组，console.log(src)的结果是这样：
[0: "http://localhost/images/9549.jpeg",1: "http://localhost/images/205.jpeg",2: "http://localhost/images/449549.jpeg"]
特别注意：src结果不是这种格式可能会出错，或者iphone上显示不出图片,或者iphone和android上都显示不出图片
*/

2.绑定图片的点击事件,在手机上最好使用touch事件而不是click

/**/
(function(){var startPos;imgs[k].addEventListener('touchstart',imgtouchstart,false);function imgtouchstart(){var touch = event.targetTouches[0];startPos = {time:+new Date};touch.target.addEventListener('touchend',imgtouchend,false);}function imgtouchend(){var touch = event.targetTouches[0];var duration = +new Date - startPos.time;if(duration>300){/*手指按下停留300毫秒触发*/var srcList=src;var index = imgs.index(this);var thissrc=host +this.getAttribute('data-original');/**thissrc:当前点击图片的url*srcList:图片url数组*/imagePreview(thissrc,srcList);}}
})()

3.实现imagePreview接口,没什么特别的，直接这样写

/**/
function imagePreview(curSrc,srcList) {//这个检测是否参数为空if(!curSrc || !srcList || srcList.length == 0) {return;}//这个使用了微信浏览器提供的JsAPI 调用微信图片浏览器if(window.WeixinJSBridge){ WeixinJSBridge.invoke('imagePreview', { 'current' : curSrc,'urls' : srcList});}
};

如上三步，微信6.0以上，android/iphone4,5,6上都可以看到正常效果