一、微信端网页中图片的展示方式
微信端网页中图片有两种展示方式：平铺与图集。平铺的时候文档内的所有图片全部展开，点击图片则放大。图集的时候只展示一张图片，点击图片的时候以翻页的方式展示一组图片。实现原理对于如下一个图片标签,data-gid用于存放组标识，同一组的data-gid相同。data-index用于存放组中图片的展示顺序，不能相同。onclick中根据data-src处理图片展示。对于图集就只显示一张其他的img设置为隐藏，src与第一个图片一样，或者为空，这样可以减少网页的加载量，提高访问效率。data-src保存图片的真正访问路径。
<img src="http://c.hiphotos.baidu.com/image/pic/item/43a7d933c895d143175ffe2971f082025aaf078a.jpg" data-src="http://c.hiphotos.baidu.com/image/pic/item/43a7d933c895d143175ffe2971f082025aaf078a.jpg" data-gid="g2" data-index="1" onclick="showImg('g2', 1);">
二、图集的实现
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 </head> 5 <body> 6 <img src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" data-src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" onclick="showImg(1,1);" data-gid="1" data-index="1"> 7 <img src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" data-src="http://file20.mafengwo.net/M00/03/26/wKgB3FDkRIiAAyvuABQ-Je1TOyw16.rbook_comment.w235.jpeg" style="display:none;" onclick="showImg(1,2);" data-gid="1" data-index="2"> 8 <img src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" data-src="http://file21.mafengwo.net/M00/BE/89/wKgB3FE63pWAApk2AANestUDQdA39.rbook_comment.w235.jpeg" style="display:none;" onclick="showImg(1,3);" data-gid="1" data-index="3"> 9 <img src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" data-src="http://file25.mafengwo.net/M00/11/66/wKgB4lMK7gqAFTYQAALmxMPzzAc91.rbook_comment.w235.jpeg" style="display:none;" onclick="showImg(1,4);" data-gid="1" data-index="4"> <br> 10 11 <img src="http://file4.mafengwo.net/M00/8C/3D/wKgBm04CpfHu_HchAAGYp2Llh6A18.rbook_comment.w235.jpeg" data-src="http://file4.mafengwo.net/M00/8C/3D/wKgBm04CpfHu_HchAAGYp2Llh6A18.rbook_comment.w235.jpeg" onclick="showImg('a',1);" data-gid="a" data-index="1"> 12 <img src="http://file4.mafengwo.net/M00/8C/3D/wKgBm04CpfHu_HchAAGYp2Llh6A18.rbook_comment.w235.jpeg" data-src="http://file20.mafengwo.net/M00/A4/2E/wKgB3FDvuzyARycuAAY-YDf0uJ409.rbook_comment.w235.jpeg" style="display:none;" onclick="showImg('a',2);" data-gid="a" data-index="2"> 13 14 <script type="text/javascript"> 15 16 var imgDate = {};//二位数组，保持图片的组别，顺序和地址信息 17 var imgs = document.getElementsByTagName("img"); 18 for(var i = 0; i < imgs.length; i++){ 19 var img = imgs[i]; 20 var index = img.getAttribute("data-index");//存放索引 21 var gid = img.getAttribute("data-gid");//组号 data-gid 存放组号 22 var dsrc = img.getAttribute("data-src");//地址 23 if(index && gid && dsrc){ 24 imgDate[gid] = imgDate[gid]||[]; //该组不存在则创建 25 imgDate[gid][index] = dsrc;//按照索引设置地址 26 } 27 } 28 //点击图片时调用，groupid组号，index索引号 29 function showImg(groupid, index) { 30 if (typeof window.WeixinJSBridge != 'undefined') { 31 WeixinJSBridge.invoke('imagePreview', { 32 'current' : imgDate[groupid][index],//当前地址 33 'urls' : imgDate[groupid] //组 34 }); 35 }else{ 36 alert(groupid+"请在微信中查看"+index, null, function(){}); 37 } 38 } 39 </script> 40 </body> 41 </html>
这里定义了两组图片组，在微信段查看就可正常运行。在普通浏览器中点击图片会提示使用微信查看。
如果使用了iframe，需要iframe中的图片也能达到这样的效果，就需要修改showImg函数，修改后的函数如下：
function showImage(groupid, index) { var wxJSbridge = window.WeixinJSBridge || parent.window.WeixinJSBridge; // alert(typeof window.WeixinJSBridge); alert(typeof wxJSbridge); if (typeof wxJSbridge != 'undefined' ) { wxJSbridge.invoke('imagePreview', { 'current' : imgDate[groupid][index], 'urls' : imgDate[groupid] }); }else{ alert("请在微信中查看", null, function(){}); } }