首页 > 代码库 > 【微信公众平台开发】借用微信内置图片浏览功能

【微信公众平台开发】借用微信内置图片浏览功能

开发微信公众平台时,碰到文章中有非常多图片,须要能够点开图片浏览;那么点击图片直接调用微信client自带的图片播放组件会省非常多事。否则你得去摆弄折腾各种图片浏览插件,比方photoswipe。


个人封装功能成一个js文件。把该文件放到你须要的网页里面就可以,这样文章当你点击图片时,就会调用图片浏览功能!

<script>
		function addLoadEvent(func){ 
			//将函数作为參数,此函数就是 onl oad 触发时须要运行的某个函数
			    var oldonload=window.onload; 
			    //将原来的 onl oad 的值赋给暂时变量 oldonload。
			    if(typeof window.onload!="function"){
			    //推断 onl oad 的类型是否是 function。假设已经运行window.onload=function(){...} 赋值,那么此时 onl oad 的类型就是 function
			    //否,则说明 onl oad 还没有被赋值,当前任务 func 为第一个添?的任务
			        window.onload=func(); 
			        
			        //作为第一个任务,给 onl oad 赋值
			    }else{ 
			    //是,则说明 onl oad 已被赋值,onload 中先前已有任务添?
			        window.onload=function(){
			            oldonload();
			            func(); 
			            //作为兴许任务,追加到先前的任务后面
			        }
			    }
		}
		var imgs=new Array();
		var nowImgurl="";
		function getPicInfo()
		{
			var imgObj=document.getElementsByTagName('img');  //获取图文中全部的img标签对象
			
			for(var i=0; i<imgObj.length; i++)
			{
				imgs.push(imgObj[i].src); 
				
				//以下调用微信内置图片浏览组建
				imgObj[i].onclick=function(){
					nowImgurl = this.src;	//获取当前点击图片url
					WeixinJSBridge.invoke("imagePreview",{
						"urls":imgs,
						"current":nowImgurl
						})
				}
			}
		}
		
		addLoadEvent(getPicInfo);	//监听事件
		
</script>