微信内置浏览器图片查看方式的原生实现(非jssdk)

作者: zms! 日期: 2018.04.02 本文发布于727天前 分类: JS琐碎 相关：

对于非公众平台网页,想调起图片预览组件,就跟公众号文章一样的图片阅读方式,实现起来是比较简单的,官方也提供了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>  

最终效果和微信公众号文章的图片查看方式一样了

返回上一页

---

讨论区

---

你可能也喜欢

打开网页，图片延迟加载 2018.05.06,2 pv
JS屏蔽右键简单代码，放在body内即可 2018.04.18,2 pv
微信内置浏览器图片查看方式的原生实现(非jssdk) 2018.04.02,2 pv

---

ZMS系统自带的JS广告代码 2017.05.23,0 pv
简单倒计时JS 2015.08.27,9 pv
使用JS为网站加速，让网站实现"预加载"，加速响应！ 2015.02.27,7 pv