通过手机浏览器打开APP或者跳转到下载页面的实现
程序员文章站
2022-03-14 12:14:19
...
通过手机浏览器打开APP或者跳转到下载页面
以下仅展示最简单的例子及关键代码
由于硬件条件有限,仅测试了 Android 下的情况
添加 schemes
在 HBuilder 创建的移动 APP 项目下有 manifest.json 文件,在里面添加 schemes,schemes 中的值你喜欢设置成什么就什么吧。
网页设置
这个时候,你需要一个简单 web 系统,能提供一个简单的 web 页面供手机浏览器访问。
这个做过 Java 的人都懂,不详说了。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"><head><meta charset="utf-8" /> <title>文档标题</title> </head> <body> <p style="font-size: 68px;"> <a href="javascript:open_or_download_app();">打开APP</a> <span id="device"></span> </p> <script type="text/javascript"> //<![CDATA[ function open_or_download_app() { var device = document.getElementById("device"); if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { device.innerHTML = "ios设备"; // 判断useragent,当前设备为ios设备 var loadDateTime = new Date(); // 设置时间阈值,在规定时间里面没有打开对应App的话,直接去App store进行下载。 window.setTimeout(function() { var timeOutDateTime = new Date(); if (timeOutDateTime - loadDateTime <2200) { window.location = "xxxxxxxx"; // APP下载地址 } else { window.close(); } },2000); window.location = "apptest://apptest"; //ios端URL Schema } else if (navigator.userAgent.match(/android/i)) { device.innerHTML = "Android设备"; // 判断useragent,当前设备为Android设备 // 判断useragent,当前设备为ios设备 var loadDateTime = new Date(); // 设置时间阈值,在规定时间里面没有打开对应App的话,直接去App store进行下载。 window.setTimeout(function() { var timeOutDateTime = new Date(); if (timeOutDateTime - loadDateTime < 2200) { window.location = "xxxxxxxx"; // APP下载地址 } else { window.close(); } },2000); window.location = "apptest://apptest"; // Android端URL Schema } } //]]> </script> </body> </html>
Android 的 URL Schema 写成 “你设置的Schema://你设置的Schema” 即可访问。IOS 的和这个不同。URL Schema 的详解自行百度,你会有更深的理解。
根据参考,即使在后台打开了 APP,JS 仍会执行一段时间,大概是 600 - 1000 毫秒,所以至少也要设置定时调度大于 1 秒,这样比较有保证。
window.setTimeout(function() {},2000); // 需要设置大一点,才有效果,否则会始终执行
接下来就可以打包 APP 安装到手机上进行测试,也可以删掉 APP,对比两次的结果。
IOS 的有条件再补上
以上就是通过手机浏览器打开APP或者跳转到下载页面的实现的详细内容,更多请关注其它相关文章!