通过手机浏览器打开APP或者跳转到下载页面的实现

广告:宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取~~~

通过手机浏览器打开APP或者跳转到下载页面的实现

通过手机浏览器打开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或者跳转到下载页面的实现的详细内容,更多请关注9543建站博客其它相关文章!

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:纯CSS实现多级导航联动(附图文示例)
下一篇:html5中怎么设置单元格水平跨度

发表评论

关闭广告
关闭广告