判断网页是否为微信内置浏览器打开？

最新推荐文章于 2024-06-28 09:54:13 发布

草巾冒小子

最新推荐文章于 2024-06-28 09:54:13 发布

阅读量1w

点赞数 5

分类专栏：微信支付类 JavaScript 微信小程序

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/80007360

版权

JavaScript 同时被 3 个专栏收录

70 篇文章 2 订阅

订阅专栏

微信小程序

4 篇文章 0 订阅

订阅专栏

微信支付类

2 篇文章 0 订阅

订阅专栏

文章目录

（两种方法）教你：“如何判断网页是不是在微信端内置浏览器打开？”

（两种方法）教你：“如何判断网页是不是在微信端内置浏览器打开？”

本文根据项目开发实际情况，着重探讨在微信内置浏览器中调用支付功能，遇到的几个坑！

目的：

提醒用户注意付款方式！
鉴于区别和选用支付方式！
在做微信公众号支付、```微信H5支付``的时候，会遇到一个相对有悖的问题。

下面简单说一下处理流程与思路：

判断设备端是否来自微信内置浏览器？
根据微信支付的两种不同情况（公众号支付、H5支付），分别切换超链接代码的显示与隐藏，从而达到支付流程的正常通行。

下面就看一下具体的代码。

（方法一）全部HTML代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.link{display: none;}
		.show{display: block;}
	</style>
</head>
<body>
	<a href="" class="link a2 show">不是微信端</a>
	<a href="" class="link a1">微信端</a>
<script src="http://class.hflihe.com/orderos/js/jquery-3.1.0.min.js"></script>
<script>
	function isWeiXin() {
		var ua = window.navigator.userAgent.toLowerCase();
		console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			return true;
		}
		else {
			return false;
		}
	}
	if(isWeiXin()){
		console.log(" 是来自微信内置浏览器");
		$(".a1").addClass("show");
		$(".a2").removeClass("show");
	}
	else{
		console.log("不是来自微信内置浏览器");
		$(".a2").addClass("show");
		$(".a1").removeClass("show");
	}
</script>
</body>
</html>

通过上述的javascript的判断，就可以很快的解决这个问题，进而为用户的支付提供合理可行的按钮通道，从而解决支付中出现的繁琐问题。

注意：

通常情况下，将会以一个跳转页面的形式，让用户绕行微信内置浏览器的H5支付，并且在跳转页面中提示用户，选择公众号支付！
这只是个权宜之计，只能说微信的支付或多或少还是有点坑的，我们都是埋坑群众。那里有坑，哪里就有我们。

（方法二）代码示下：

//判断是微信端还是非微信端 浏览器
function browerType() {
    if (navigator.userAgent.indexOf("MicroMessenger") != -1) {
        brower_weixin();//是微信端浏览器
    } else {
        brower_other();//是其他浏览器（非微信端浏览器）
    }
}