微信公众号与HTML 5混合模式揭秘5--JSSDK开发技巧1_html/css_WEB-ITnose

微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK

 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片

微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置

微信公众号与HTML 5混合模式揭秘4——jssdk调用微信扫一扫

 

  

  在目前的微信浏览器中，有的版本不支持APP Store页面，估计是微信浏览器有什么限制或者有什么利益冲突吧，但是以腾讯的开放程度来看没必要限制。

例如在页面中写个如下的代码：

 

01     href="https://itunes.apple.com/cn/app/wo-ai/id955760733?mt=8">download</a> 

以上代码，在微信浏览器内点击的时候，会出现没有任何相应的bug，但是如果此地址变为360、百度等链接地址，那么就会没问题。

 解决这个问题的主要方案就是在微信浏览器内，利用微信的API。

第1步，判断浏览器是否为微信浏览器，JS代码如下：

 

01     varisWechat = function (){02         var ua = navigator.userAgent.toLowerCase();03        if(ua.match(/MicroMessenger/i)=="micromessenger") {04             return true;05         } else {06             return false;07         }08     }

　　当然，您也可以采用上一节介绍的后台语言（PHP、Ruby、nodejs等）判断浏览器是否为微信浏览器。

 

第2步，将原来的链接，利用“encodeURIComponent”编码，结合“http://mp.weixin.qq.com/mp/redirect?url=”生成新的链接地址，结果如下：

 

01     "http://mp.weixin.qq.com/mp/redirect?url=https%3A%2F%2Fitunes.apple.com%2Fcn%2Fapp02   %2Fwo-ai%2Fid955760733%3Fmt%3D8"

　　 

第3步，完整的示例代码方法如下： 

01     02     <htmllang>03     04         <meta charset="UTF-8">05         <title>第12章 12.2节</title>06     07     08     <h1style>:)09     <bstyle>App Store Demo！10     <pstyle id="conversionUrl">11     <scripttype>12         var isWechat = function(){13                     var ua =navigator.userAgent.toLowerCase();                           //获取浏览器字符14                    if(ua.match(/MicroMessenger/i)=="micromessenger") {         //判断是否为微信15                         return true;16                     } else {17                         return false;18                     }19                 },20                 conversionUrl = function(url){                                   //根据浏览器类型转换url21                     if(isWechat()){22                         return23     "http://mp.weixin.qq.com/mp/redirect?url="+encodeURIComponent(url);//转换为微信内可用的24    地址25                     }else{26                         return url;                                                       //不转换27                     }28                 },29                 _url =30     conversionUrl("https://itunes.apple.com/cn/app/wo-ai/id955760733?mt=8");31         window.onload = function(){                                                     //页面载入成功后修改dom32            document.getElementById("conversionUrl").innerHTML = "转换之后的url："+_url;33         }34     35     36     </scripttype></pstyle></bstyle></h1style></htmllang>