非微信图文网页，微信浏览器点击图片弹出自带图片浏览 （原创请勿转载）

微信图文网页点击插入的图片，会在微信的图片浏览器上浏览图片可以放大缩小，但是自己做的网页没有这个功能，下面我就来介绍一下这个功能，做出一个完美一点的demo。如果不想看过程直接到最后看demo...

教程需要：脚本编辑器（记事本或者是notepad++、DW都可以）、jquery.js、微信浏览器作为测试

如下图效果

我们用到的是微信内置JsAPI的一个，这个函数在微信的开发者平台文档里我没有找到，是在网上搜到的。

WeixinJSBridge.invoke(‘imagePreview‘,{
           ‘current‘ : curSrc,
           ‘urls‘ : srcList
}）;

‘urls‘: srcList 是一串json格式文本。形似这样子：

["图片地址","图片地址"]
                    //输出效果如下
["http:\/\/3.whatsthewater.sinaapp.com\/images\/pic1.png","http:\/\/3.whatsthewater.sinaapp.com\/images\/pic2.png"]

就是说 所有的要在本页面显示的图片的src都在这个json里面。文章最后我讲一下如何把这些地址放在json里面。

那么‘current‘ : curSrc是什么呢，就是当前要浏览的这个图片是这个json格式里面的值。

我们如何获取呢？

$(‘img‘).click(function(){
           var index = $(this).attr("data-index"); //这里是当用户点击图片时候，点击的第几个图片
                });

然后我们继续 当鼠标点击时候，我获取了当前点击的图片，紧接着我们需要触发我们打开微信图片浏览器，也就是使用到了我们这个函数。

$(‘img‘).click(function(){
           var index = $(this).attr("data-index"); //这里是当用户点击图片时候，点击的第几个图片
           imagePreview(srcList[index],srcList); //这个时候，srcList还没有，不过我等会讲
                });

srcList有了 我们要讲第一个参数 ‘urls‘ : srcList 的获取了。

这是一个json格式数据，首先我的思路是把所有的图片地址放在数组里然后再用函数转换成json格式。

先说一下如何放在数组里：

                var aa=[]; 
		var i=0;
		var src=[];
		var json=null;
		aa=$(‘img‘);    //把所有img节点放在数组
		for (i=0;i<aa.length;i++){
			src[i]=aa[i].src;  //获取所有img的src放在数组src中。
		}
		var srcList =arrayToJson(src);   //这个就是我的转换json的函数，并且赋值给srcList了

接着我说一下数组转换json函数

function arrayToJson(o) { 
	var r = []; 
	if (typeof o == "string") return "\"" + o.replace(/([\‘\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\""; 
	if (typeof o == "object") { 
	if (!o.sort) { 
	for (var i in o) 
	r.push(i + ":" + arrayToJson(o[i])); 
	if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) { 
	r.push("toString:" + o.toString.toString()); 
	} 
	r = "{" + r.join() + "}"; 
	} else { 
	for (var i = 0; i < o.length; i++) { 
	r.push(arrayToJson(o[i])); 
	} 
	r = "[" + r.join() + "]"; 
	} 
	return r; 
	} 
	return o.toString(); 
}

把上面的代码综合一下是这样的

<script>	
//下面这个函数用来转换数组到json格式
function arrayToJson(o) { 
	var r = []; 
	if (typeof o == "string") return "\"" + o.replace(/([\‘\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\""; 
	if (typeof o == "object") { 
	if (!o.sort) { 
	for (var i in o) 
	r.push(i + ":" + arrayToJson(o[i])); 
	if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) { 
	r.push("toString:" + o.toString.toString()); 
	} 
	r = "{" + r.join() + "}"; 
	} else { 
	for (var i = 0; i < o.length; i++) { 
	r.push(arrayToJson(o[i])); 
	} 
	r = "[" + r.join() + "]"; 
	} 
	return r; 
	} 
	return o.toString(); 
}
//这个是调用微信图片浏览器的函数 
function imagePreview(curSrc,srcList) {
				//这个检测是否参数为空
                if(!curSrc || !srcList || srcList.length == 0) {
                    return;
                }
				//这个使用了微信浏览器提供的JsAPI 调用微信图片浏览器
                WeixinJSBridge.invoke(‘imagePreview‘, { 
                    ‘current‘ : curSrc,
                    ‘urls‘ : srcList
                });
};

(function($){
		//下面是获取当前页面所有的img的src 转成数组 并且 转换成json格式
		var aa=[];
		var i=0;
		var src=[];
		var json=null;
		aa=$(‘img‘);
		for (i=0;i<aa.length;i++){
			src[i]=aa[i].src;    //把所有的src存到数组里
		}
		var srcList=arrayToJson(src); //转换成json并赋值给srcList
		//下面是点击图片的时候获取当前第几个图片并且启用咱们做的调用微信图片浏览器的函数
        $(‘img‘).click(function(){
                	var index = $(‘img‘).index(this);
                    imagePreview(srcList[index],srcList);
                });
				
})(jQuery);
</script>

文章未经本人允许不得转载，谢谢合作。

非微信图文网页，微信浏览器点击图片弹出自带图片浏览 （原创请勿转载）,布布扣,bubuko.com