JS微信網頁使用圖片預覽（放大縮小）

前言

需求在微信網頁中客戶點擊圖片可進行預覽放大縮小功能，網上找了各種js方式實現，

唯一的麻煩就是不兼容或者和項目框架不兼容

次函數只只用於部分客戶端，否則會出現

 WeixinJSBridge is not 

引入js文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" charset="utf-8"></script>

代碼塊

//微信預覽器
            $(document).on('click', '.card-cover', function() {
                //var strify = JSON.stringify(this.src);//獲得當前元素src
                var indexImg = $('.card-cover').index(this);//獲得當前元素的下標，從class中查找
                var wximg = new Array();//所有src集合
                $(".card-cover").each(function(index,item) {
                    wximg.push(item.src);//得到src push到數組
                });
                imagePreview(wximg[indexImg],wximg);//第一個參數通過下標得到當前點擊圖片的src，第二個參數全部的src。
            });
            
            
            //微信函數
            function imagePreview(curSrc,srcList) {
                        //這個檢測是否參數為空
                        if(!curSrc || !srcList || srcList.length == 0) {
                            return;
                        }
                        //這個使用了微信瀏覽器提供的JsAPI 調用微信圖片瀏覽器
                        WeixinJSBridge.invoke('imagePreview', { 
                            'current' : curSrc,
                            'urls' : srcList
                        });
                    }

效果圖

 

 

 

 

 

 

放大后可自由縮放，Android&IOS均在微信可以預覽