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

一个新手
풀어 주다: 2018-05-28 17:47:29
원래의
18809명이 탐색했습니다.

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

아래에는 가장 간단한 예와 키 코드만 표시됩니다.
제한된 하드웨어 조건으로 인해 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿