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

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

在我们做营销活动或推广宣传的时候,容易遇到域名被封,无法跳转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

相关推荐

Kbone:微信官方推出 Web 前端和小程序统一框架

最近微信官方重磅推出了一个统一 Web 前端和小程序的框架 —— Kbone 。微信小程序的底层模型和 Web 端不同,开发者无法直接把 Web 端的代码挪到小程序环境内执行。

js判断是否是微信浏览器方法总结【整理4种方式】

在实际开发中,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢?以下提示了四种方法,每一种都可以进行判断是否是微信浏览器。

解决微信公众平台网页授权两次或多次重定响应问题

在做微信公众平台网页授权时,发现每次请求授权链接时都会重定向链接redirect_uri都会自动请求两次,由于并发导致了一些问题,那么,为什么会请求两次呢?,调试时发现会访问两次,一次是301,页面重定向了,第二次跟第一次就差这个参数connect_redirect=1

微信内打开外部默认浏览器下载app

使用微信打开网址时,对于安卓端而言无法打开常用下载软件,手机APP等。大家常用的方法是,弹出一个遮罩提示用户在新的浏览器窗口打开。 但是我们基于微信接口开发了一款全新的手机端微信中推广助手,用户在微信中点击的话

用cookie解决新版微信中H5页面底部白条问题

实现思路是,引入cookie功能,创建一个存储访客微信用户信息的cookie。当用户首次访问时,通过oauth授权获取用户信息,并存储于cookie中。当用户再次访问时,判断是否有相应cookie来调取用户信息,这样就不会触发二次授权。

解决微信返回上一页.页面不刷新问题

在项目中遇到的一个神奇的 BUG,点击「返回」按钮返回到上一页,但是页面却没有刷新。这是 ios 微信的缓存机制造成的,跳转到下一页时仍然会缓存当前页。

解决微信返回上一页之后,页面不刷新

由于项目中使用了vue,使用了gulp和普通的页面跳转。并没有引入vue-router。所以不能使用 watch监控$router。微信公众号ios点击后退按钮,优选读取缓存,所以vue里的生命周期不会在进行调用。所以项目中执行隐藏分享qq,空间。等功能不被再次执行。

解决vue在ios微信“复制链接”始终为初始地址的问题

ios因为微信内置浏览器对 history 的支持不够全面 所以对于开启了 History Mode 的 SPA 应用,只会保存第一条 url 只要每个页面都刷新一次,判断环境为iOS的微信环境时候,使用重定向跳转的方式

套路!陌生美女加微信好友,提出激情裸聊,然后……

一个月黑风高的晚上,你独自刷着朋友圈,突然一个陌生女子要求。添加好友,你第一反应是什么?更要命的是没聊几句话,对方居然要求“裸聊”!

微信活码技术如何解决微信个人号被动加好友上限加好友异常(微信群100人限制)

微信群营销已经成为主流的营销方式,我们都知道微信群未满100人之前可以分享群二维码,让我们的粉丝通过扫码进群,但是人数超过100后,发出的二维码就失效了,无法再次扫码进群,因此,很多人会有微信群满100人怎么再加人

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!