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

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

时间2024-01-23 11:02:24发布访客分类HTML浏览978
导读:收集整理的这篇文章主要介绍了通过手机浏览器打开APP或者跳转到下载页面的实现,觉得挺不错的,现在分享给大家,也给大家做个参考。通过手机浏览器打开APP或者跳转到下载页面以下仅展示最简单的例子及关键代码由于硬件条件有限,仅测试了 AndROI...
收集整理的这篇文章主要介绍了通过手机浏览器打开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或者跳转到下载页面的实现的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

webkit

若转载请注明出处: 通过手机浏览器打开APP或者跳转到下载页面的实现
本文地址: https://pptw.com/jishu/584112.html
三分钟HTML5画布(Canvas)动画教程 详解使用HTML5 Canvas创建动态粒子网格动画的示例代码分享

游客 回复需填写必要信息