首页 > web前端 > html教程 > 微信公众号与HTML 5混合模式揭秘5--JSSDK开发技巧1_html/css_WEB-ITnose

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

WBOY
发布: 2016-06-24 11:32:45
原创
1089 人浏览过

微信公众号与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     <!DOCTYPEhtml>02     <htmllang="en">03     <head>04         <meta charset="UTF-8">05         <title>第12章 12.2节</title>06     </head>07     <body>08     <h1style="font-size: 40px">:)</h1>09     <bstyle="font-size: 20px">App Store Demo!</b>10     <pstyle="font-size: 20px" id="conversionUrl"></p>11     <scripttype="text/javascript">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     </script>35     </body>36     </html>
登录后复制

  

登录后复制

摘自 


来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板