场景1：
在 h5 页面上，不管用户是否安装过该app，都直接跳转到应用市场，让用户从应用市场上打开app。
思路：
这种场景处理比较简单，直接判断判断是android端还是ios端，然后在点击按钮上赋值对应终端的应用市场下载链接就可以了，在微信上打开h5页面时也不用另外处理。跳转之前，系统会默认弹出对话框问是否跳转。
案例：
下图以ios端打开 淘宝 为例：
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title></title>
<styletype="text /css">
body{ padding-top: 30px; }
.open-app { margin: 30px; border-radius: 5px; padding: 10px 20px; border: 1px solid #ccc; }</style>
<scriptsrc="https: //cdn.bootcss.com/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
<a class="open-app">click me to store</a>
<script type="text/javascript">
var iosLinkUrl = "http://apps.apple.com/cn/app/id387682726" // 淘宝 app store 下载地址
var androidLinkurl =
"https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient" //(找不到淘宝应用宝地址，这里以lucky coffee为例)
var u = navigator.userAgent,
isAndroid, isIOS
window.onload = function() {
init()
}
function init() {
isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var link = isIOS ? iosLinkUrl : androidLinkurl
$('a').attr('href', link)
}
</script>
</body>
</html>
场景2：
在 h5 页面上，用户点击打开app按钮，在用户手机上已经安装了App时，打开app，否则就引导用户前往应用市场。这样就方便了用户，而且在业务需要情况下，可以跳转到app指定页面和传参。
思路：
在 h5 页面上唤醒app ，需要用到 scheme协议（由app端小伙伴提供，关于什么是scheme文末补充），但是在微信浏览器里scheme不起作用，有没有印象有时在微信上打开的一些需要跳转到app的操作时，会提示在浏览器上打开，就是这个原因。
所以需要先判断是否为微信浏览器，是微信浏览器的话，提示到浏览器打开，不是的话，再判断是Android端还是iOS端，然后做相应的处理。
案例：
以打开 淘宝 为例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style type="text/css">
body {
padding-top: 30px;
}
.open-app {
margin: 30px;
border-radius: 5px;
padding: 10px 20px;
border: 1px solid #ccc;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<a class="open-app">click me to app</a>
<script type="text/javascript">
$('a').click(function() {
var u = navigator.userAgent;
var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// 微信内
if (isWeixin) {
alert('请在浏览器上打开')
} else {
//android端
if (isAndroid) {
//安卓app的scheme协议
window.location.href = 'taobao://';
setTimeout(function() {
let hidden = window.document.hidden || window.document.mozHidden || window.document
.msHidden || window.document.webkitHidden
if (typeof hidden == "undefined" || hidden == false) {
//应用宝下载地址 (emmm 找不到淘宝应用宝的地址，这里放的是 lucky coffee 地址)
window.location.href =
"https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient";
}
}, 2000);
}
//ios端
if (isIOS) {
//ios的scheme协议
window.location.href = 'taobao://'
setTimeout(function() {
let hidden = window.document.hidden || window.document.mozHidden || window.document
.msHidden || window.document.webkitHidden
if (typeof hidden == "undefined" || hidden == false) {
//App store下载地址
window.location.href = "http://itunes.apple.com/app/id387682726";
}
}, 2000);
}
}
});
</script>
</body>
</html>
