前端

微信浏览器跳转相关

在做益米的下载页的时候发现微信浏览器有些地方需要注意。

链接跳转

跳转苹果App Store：第一次是设置链接为https://appsto.re/cn/z3aa6.i
发现在微信里这个链接不能跳转，查了资料后发现有一种方法：微信中打开app store连接。意思就是微信会内部把链接重定向，判断是App Store就阻止掉。所以在页面里面改写链接，改成在他们域名下，再使用JS进行跳转。具体方法是前面加上http://mp.weixin.qq.com/mp/再重定向：redirect?url=后面再把原来的链接里的冒号改成%3A，斜杠改为%2F。所以链接变成了：
http://mp.weixin.qq.com/mp/redirect?url=http%3A%2F%2Fappsto.re%2Fcn%2Fz3aa6.i

尝试之后发现这个方法已经失效了。

无奈之下使用引导用户使用safari打开：

引导跳转

制作遮罩层：

1
2
3
4
5
<div id="popweixin">
	<div class="tip">
		<img src="images/weixinpopup.png" alt="">
	</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#popweixin
{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 1000;
  background: rgba(0,0,0,0.5);
  top: 0;
  left: 0;
  display: none;
}
#popweixin .tip 
{
  width: 100%;
  background: #FFF;
  z-index: 1001;
}
#popweixin img 
{
  width: 100%;
}

然后进行事件绑定：

1
2
3
4
5
6
7
8
9
10
11
12
var href = document.getElementById('iphonehref');
var href2 = document.getElementById('iphonehref2');
href.addEventListener("click",function (event) {
	if (is_weixn()) {
		event.preventDefault();	
		document.getElementById("popweixin").style.display = "block";
		document.getElementById('popweixin').onclick = function () {
			this.style.display = "none";
		}
	}
},false);

确定是否是在微信内打开使用这个函数：

1
2
3
4
5
6
7
8
function is_weixn() {
	var ua = navigator.userAgent.toLowerCase();
	if (ua.match(/MicroMessenger/i) == "micromessenger") {
		return true;
	} else {
		return false;
	}
}

然后自己比较坑爹的事情是，第一次是这么用的：if (is_weixn)
然后就不管是不是微信打开都是有遮罩层。
简直想抽死自己
is_weixn是一个函数，所以if(is_weixn)就是判断是否有一个变量。所以就一直为真。
if (is_weixn())才会执行这个函数返回结果。

然后就需要判断是电脑端还是手机端了：
欸好像不对 只要是微信端才绑定函数吧。。
我了个大草
判断终端类型：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var Terminal = {
	// 辨别移动终端类型
	platform: function() {
		var u = navigator.userAgent;
		return {
			// android终端或者uc浏览器
			android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
			// 是否为iPhone或者QQHD浏览器
			iPhone: u.indexOf('iPhone') > -1,
			// 是否iPad
			iPad: u.indexOf('iPad') > -1
		};
	} (),
};

都是使用navigator的userAgent。和判断微信大同小异。
这里使用的是indexOf()，返回值大于-1说明有指定的字符串。哇这个返回值写法有点酷炫学一下好了。
然后是微信使用的方法：match()使用的是正则表达式。
正则表达式：

1
var expression = / pattern / flags;

flags: g(全局模式) i(不区分大小写) m(多行模式)
下一次详细讲。
然后是match() 接受正则表达式或者RegExp对象，返回数组，数组存放结果。
但是测试后发现直接按照例子的写法也是可以的：
ua.match(/MicroMessenger/i)=="micromessenger"
不知道为什么不过里面的match必须是类似于/*/ 不能使用变量；

接下来又是事件绑定
微信里面为了用户体验，点击apple按钮的时候不要进行网络的加载，否则必须等加载完成用户才可以点击菜单使用浏览器打开，所以阻止了a标签的默认跳转行为：event.preventDefault();
然后就是遮罩层的显示和隐藏了。

另外在浏览器打开后，https://appsto.re/cn/z3aa6.i这个链接会再次跳转到itunes:https://itunes.apple.com/cn/app/yi-mi/id973082073?l=en&mt=8

分享到