微信吊起内置图片浏览

jquery实现

<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) {
                if (o.hasOwnProperty(i)) {
                    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 = [];
    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>

 

 

原生JS实现

<script>
    function addLoadEvent(func){ 
        //将函数作为参数，此函数就是 onload 触发时需要执行的某个函数
        var oldonload=window.onload; 
        //将原来的 onload 的值赋给临时变量 oldonload。
        if(typeof window.onload!="function"){
            //判断 onload 的类型是否是 function。如果已经执行window.onload=function(){...} 赋值，那么此时 onload 的类型就是 function
            //否，则说明 onload 还没有被赋值，当前任务 func 为第一个加入的任务
            window.onload=func(); 
              
            //作为第一个任务，给 onload 赋值
        }else{ 
            //是，则说明 onload 已被赋值，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
                alert(nowImgurl);
                WeixinJSBridge.invoke("imagePreview",
                    {
                        "urls": imgs,
                        "current": nowImgurl
                    });
            }
        }
    }
    
    addLoadEvent(getPicInfo);    //监听事件

</script>