微信公众号与HTML 5混合模式揭秘5——JSSDK开发技巧1

时间 2019-11-09

标签微信公众号 html 混合模式揭秘 jssdk 开发技巧栏目 HTML 繁體版

原文原文链接

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

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

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

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

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

例如在页面中写个以下的代码：浏览器

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

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

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

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

01     var isWechat = 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=”生成新的连接地址，结果以下：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     <!DOCTYPE html>
02     <html>
03     <head>
04         <meta charset="UTF-8">
05         <title>第12章 12.2节</title>
06     </head>
07     <body>
08     <h1 style="font-size: 40px">:)</h1>
09     <b style="font-size: 20px">App Store Demo！</b>
10     <p style="font-size: 20px" id="conversionUrl"></p>
11     <script type="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){                                   //根据浏览器类型转换url
21                     if(isWechat()){
22                         return
23     "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(){                                                     //页面载入成功后修改dom
32             document.getElementById("conversionUrl").innerHTML = "转换以后的url："+_url;
33         }
34     </script>
35     </body>
36     </html>

摘自