Click a button, if the phone has an app installed, open the app directly, otherwise jump to the application market to download the app

Keywords: Android iOS Mobile Javascript

Recently, we are making such a function. When the front-end webpage clicks the button, if the user's mobile phone has the app installed, the app will be opened directly; otherwise, it will jump to the application market to download. The code is as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body id="body">
		<a href="javascript:;" id="openApp" style="font-size: 30px;">Open client</a>
	</body>	
	<script type="text/javascript">
	document.getElementById('openApp').onclick = function(e) {
		//ios
		if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {

			var browser = navigator.userAgent.toLowerCase();

			if(browser.match(/micromessenger/i)) {
				//Wechat built in browser
				window.location.href ="hengtaixin://";
				window.setTimeout(function() {
					window.location.href = "https://itunes.apple.com/us/app/cheng-shi-gao-er-fu/id1008696844?mt=8&uo=4";
				}, 1000)
				return
			} else {
				window.location.href ="hengtaixin://"; / / ios app protocol, provided by ios colleagues
				window.setTimeout(function() {
					window.location.href = "https://itunes.apple.com/us/app/cheng-shi-gao-er-fu/id1008696844?mt=8&uo=4";
				}, 2000)
				return
			}
		}

		if(navigator.userAgent.match(/android/i)) {
			//Android
			window.location.href = "app://city_golf "; / / Android protocol, provided by Android colleagues
			window.setTimeout(function() {
				
				window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=gr eenjoy.golf.app&g_f=991653"
			}, 2000)
			return
		}

	};
</script>
</html>

The above code is divided into ios, Android and wechat built-in browser. The implementation method is window.location.href ="xxx: / /"; first try to wake up the app in the phone through the protocol. If the jump is successful within 2000ms, it means that the app has been installed in the phone and opened directly. The following timer code will not be executed. If it is still on this page after more than 2000 ms, it is proved that the user's mobile phone does not have an app installed, then the code in the timer will be executed and the user will jump to the application market to download.

Burn goose, when I finished this, the boss suddenly said to add a function like this: if your mobile phone has already installed this app, then the "open client" above will be changed to "open app". If it is not installed, then the word "download app" will be prompted. Then I frowned. Whether to install the app or not was not realized through judgment... Then I, as a workplace young Mengxin, shivered back to my seat and began to look for relevant information. After a lot of efforts, I didn't ~ ~ ~ and then I asked several senior brothers who had already worked. They also said that only the front-end is difficult to achieve. It is suggested that the back-end judge and return the results to me....

 

 

So now the second function has not been realized. Welcome to let me know if you have any ideas ~ ~ thank you!

 

Posted by friendlylad on Thu, 13 Feb 2020 13:31:32 -0800