移动端网页调用微信内置图片浏览组件

* 注意img图片只能是http开头的地址

微信提供标准的图片操作接口。

微信官方接口文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

方式一（使用JQuery）

<script type="text/javascript">
	$(function(){
	    var imgs = [];
	    var imgObj = $(".pdImg");// 获取指定img对象
	    
	    for(var i=0; i<imgObj.length; i++){
	         imgs.push(imgObj.eq(i).attr('src'));
	         
	         // 调用微信内置图片浏览组件
	         imgObj.eq(i).click(function(){
	              var nowImgurl = $(this).attr('src');// 获取当前点击图片url，切记 url必须是http开头链接
	              WeixinJSBridge.invoke("imagePreview",{
	               "urls":imgs,
	               "current":nowImgurl
	              });
	         });
	     }
	
	});
</script>

方式二（使用原生JS）

<script type="text/javascript">
	window.οnlοad=function(){
	    var imgs = [];
	    var imgObj = document.getElementsByClassName("pdImg");// 获取指定img对象
	    
	    for(var i=0; i<imgObj.length; i++){
	         imgs.push(imgObj[i].src);
	         
	         // 调用微信内置图片浏览组件
	         imgObj[i].onclick = function(){
	              var nowImgurl = this.src;// 获取当前点击图片url，切记 url必须是http开头链接
	              WeixinJSBridge.invoke("imagePreview",{
	               "urls":imgs,
	               "current":nowImgurl
	              })
	         };
	     }
	
	}
</script>

 

参考地址：https://blog.youkuaiyun.com/sym134/article/details/97933017