微信內置瀏覽器圖片查看方式的原生實現(非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>

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