通过手机浏览器打开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. Paper Reading 1 - Playing Atari with Deep Reinforcement Learning

    来源:NIPS 2013 作者:DeepMind 理解基础: 增强学习基本知识 深度学习 特别是卷积神经网络的基本知识 创新点:第一个将深度学习模型与增强学习结合在一起从而成功地直接从高维的输入学习控 ...

  2. NOPcommerce研究

    http://www.cnblogs.com/gusixing/archive/2012/04/07/2435873.html

  3. 记一次netty版本冲突，报java.lang.NoSuchMethodError: io.netty.util.internal.ObjectUtil.checkPositive的问题

    elasticsearch 5.6中使用TransportClient初始化抛异常 在引入elasticsearch5.6的transportclient包中,会引入netty进行通信. <!- ...

  4. atitit.atiOrm.js v2 q61 版本新特性.docx

    atitit.atiOrm.js v2 q61 版本新特性.docx 1. V1新特性如下1 1.1. V2规划,直接生成sql在js端1 2. Orm设计框架图1 2.1. atiOrm.js的原理 ...

  5. PCIe学习笔记（15）--- TLP的ROUTING方式

    PCIE是POINT TO POINT的,不像PCI,是SHARED-BUS,总线上的数据,是被所有EP DEV看到的. 这一点与USB2.0比较类似,是广播方式的(BROADCASTING) USB ...

  6. C++语言基础(22)-转换构造函数和类型转换函数

    一.转换构造函数 将其它类型转换为当前类类型需要借助转换构造函数(Conversion constructor).转换构造函数也是一种构造函数,它遵循构造函数的一般规则.转换构造函数只有一个参数. # ...

  7. python之圆周率

    #!/usr/bin/env python #-*- coding:utf-8 -*- ############################ #File Name: pi.py #Author: ...

  8. HTML5自定义属性之data-index

    #使用jquery获取data-index的值 jquery 的版本最好高一些 #html <div id = 'div'><span data-field='demo'>&l ...

  9. CodeForces 586B Laurenty and Shop

    F - Laurenty and Shop Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I ...

  10. php将远程图片下载保存到本地

    /* *功能:php完美实现下载远程图片保存到本地 *参数:文件url,保存文件目录,保存文件名称,使用的下载方式 *当保存文件名称为空时则使用远程文件原来的名称 */ function getIma ...