首页 > 代码库 > 非微信图文网页,微信浏览器点击图片弹出自带图片浏览 (原创请勿转载)
非微信图文网页,微信浏览器点击图片弹出自带图片浏览 (原创请勿转载)
微信图文网页点击插入的图片,会在微信的图片浏览器上浏览图片可以放大缩小,但是自己做的网页没有这个功能,下面我就来介绍一下这个功能,做出一个完美一点的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=http://www.mamicode.com/[];>接着我说一下数组转换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=http://www.mamicode.com/[];>
文章未经本人允许不得转载,谢谢合作。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。