vue h5 浏览器内唤醒app

最新推荐文章于 2024-05-30 11:08:25 发布

郝艳峰Vip

最新推荐文章于 2024-05-30 11:08:25 发布

阅读量2.3k

点赞数 1

分类专栏： javascript 前端首发文章标签： vue.js javascript

本文链接：https://blog.csdn.net/ww_5211314/article/details/109669870

版权

javascript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端首发

10 篇文章 0 订阅

订阅专栏

前言

在项目中遇到一个需求，就是微信分享的页面，邀请新用户注册，需要判断该用户是否安装该应用，如果安装了那就直接唤醒进入，如果没有那就提醒用户需要下载，并且跳到应用市场去下载，或者给一个下载链接让用户直接下载

这折腾的过程中发现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>