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

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

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

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

使用轮播插件：

1、效果酷炫；

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

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

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

使用a标签方法：

1、使用简单；

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

3、界面简陋~low；

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

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

答案是：有，使用previewImage。

那么这是个什么鬼呢？(微信开发-预览图片接口)

以下是我项目中的代码：

//先引用微信api开发的js库

$app=app('EasyWeChat\\Foundation\\Application');

$js= $app->js;?>

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

});

});

}

});

});

最终效果：

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