通过手机浏览器打开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. iloc[[i]] 和 loc[[i]] 的区别

    In [2]: df Out[2]: A B 0 1.068932 -0.794307 2 -0.470056 1.192211 4 -0.284561 0.756029 6 1.037563 -0. ...

  2. 记一下吧，又记不住啦。pipe

    currencydateuppercasejsonlimitTolowercaseasyncdecimalpercent ts == import { CurrencyPipe } from '@an ...

  3. 点滴积累【C#】---操作xml,将xml数据显示到treeview

    效果: 代码: XmlDocument xml = new XmlDocument(); private void Form1_Load(object sender, EventArgs e) { C ...

  4. 设计模式_EventObject和EventListener

    一.事件机制基本概念 java中的事件机制的参与者有3种角色: 1.event object:事件状态对象,用于listener的相应的方法之中,作为参数,一般存在与listerner的方法之中 2. ...

  5. man手册页

    man手册页不同页对应的内容: 区段1:用户指令区段2:系统调用区段3:程序库调用区段4:设备区段5:文件格式区段6:游戏区段7:杂项区段8:系统指令区段9:内核内部指令区段n:Tcl或Tk指令

  6. hdu 1000&hdu1001

    1001 #include<iostream> #include<stdio.h> using namespace std; int main() { long long n; ...

  7. 动画切换效果之push、pop、present、dismiss

    有时候页面跳转或视图切换的时候,需要做成特定的效果,常见的push.pop.present.dismiss效果如下,注意要添加代理 push默认动画效果 CATransition *transitio ...

  8. [转]Mac系统安装软件提示软件已损坏的解决办法

    很多朋友下载本站提供的Mac软件资源,安装提示“xxx软件已损坏,打不开,您应该将它移到废纸篓”的提示,其实并不是软件本身有问题,而是Mac系统的一个安全机制问题,按照如下方法操作,即可打开并安装本站 ...

  9. HBase学习笔记——Java API操作

    1.1.  配置 HBaseConfiguration 包:org.apache.hadoop.hbase.HBaseConfiguration 作用:通过此类可以对HBase进行配置 用法实例: C ...

  10. Android 编程下字库的使用

    在安卓操作系统下对于 TextView 字体的支持很有限,默认情况下 TextView 的 typeface 属性支持 "Sans","serif"," ...