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

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

  • 通过手机浏览器打开APP或者跳转到下载页面
    • 添加 schemes
    • 网页设置
    • 参考链接

以下仅展示最简单的例子及关键代码
由于硬件条件有限,仅测试了 Android 下的情况
IOS 的自行参考链接

添加 schemes

在 HBuilder 创建的移动 APP 项目下有 manifest.json 文件,在里面添加 schemes,schemes 中的值你喜欢设置成什么就什么吧。
通过手机浏览器打开APP或者跳转到下载页面.md_第1张图片

网页设置

这个时候,你需要一个简单 web 系统,能提供一个简单的 web 页面供手机浏览器访问。
这个做过 Java 的人都懂,不详说了。


<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();">打开APPa>
        <span id="device">span>
    div>
    <script type="text/javascript">
    //
    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 的有条件再补上

参考链接

  • Android平台通过UrlSchemes与第三方应用相互调用:http://ask.dcloud.net.cn/article/409
  • 给你的移动网站加点料:推荐下载App,如果本地安装则直接打开本地App(Android/IOS):http://www.cnblogs.com/iamjiuye/p/3362978.html
  • 又到周末了,我们一起来研究【浏览器如何检测是否安装app】吧:http://www.cnblogs.com/yexiaochai/p/3439179.html

你可能感兴趣的:(html5)