手机端微信内置图片浏览方法实现方式
1: 只需要将你需要浏览的图片地址传入接口,。
比如 我下面的列子,获取图片地址: aa = $(".tab-pane").eq(0).find('img');
我把第一个 类 tab-pane 下面的img 标签 都实现浏览。
如果你要实现《body》里面所有图片 ,就aa = $("body").find("img")
注意: 在微信开发工具上看不出效果,但可以在console 里面能看见接口调用成功
![](https://images2017.cnblogs.com/blog/1189052/201709/1189052-20170908141707038-926999071.png)
// jquery 自己引入
1: 复制下面代码
2: 将你的图片地址数组传给变量 aa。
<script>
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;
}
WeixinJSBridge.invoke('imagePreview', {
'current': curSrc,
'urls': srcList
});
};
(function ($) {
var aa = [];
var i = 0;
var src = [];
var json = null;
aa = $(".tab-pane").eq(0).find('img');
for (i = 0; i < aa.length; i++) {
src[i] = aa[i].src; //把所有的src存到数组里
}
var srcList = arrayToJson(src); //转换成json并赋值给srcList
aa.each(function (index) {
$(this).on('click',function(){
imagePreview(this.src, srcList);
})
})
})(jQuery);
</script>
一心一意一思过,一点一滴一笔拾。