通过手机浏览器打开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. python selenum ---如何定位一组元素

    使用findElements方法定位一组对象 定位一组对象一般用于以下场景: · 批量操作对象,比如将页面上所有的checkbox都勾上 · 先获取一组对象,再在这组对象中过滤出需要具体定位的一些对象 ...

  2. Android中的倒计时实现

    一.android.os包下提供了倒计时的抽象工具类: public abstract class CountDownTimer { /** * Millis since epoch when ala ...

  3. Android studio 使用心得(一)—android studio快速掌握快捷键

    大家都是从eclipse转过来了,所以早就熟悉了eclipse那一套快捷键. File—>settings—>keymap–>选择eclipse就搞定 话是这么说,但是自动化提示的变 ...

  4. PHP写webservice服务端

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

  5. Atitit.html解析器的选型 jsoup nsoup ，java c# .net 版本

    Atitit.html解析器的选型 jsoup nsoup ,java c# .net 版本 1. 框架选型的要求1 1.1. 文档多1 1.2. 跨平台1 2. html解析器特性:1 2.1. j ...

  6. [转]C++ error C2011: “XXX”:“class”类型重定义

    http://blog.csdn.net/m_leonwang/article/details/27678219 尝试修复这个程序的错误: 点击下载源代码文件夹

  7. 阿里正式发布《Java开发手册》终极版！

    摘要: 本文讲的是阿里正式发布<Java开发手册>终极版!,别人都说我们是码农,但我们知道,自己是个艺术家.也许我们不过多在意自己的外表和穿着,但我们不羁的外表下,骨子里追求着代码的美.质 ...

  8. Archive for required library xx cannot be read or is not a valid ZIP file

    原因:maven下载的jar包有问题,导致maven编译的时候出错 解决方法:找到jar包所在的文件路径,在网上重新下载个相同版本的jar包,问题解决

  9. linux上FTP服务器搭建

    一.启动vsftpd服务 1. 启动VSFTP服务器 A. cenos下运行:yum install vsftpd B. 登录Linux主机后,运行命令:"service vsftpd st ...

  10. Prerender Application Level Middleware - ASP.NET HttpModule

    In the previous post Use Prerender to improve AngularJS SEO, I have explained different solutions at ...