search

Home  >  Article  >  Web Front-end  >  Implementation of opening APP through mobile browser or jumping to download page

Implementation of opening APP through mobile browser or jumping to download page

一个新手
一个新手Original
2018-05-28 17:47:2918795browse

Open the APP through the mobile browser or jump to the download page

Only the simplest examples and key codes are shown below
Due to limited hardware conditions, only the situation under Android was tested

Add schemes

There is a manifest.json file under the mobile APP project created by HBuilder. Add schemes in it. Set the values ​​in schemes to whatever you like. .
Implementation of opening APP through mobile browser or jumping to download page

Web page settings

At this time, you need a simple web system that can provide a simple web page for mobile browser access.
Everyone who has done Java knows this, so I won’t tell you. 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><head><meta charset="utf-8" />
<title>文档标题</title>
</head>
<body>
    <p style="font-size: 68px;">
        <a href="javascript:open_or_download_app();">打开APP</a>
        <span id="device"></span>
    </p>
    <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's URL Schema can be accessed by writing "Schema you set://Schema you set". IOS is different from this. Please refer to Baidu for a detailed explanation of URL Schema, and you will have a deeper understanding.
According to the reference, even if the APP is opened in the background, JS will still execute for a period of time, about 600 - 1000 milliseconds, so at least the timing schedule must be set to greater than 1 second, which is more guaranteed. 

window.setTimeout(function() {},2000);  // 需要设置大一点，才有效果，否则会始终执行

Next, you can package the APP and install it on your mobile phone for testing. You can also delete the APP and compare the two results.

IOS will be added if necessary

The above is the detailed content of Implementation of opening APP through mobile browser or jumping to download page. For more information, please follow other related articles on the PHP Chinese website!

Java json JS android ios
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Introduction to BootStrap basic stylesNext article：Introduction to BootStrap basic styles

Related articles

See more