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均在微信可以预览