微信公众号开发(1)——微信H5图片点击放大预览

微信公众号开发踩了很多坑，在此处以作笔记。

需求重现

微信公众号H5网页，图片点击放大实现预览，这是微信自己的接口，Android可以完美的自己实现，可是ios却不能实现。

解决办法

html文件

var imgObj = $("#packageDetailBox img"); //这里改成相应的对象

js文件

/*此方法用来解决，微信H5图片点击放大*/ /*imgObj接收图片的合集*/ function funcReadImgInfo(imgObj){ var imgs = []; for(var i=0; i<imgObj.length; i++){ imgs.push(imgObj.eq(i).attr('src')); imgObj.eq(i).click(function(){ var nowImgurl = $(this).attr('src'); WeixinJSBridge.invoke("imagePreview",{ "urls":imgs, "current":nowImgurl }); }); } } //因为Android可以完美的调用，如果用此方法，会调用两次图片，页面不友好，因此判断一下用户机型内核，做相应的操作 var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isAndroid) { // alert("安卓") } if (isIOS) { // alert("ios") }

这样就可以了！仅供参考！