• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 通过手机浏览器打开APP或者跳转到下载页面的实现

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含Firefox,webkit,浏览器等相关知识,匿名希望在学习及工作中可以帮助到您

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

您可能想查找下面的文章:

  • 解决Firefox下不支持outerHTML问题代码分享
  • H5新标签浏览器的兼容问题
  • 关于老版本的浏览器不兼容H5和C3的处理方法
  • HTML5 video 实现浏览器兼容的方法
  • html5中设置或返回浏览器应当显示标准的音视频控件的属性controls
  • html5中浏览器是否能播放指定的音频/视频类型的方法canPlayType()
  • 通过手机浏览器打开APP或者跳转到下载页面的实现
  • DOCTYPE与浏览器渲染介绍
  • 将数据库从服务器移到浏览器--indexedDB基本操作封装
  • Flash在苹果、微软、火狐的围剿下生存期还有几年?有没有完善的替代方案?

相关文章

  • 2018-12-03html5 canvas粒子形成下雪背景的效果
  • 2018-12-03HTML5之7 __Canvas: 缩放、旋转、创建阴影
  • 2018-12-03利用PostCSS跳进未来的CSS- JS-Republic's Blog
  • 2017-08-06x-ua-compatible content=”IE=7, IE=9″意思理解
  • 2018-12-03使用phonegap实现播放音频的方法示例分享
  • 2018-12-03深入解析clearfix清除浮动
  • 2018-12-03HTML5 / CSS3 方面有哪些好书籍?
  • 2018-12-03详细介绍HTML5游戏开发5条建议及开发工具分享
  • 2018-12-03indexedDB 数据库
  • 2018-12-03HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • H5的通用接口详细介绍
    • 百度小说推出专为平板电脑设计的 HTML5 web 应用,体验效果和原生应用类似,是否意味着随着 HTML5 技术的成熟,原生应用未来将输给 web app?
    • 详细介绍HTML5中的新事件
    • 使用jquery实现HTML5响应式导航菜单教程
    • 常用的<meta>代码整理汇总
    • 使用HTML5捕捉音频与视频信息概述及实例
    • HTML5高级编程之像素处理及粒子效果
    • 页面重绘及回流的优化方法
    • 关于移动页面的详细介绍
    • 逼真的HTML5树叶飘落动画

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有