admin 管理员组

文章数量: 887006

vue h5 浏览器内唤醒app

前言

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

这折腾的过程中发现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需要设置的schemewindow.location.href= "imeituan://"; //这样如果你安装了app就可以成功唤醒app了}</script>
</body>
</html>

然后还需要判断用户是否安装了app,然而h5在浏览器中是没有能力判断手机是否安装了某个app的，所以在这里采取一种反向思维的方式

浏览器在尝试打开url scheme时如果能唤起app就说明打开成功，如果唤不醒就没得反应，所以可以抓住这个时间点，如果在点击跳转后两到三秒没有反应就说明没有安装，这个时候就引导用户去下载

    <script>function button_click(){var appDownloadURL = "";alert("33334444333");//这里举个美团的例子   imeituan://就是android和ios需要设置的schemewindow.location.href= "imeituan://"; //这样如果你安装了app就可以成功唤醒app了//这个延时就是在三秒没有反应跳到百度了，这里你可以写下载链接。或者引导用户下载。setTimeout(function(){window.location.href= "";},3000)}</script>

还有就是要判断是否是在微信浏览器中打开，还多应用的scheme不支持在微信浏览器打开，所以要判断是否为微信浏览器，然后引导用户复制链接到外部浏览器打开。

结束语

我这个还不是很全面，后期遇到什么坑再来补全。

本文标签： vue h5 浏览器内唤醒app

版权声明：本文标题：vue h5 浏览器内唤醒app 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732354985h1534173.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。