집 > 기사 > 웹 프론트엔드 > 모바일 브라우저를 통해 APP를 열거나 다운로드 페이지로 점프하는 구현

모바일 브라우저를 통해 APP를 열거나 다운로드 페이지로 점프하는 구현

一个新手원래의: 2018-05-28 17:47:2918800검색

모바일 브라우저를 통해 앱을 열거나 다운로드 페이지로 이동

아래에는 가장 간단한 예와 키 코드만 표시됩니다.
제한된 하드웨어 조건으로 인해 Android 환경에서만 테스트되었습니다.

구성표 추가

모바일에서 생성됨 HBuilder APP 프로젝트 아래에 manifest.json 파일이 있는데, 그 안에 스킴을 추가하고 스킴의 값을 원하는 대로 설정하세요.
모바일 브라우저를 통해 APP를 열거나 다운로드 페이지로 점프하는 구현

웹페이지 설정

이때, 모바일 브라우저 접속을 위한 간단한 웹페이지를 제공할 수 있는 간단한 웹 시스템이 필요합니다.
자바를 해본 사람은 다 아실 테니 굳이 말씀드리지는 않겠습니다.

<!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의 URL Schema는 "Schema you set://Schema you set"라고 적어서 접근할 수 있습니다. IOS는 이와 다릅니다. URL Schema에 대한 자세한 설명은 Baidu를 참조하시면 더 깊은 이해를 가지실 수 있습니다.
참고 자료에 따르면 앱이 백그라운드에서 열려도 JS는 약 600~1000밀리초의 일정 시간 동안 실행되므로 최소한 타이밍 일정은 1초보다 크게 설정되어야 하며 이것이 더 보장됩니다. .

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

다음으로, 앱을 패키징하고 휴대폰에 설치하여 테스트할 수도 있습니다. 앱을 삭제하고 두 결과를 비교할 수도 있습니다.

필요하다면 IOS가 추가될 예정입니다

위 내용은 모바일 브라우저를 통해 APP를 열거나 다운로드 페이지로 점프하는 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Java json JS android ios

성명：

이전 기사：BootStrap 기본 스타일 소개다음 기사：BootStrap 기본 스타일 소개