imagePreview接口调用微信自带图片播放器

最新推荐文章于 2024-01-21 21:19:45 发布

weixin_33730836

最新推荐文章于 2024-01-21 21:19:45 发布

阅读量293

点赞数

文章标签：移动开发 python

原文链接：https://my.oschina.net/codespring/blog/478774

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

主要有如下几步：

获取网页中所有图片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上都可以看到正常效果

转载于:https://my.oschina.net/codespring/blog/478774