微信中web頁面實現和公衆號中查看圖片同樣的效果

　　最近開發了一套資訊相關的web頁面，嵌套在微信中，可支持點贊、評論等...在文章詳情中，圖片須要點擊放大，隨手勢放大縮小，左右可滑動切換，總之相似於微信公衆號效果。

　　開始想的方案是用輪播插件、或者在img外面套一層a標籤，a標籤的連接放圖片連接。

　　那麼我來總結一下這兩種方案的優缺點：

• 使用輪播插件：

　　　　一、效果酷炫；

　　　　二、可支持多種操做，如：手勢縮放、旋轉、滑動切換...；

　　　　三、缺點則是，插件無疑加大的移動端加載效率；

　　　　四、安卓設備下支持性不佳，出現卡頓。

• 使用a標籤方法：

　　　　一、使用簡單；

　　　　二、也是調用微信自帶的照片瀏覽器，加載效果高、一樣支持縮放手勢操做；

　　　　三、界面簡陋~low；

　　　　四、新開連接，有明顯跳走效果。

　　

　　有沒有一種解決方案能夠取長補短的？要求不高只要跟公衆號打開圖片瀏覽效果同樣就能夠了。

　　答案是：有，使用previewImage。

　　那麼這是個什麼鬼呢？（微信開發-預覽圖片接口）

 

　　http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html#.E9.A2.84.E8.A7.88.E5.9B.BE.E7.89.87.E6.8E.A5.E5.8F.A3

　　

　　如下是我項目中的代碼：

　　

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script> //先引用微信api開發的js庫
<?php
    $app=app('EasyWeChat\\Foundation\\Application'); 
    $js = $app->js;
?>
<script type="text/javascript" charset="utf-8">
    wx.config(<?php echo $js->config(array('previewImage')) ;?>); //配置方法
    wx.ready(function(){  //微信讀取
        var srcList = [];
        $.each($('.info_detail .container img'),function(i,item){  //$('.info_detail .container img') 容器中的圖片
            if(item.src) {
                srcList.push(item.src);
                $(item).click(function(e){
                    // 經過這個API就能直接調起微信客戶端的圖片播放組件了
                    wx.previewImage({
                        current: this.src,
                        urls: srcList
                    });
                });
            }
        });
    });
</script>

 

　　最終效果：

 

就這樣簡簡單單的實現了預期的效果☺