最近开发了一套资讯相关的web页面，嵌套在微信中，可支持点赞、评论等...在文章详情中，图片需要点击放大，随手势放大缩小，左右可滑动切换，总之类似于微信公众号效果。
开始想的方案是用轮播插件、或者在img外面套一层a标签，a标签的链接放图片链接。
那么我来总结一下这两种方案的优缺点：
- 使用轮播插件：
1、效果酷炫；
2、可支持多种操作，如：手势缩放、旋转、滑动切换...；
3、缺点则是，插件无疑加大的移动端加载效率；
4、安卓设备下支持性不佳，出现卡顿。
- 使用a标签方法：
1、使用简单；
2、也是调用微信自带的照片浏览器，加载效果高、同样支持缩放手势操作；
3、界面简陋~low；
4、新开链接，有明显跳走效果。
有没有一种解决方案可以取长补短的？要求不高只要跟公众号打开图片浏览效果一样就可以了。
答案是：有，使用previewImage。
那么这是个什么鬼呢？（微信开发-预览图片接口）
以下是我项目中的代码：
<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>
最终效果：
就这样简简单单的实现了预期的效果☺