微信公众号与HTML 5混合模式揭秘5——JSSDK开发技巧1 微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘4——jssdk调用微信扫一扫

98 阅读 0 评论 65 点赞

我是靠谱客的博主单身小霸王，这篇文章主要介绍微信公众号与HTML 5混合模式揭秘5——JSSDK开发技巧1 微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘4——jssdk调用微信扫一扫，现在分享给大家，希望可以做个参考。

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

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

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

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

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

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

复制代码

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

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

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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=”生成新的链接地址，结果如下：

复制代码

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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){
//根据浏览器类型转换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>