微信內置瀏覽器圖片查看方式的原生實現(非jssdk)

對於非公眾平台網頁,想調起圖片預覽組件,就跟公眾號文章一樣的圖片閱讀方式,實現起來是比較簡單的,官方也提供了jssdk來做這個.詳見 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E9.A2.84.E8.A7.88.E5.9B.BE.E7.89.87.E6.8E.A5.E5.8F.A3

 

但是本文並未采用jssdk實現,為什么呢?

jssdk需要先行注入配置,而配置需要到微信服務器進行驗證,這樣一來,會導致頁面加載慢,用戶體驗差.

再說就一個圖片預覽功能,不可能設計到安全問題,因此,繞過了jssdk來實現圖片預覽.

 

代碼如下:

<script>
    var imgsObj = $('img');
    var imgs = new Array();
    for(var i = 0; i < imgsObj.size(); i++){
        imgs.push(imgsObj.eq(i).attr('src'));
    }

        $('img').on('click',function(){
            WeixinJSBridge.invoke('imagePreview', {
            'current': $(this).attr('src'),
            'urls': imgs
        });
        });
</script>

 

最終效果和微信公眾號文章的圖片查看方式一樣了