微信公众号开发(1)——微信H5图片点击放大预览

微信公众号开发踩了很多坑，在此处以作笔记。

需求重现

微信公众号H5网页，图片点击放大实现预览，这是微信自己的接口，Android可以完美的自己实现，可是ios却不能实现。

解决办法

html文件

var imgObj = $("#packageDetailBox img"); //这里改成相应的对象

js文件

/*此方法用来解决，微信H5图片点击放大*/
/*imgObj接收图片的合集*/
function funcReadImgInfo(imgObj){
    var imgs = [];
    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');
            WeixinJSBridge.invoke("imagePreview",{
                "urls":imgs,
                "current":nowImgurl
            });
        });
    }
}

//因为Android可以完美的调用，如果用此方法，会调用两次图片，页面不友好，因此判断一下用户机型内核，做相应的操作
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
    // alert("安卓")
}
if (isIOS) {
    // alert("ios")
}

这样就可以了！仅供参考！