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

以下仅展示最简单的例子及关键代码

由于硬件条件有限，仅测试了 Android 下的情况

IOS 的自行参考链接

添加 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>

    <div style="font-size: 68px;">

        <a href="javascript:open_or_download_app();">打开APP</a>

        <span id="device"></span>

    </div>

    <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或者跳转到下载页面.md的更多相关文章

  1. 从手机浏览器或者 APP 中跳转到微信并跳转到指定页原理及行业内幕详解

    相信很多朋友遇到过有些网站,可以直接通过一个连接就能让你的手机打开微信且跳转到某个指定的页面,许多程序员很好奇到底是怎么实现的,到处求这种方法的源码,在文本中我会介绍及剖析这种跳转实现的原理. 微信是 ...

  2. 手机端用swiper组件 轮播图设置后右侧出现空白 及 部分手机浏览器打开网页空白

    我的方法是设置内容css overflow:hidden;width:100%; ok. 之前搜到一个方法也可以,就是设置css height: auto;overflow-y: scroll; 但是 ...

  3. HTML中判断手机是否安装某APP，跳转或下载该应用

    有些时候在做前端输出的时候,需要和app的做些对接工作.就是在手机浏览器中下载某app时,能判断该用户是否安装了该应用.如果安装了该应用,就直接打开该应用:如果没有安装该应用,就下载该应用.那么下面就 ...

  4. Android通过浏览器打开app页面并且传递值

    最近公司有个需求,要求从第三方网页端打开一个网页,然后在网页中点击“下载”,“打开”按钮,在app端进行下载和打开操作.这里记录下方法. 首先,网页和app页面进行交互,其实会很快想到JS交互,但是现 ...

  5. php页面判断是 iphone还是andriod的浏览器&通过 URL types在浏览器打开app(转)

    http://blog.csdn.net/totogo2010/article/details/8925483 解决一个二维码不同手机扫描下载时跳转的问题 判断后跳转对应的app下载 <?php ...

  6. Android 如何通过浏览器打开App

    首先给出参考资料http://my.oschina.net/liucundong/blog/354029?p=3#rpl_291191828 通过浏览器直接打开Android应用程序 Android ...

  7. 关于用WebView或手机浏览器打开连接问题

    1.通常情况下 大家可能都想使用WebView打开网页内部链接而不想再调用手机浏览器,我们可以通过以下两种方法实现: (1)为WebView设置一个WebViewClient,并重写shouldOve ...

  8. 解决网页在手机浏览器打开不停刷新的方案（百度的ua自动转向js问题）

    一:发现问题 原有可能是网站内挂了一个百度的ua自动转向js,手机访问的话会被自动转到feiyujd.com,然后又被转到www点feiyujd点com,这样反复死循环.就形成了一直在刷新,网站一闪一 ...

  9. H5调取APP或跳转至下载

    来源: 最近在配合移动端做几个详情页h5分享页面,需要调取App并跳转至app详情页, 如果没有安装App,需要判断引导至下载页面. 参考文档: https://juejin.im/post/5b7e ...

随机推荐

  1. Android中的UriMatcher、ContentUrist和ContentResolver

    因为Uri代表了要操作的数据,所以我们很经常需要解析Uri,并从Uri中获取数据.Android系统提供了两个用于操作Uri的工具类,分别为UriMatcher 和ContentUris .掌握它们的 ...

  2. C语言控制台打印3D爱心图案

    非常多程序猿都认为自己的编程工作十分的鼓噪乏味.一整天面对的都是一些写不完的代码和改不完的Bug.今天我们要给大家分享一些有趣的C语言代码,也许能够为你无聊的工作带来一丝乐趣. 这些代码能够完毕几个不 ...

  3. Spring MVC 框架搭建及具体解释

    如今主流的Web MVC框架除了Struts这个主力 外.其次就是Spring MVC了,因此这也是作为一名程序猿需要掌握的主流框架.框架选择多了.应对多变的需求和业务时,可实行的方案自然就多了. 只 ...

  4. ubuntu彻底干净卸载MySQL、Apache2、Php的方法（各版本通用

    一.卸载删除 mysql   1 sudo apt-get autoremove --purge mysql-server-5.0 2 sudo apt-get remove mysql-server ...

  5. PHP写webservice服务端

    1) WebService技术介绍 WebService是一种跨编程语言和跨操作系统平台的远程调用技术.仅仅有通过Web Service,client和server才可以自由的用HTTP进行通信.不论 ...

  6. Atitit.设计模式-----触发器模式 trigger  详解

    Atitit.设计模式-----触发器模式 trigger  详解 1. 触发器概念1 1.1. 触发器位置 after|before|instead of1 2. 数据库里面的触发器1 2.1. o ...

  7. Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结

    Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl ...

  8. 一个简单题，引发的思索 + nyoj 1189

    题目描述:第一行:给你两个数m和n,m表示有m个数,然后下一行输入m个数,每个数只能选择一次,统计共有多少种情况使得所选数的和大于等于n: 解决本题我想到了两种方法,(题目自己想的,先不考虑超时),第 ...

  9. 河南省第七届ACM程序设计大赛赛后总结

    我们学校ACM集训开始于4月5号(清明节),5月25日在郑州解放军信息工程大学举办,集训耗时50天,但是感觉效果还行,但是也不是太好:我们也已经尽力了,虽然说只拿了个银牌,每份收获的背后,都会有辛勤的 ...

  10. CCNA2.0笔记_动态路由

    动态路由协议: 向其他路由器传递路由信息 接收(学习)其他路由器的路由信息 根据收到的路由信息计算出到每个目的网络的最优路径,并由此生成并维护路由表 根据网络拓朴变化及时调整路由表,同时向其他路由器宣 ...