通过手机浏览器打开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. apache与和mysql重启命令

    修改linux服务器的http配置之后,必须重启Apache服务. 命令为: /etc/rc.d/init.d/httpd restart chown -R mysql:mysql 目录名 改变文件属 ...

  2. unity的自带特性

    2016/9/24补充: unity官方有一篇文章对菜单扩展讲的不错 https://unity3d.com/cn/learn/tutorials/topics/interface-essential ...

  3. 使用jquery dialog

    网页开发中,弹窗还是很有必要的.本人比较喜欢jquery ui的dialog. 但是jquery dialog中也有一些略显不方便的,如:没有z-index的参数设置,脚部的按钮样式没办法自定义…… ...

  4. tomcat能启动正常，但是输入localhost:8080不能登录

    怎么配置JDK和TOMCAT应该百度经验已经很好地解释了. tomcat启动成功了,但是  localhost:8080  登录不成功. 有一种可能,缺少http:// 输入: http://loca ...

  5. 从浏览器输入URL回车发生了什么

    在浏览器输入url后回车,整个过程发生了什么?整个过程如果节节细述的话,那非常的复杂.我就简单的描述一下整个过程 1.查询DNS,获取域名对应的IP地址 (1).浏览器搜索自身的DNS缓存 (2).搜 ...

  6. 13 jsp include

    假如您有一系列的页面, 每一个都拥有同样的导航栏, 联系信息和注脚, 好的解决方案是使用 jsp:include, 它可以将下面列出的任何内容插入到jsp的输出中: html 页面内容 纯文本文档的内 ...

  7. Mathematica之基本操作

    1.清楚所有变量 Clear["Global`*"];

  8. Java反射机制的作用？

    Java反射机制的作用? 解答:Java反射机制的作用是: 1)在运行时判断任意一个对象所属的类. 2)在运行时构造任意一个类的对象. 3)在运行时判断任意一个类所具有的成员变量和方法. 4)在运行时 ...

  9. Window对应的类为java.awt.Windows, 它可独立于其他Container而存在

    Window对应的类为java.awt.Windows, 它可独立于其他Container而存在,它有两个子类, Frame和Dialog, Frame是具有标题(title)和可伸缩的角(resiz ...

  10. 【BZOJ】3401: [Usaco2009 Mar]Look Up 仰望（单调栈）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3401 还能更裸一些吗.. 维护一个递减的单调栈 #include <cstdio> #i ...