微信公衆號開發(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")
}

這樣就可以了！僅供參考！