前言
在项目中遇到一个需求，就是微信分享的页面，邀请新用户注册，需要判断该用户是否安装该应用，如果安装了那就直接唤醒进入，如果没有那就提醒用户需要下载，并且跳到应用市场去下载，或者给一个下载链接让用户直接下载
这折腾的过程中发现URL scheme这个方法，就记录下来
scheme是一种页面之件间跳转的协议，不仅可以用于app之间的跳转，还可以用于h5跳转到app,无论是android还是ios都可以通过在h5页面打开scheme协议的地址，从而打开app。
在这里需要android和ios配置跳转的scheme
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document </title>
</head>
<body>
<button onclick="button_click()">点我点我</button>
<script>
function button_click(){
alert("33334444333");
//这里举个美团的例子 imeituan://就是android和ios需要设置的scheme
window.location.href= "imeituan://";
//这样如果你安装了app就可以成功唤醒app了
}
</script>
</body>
</html>
然后还需要判断用户是否安装了app,然而h5在浏览器中是没有能力判断手机是否安装了某个app的，所以在这里采取一种反向思维的方式
浏览器在尝试打开url scheme时如果能唤起app就说明打开成功，如果唤不醒就没得反应，所以可以抓住这个时间点，如果在点击跳转后两到三秒没有反应就说明没有安装，这个时候就引导用户去下载
<script>
function button_click(){
var appDownloadURL = "https://www.baidu.com";
alert("33334444333");
//这里举个美团的例子 imeituan://就是android和ios需要设置的scheme
window.location.href= "imeituan://";
//这样如果你安装了app就可以成功唤醒app了
//这个延时就是在三秒没有反应跳到百度了，这里你可以写下载链接。或者引导用户下载。
setTimeout(function(){
window.location.href= "https://www.baidu.com";
},3000)
}
</script>
还有就是要判断是否是在微信浏览器中打开，还多应用的scheme不支持在微信浏览器打开，所以要判断是否为微信浏览器，然后引导用户复制链接到外部浏览器打开。
结束语
我这个还不是很全面，后期遇到什么坑再来补全。
网友评论