微信圖片預覽的小經驗

微信圖片預覽的心得

前幾天應公司的需求給H5頁面增加了一個圖片預覽的功能。講道理並不難，只不過是因爲第一次寫，自己也是個剛剛工作的小白，走了很多的彎路。

首先寫關於關於微信的東西看微信的SDK文檔是肯定要的。

附上鍊接地址[微信sdk文檔]

找到SDK文檔圖片預覽的接口

wx.previewImage({
current: '', // 當前顯示圖片的http鏈接
urls: [] // 需要預覽的圖片http鏈接列表
});

以下完整代碼

//要遍歷所有需要預覽的圖片
    function taskPreviewImage(){
    var imgsurl=[];  
    var nowurl='';  
    var taskImgObj=$(".taskPreviewImage");
    for(var i=0;i<taskImgObj.length;i++){ 
        imgsurl[i]=taskImgObj[i].src;  
        taskImgObj[i].onclick=function(){  
            nowurl=this.src;  
            wx.previewImage({  
                current: nowurl,  
                urls: imgsurl  
            });               
        }

    }
}

但是也有問題，我不知是我的代碼問題，還是本身安卓的微信有bug,就是不能掃描二維碼,ios正常。希望大神賜教

這裏我想了兩個解決方案，一個需要前後端配合，還有一個就是純前端解決。

1. 後臺大致的判斷一下圖片是不是二維碼，前端再做處理，如果是就不加預覽效果，如果不是，就不加預覽效果，單獨給他加一個點擊圖片放大的功能。
2. 可以給圖片數組的第一張不加預覽功能，單獨給他加一個點擊圖片放大的功能，其他正常加。