微信中web页面实现和公众号中查看图片一样的效果

　　最近开发了一套资讯相关的web页面，嵌套在微信中，可支持点赞、评论等...在文章详情中，图片需要点击放大，随手势放大缩小，左右可滑动切换，总之类似于微信公众号效果。

　　开始想的方案是用轮播插件、或者在img外面套一层a标签，a标签的链接放图片链接。

　　那么我来总结一下这两种方案的优缺点：

• 使用轮播插件：

　　　　1、效果酷炫；

　　　　2、可支持多种操作，如：手势缩放、旋转、滑动切换...；

　　　　3、缺点则是，插件无疑加大的移动端加载效率；

　　　　4、安卓设备下支持性不佳，出现卡顿。

• 使用a标签方法：

　　　　1、使用简单；

　　　　2、也是调用微信自带的照片浏览器，加载效果高、同样支持缩放手势操作；

　　　　3、界面简陋~low；

　　　　4、新开链接，有明显跳走效果。

　　

　　有没有一种解决方案可以取长补短的？要求不高只要跟公众号打开图片浏览效果一样就可以了。

　　答案是：有，使用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>

 

　　最终效果：

 

就这样简简单单的实现了预期的效果☺

转载于:https://www.cnblogs.com/gaofengming/p/6134119.html