微信跳转外部浏览器打开的代码实现

更新日期: 2018-10-12阅读: 23.8k标签: 微信分享

复制链接

新浪微博

QQ 好友

扫一扫分享

在我们做营销活动或推广宣传的时候，容易遇到域名被封，无法跳转app下载等情况。这时需要微信跳转外部浏览器打开页面的功能，对于微信默认可以通过：点击右上角的三点,点击“在浏览器中打开”。但是对于很多用户而言并不知道这样的实现，所以需要在代码中进行相关操作。目前ios只能通过遮罩层来提示用户，对于安卓可以直接跳转外面默认浏览器，下面就分别介绍下这2种方式的实现代码。

一、遮罩提示：

遮罩引导法，这种事最简单的方法。屏蔽图如下【右键复制下来即可，白色显示不出来哦】：

代码：

function isWx(){//判断是否为微信
	var ua = window.navigator.userAgent.toLowerCase();
	if(ua.match(/MicroMessenger/i) == 'micromessenger'){
		return true;
	}
	return false;
};
if(isWx()){//判断浏览器是否微信
	var html='<div class="box"><img src="images/head.png"></box>'
	layer.open({//这里使用了layer的弹窗组件，你也可以自己写
	    type: 1,content: html,anim: 'up',
	   	style: 'position:fixed; bottom:0; left:0; width: 100%; height: 100%; padding:0; border:none;'
  	});
  	return;
}

效果如下：

二、链接跳转

安卓手机的话是通过点击链接，直接跳转出微信。自动打开手机默认的浏览器。但是这个方法IOS的系统不行，需要进行判断了，判断代码如下：

function isDevice(){//判断是android还是ios还是web
     var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/iPhone\sOS/i) == "iphone os" || ua.match(/iPad/i)=="ipad"){//ios
        return "iOS";
    }
    if(ua.match(/Android/i) == "android") {
    	return "Android";	
    }
    return "Web";
};

该下载链接需要给出以下头部：

header("Content-Disposition: attachment; filename=\"load.doc\"");
header("Content-Type: application/vnd.ms-word;charset=utf-8");

此时微信会因为头部是下载处理，自动跳转到浏览器中打开这个链接，主要就是让服务端返回一个PDF下载就行了，这样微信就会直接跳出到浏览器打开。

下面以php代码：

<?php
error_reporting(0);
if($_GET['open']==1 && strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger')!==false){
  header("Content-Disposition: attachment; filename=\"down.apk\"");
  header("Content-Type: application/vnd.ms-word;charset=utf-8");
}
?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>微信自动跳转手机默认浏览器的实现方式</title>
		<meta name="description" itemprop="description" content="微信自动跳转手机默认浏览器的实现方式"/>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
	</head>
	<body>
		<!--微信自动跳转手机默认浏览器的实现方式-->
	</body>
</html>

<script>
	var UA = navigator.userAgent;
	if(/MicroMessenger/gi.test(UA) && /android|adr/gi.test(UA)){//安卓并且为微信
	    var url = '?open=1'; 
	    var iframe = document.createElement("iframe");
	    iframe.style.display = "none";
	    iframe.src = url;
	    document.body.appendChild(iframe);
	}		
</script>

三、工具推荐

补充：以上php代码在部分安卓手机上出现下载文件的页面。现在补充链接：http://www.fly63.com/article/detial/4499

链接: https://fly63.com/article/detial/1142