h5打开APP

最新推荐文章于 2024-12-09 17:59:01 发布

notaloney

最新推荐文章于 2024-12-09 17:59:01 发布

阅读量1k

点赞数

文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/notaloney/article/details/127732986

版权

1，前台页面加点击事件

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title></title>
    <script src="__STATIC__/share/js/jquery-2.1.4.js"></script>
    <script src="__STATIC__/share/js/index.js"></script>
    <style type="text/css">
    *{margin:0; padding:0;}
    a{text-decoration: none;}
    .weixin-tip{display: none;position: fixed; left:0; top:0; bottom:0;right: 0; background: rgba(0,0,0,0.8); opacity: 0.8;z-index: 999;}
    .weixin-tip img{display: block;width: 90%;height: auto; margin: 20px auto;padding: 0;font-size: 0;line-height: 0;}
    </style>
</head>
<script type="text/javascript">
    function hideImg() {
        $(".weixin-tip").hide();
    }
</script>

<body style="max-width: 450px; margin: 0 auto;" onload="syssetingFn()">
    <div id="weixin-tip" class="weixin-tip" onclick="hideImg();">
        <img src="__STATIC__/share/image/bg.png" alt="微信打开"/>
    </div>

    <div class="bottom_btn"><a href="javascript:openapp();">打开APP</a></div>

</body>

此处加了判断是否在微信中打开，如果是则弹窗提示请在浏览器中打开

2，写js方法，即上面页面中引入的index.js文件

let globalData = {
	isMobile: false, //是否为移动端
	openIn: '', //页面打开的app
	openInType: '', //移动端设备的类型 ios android
	isHW: false, //是否为华为浏览器
}

function syssetingFn() {
	var browser = {
		versions: (function () {
			var u = navigator.userAgent,
				app = navigator.appVersion
			return {
				//移动终端浏览器版本信息
				trident: u.indexOf('Trident') > -1, //IE内核
				presto: u.indexOf('Presto') > -1, //opera内核
				webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
				gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
				mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
				ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
				android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
				iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
				iPad: u.indexOf('iPad') > -1, //是否iPad
				webApp: u.indexOf('safari') == -1, //是否web应该程序，没有头部与底部
				//DF:u.indexOf('DF'),//是否是mmc app端
			}
		})(),
		language: (
			navigator.browserLanguage || navigator.language
		).toLowerCase(),
	}
	if (browser.versions.mobile) {
		//判断是否是移动设备打开。browser代码在下面
		globalData.isMobile = true
		var ua = navigator.userAgent.toLowerCase() //获取判断用的对象
		console.log('=============ua对象' + ua)
		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			//在微信中打开
			globalData.openIn = 'weixin'
		}
		if (ua.match(/WeiBo/i) == 'weibo') {
			//在新浪微博客户端打开
			globalData.openIn = 'weibo'
		}
		if (ua.match(/ qq\//i) == ' qq/') {
			//在QQ空间打开
			globalData.openIn = 'qq'
		}
		if (ua.match(/huawei/i) == 'huawei') {
			globalData.isHW = true
		}
		if (browser.versions.ios) {
			//是否在IOS浏览器打开
			globalData.openInType = 'ios'
		}
		if (browser.versions.android) {
			//是否在安卓浏览器打开
			globalData.openInType = 'android'
		}
	} else {
		//否则就是PC浏览器打开
		globalData.isMobile = false
	}
}

function openapp() {
	console.log(
		'openapp',
		'------',
		'{$version_data.version_android_link}',
		'---',
		'$version_data.version_android_link'
	)
	var download_ios = 'http://www.shengmo.cn'
	var download_adr = 'http://www.shengmo.cn'
	var loadDateTime = Date.now(),
		timer = null
	var config = {
			scheme_ios: 'com.aiwujie.shengmoApp://test', //iosscheme协议  eg: alipay://   weixin://    taobao://    mqq://
			scheme_adr: 'scheme://shengmo/pathPrefix', //安卓scheme协议
			download_ios: 'http://www.shengmo.cn', //ios下载链接
			download_adr: 'http://www.shengmo.cn',
		}

	if (globalData.isMobile && globalData.openInType == 'ios') {
		console.log('open in ios')
		if (
			globalData.openIn == 'weixin' ||
			globalData.openIn == 'weibo' ||
			globalData.openIn == 'qq'
		) {
			document.getElementById('weixin-tip').style.display = 'block'
			return
		} else {
			window.location = config.scheme_ios
			timer = setTimeout(function () {
				if (Date.now() - loadDateTime < 3200) {
					window.location = config.download_ios
				} else {
					clearTimeout(timer)
				}
			}, 3000)
		}
	}else{
		//document.getElementById('xieyi').innerHTML = config.scheme_adr
		//判断是否是会屏蔽下载链接的app打开
		if (
			globalData.openIn == 'weixin' ||
			globalData.openIn == 'weibo' ||
			globalData.openIn == 'qq'
		) {
			document.getElementById('weixin-tip').style.display = 'block'
			return
		} else {
			window.location.href = config.scheme_adr;
			setTimeout(function() {
			    window.location.href = config.download_adr;
			}, 3200);
			document.addEventListener("visibilitychange", () => {
			    if (document.visibilityState === "hidden") {
					console.log('hide')
			        // location.reload();
			    } else {
					console.log('visiable')
			        location.reload();
			    }
			});
		}
	}
}
function hideImg() {
	document.getElementById('weixin-tip').style.display = 'none'
}