在微信图文网页中,当点击图片时会放大图片并支持滑动浏览,那么,非微信图文在微信中浏览时,当点击图片后,怎么才能达到这种效果了?好在微信公众号的js-sdk中提供了图片预览接口:数组
wx.previewImage({ current: '', // 当前显示图片的http连接 urls: [] // 须要预览的图片http连接列表 });
1.为了简化代码,首先引入jq(此处省略),第一步则是获取图片, obj为图片容器,例入("wraper img")。微信
function getImg(obj){ var m = []; for(var i=0; i< obj.length; i++){ m[i] = obj[i].src; } return m; }
2.新建函数preview,用来调用微信图片预览接口,代码以下:函数
function preview(current, urls){ if(!current || urls.length == 0){ return ; } WeixinJSBridge.invoke('imagePreview', { 'current': current, 'urls': urls }); }
3.新建点击图片的函数img_click;其意义是当点击图片时,把全部要显示的图片存入数组而且传递给js-sdk的图片预览接口,而后放大显示图片,代码以下:this
function imgClick(obj){ $(obj).click(function(){ var src = getImg(obj); var curent = $(this).index(); preview(src[curent], src); }); }
4.最后当调用执行imgClick便可url