>  기사  >  웹 프론트엔드  >  H5 페이지에서 APP 인스턴스 코드를 호출해 보세요.

H5 페이지에서 APP 인스턴스 코드를 호출해 보세요.

小云云
小云云원래의
2018-02-11 11:18:042500검색

이 글은 주로 H5 페이지에서 앱을 불러오는 예제 코드를 공유합니다.

시중에서 흔히 볼 수 있는 기능

이 기능은 오늘날 Taobao H5, Zhihu H5 등에서 매우 일반적이어야 합니다. . .

H5 페이지에서 APP 인스턴스 코드를 호출해 보세요. H5 페이지에서 APP 인스턴스 코드를 호출해 보세요.

클릭하면 앱이 호출되거나 다운로드 페이지가 열리거나 직접 다운로드됩니다.

하지만 Zhihu의 이 기능은 약간 다르다는 것을 알았습니다. 먼저 휴대폰에서 Zhihu 앱을 열 것인지 묻는 메시지를 표시한 다음(브라우저 메커니즘이 사용자에게 작동 권한을 요청함) 다운로드 팝업을 표시하는 것이었습니다. 즉각적인.

H5 페이지에서 APP 인스턴스 코드를 호출해 보세요.H5 페이지에서 APP 인스턴스 코드를 호출해 보세요.솔루션 URL 스킴

URL 스킴은 IOS와 Android 모두 지원하며 호환성이 좋습니다.

iframe을 사용하는 방법을 선호합니다

의사 코드는 다음과 같습니다.

const iframe = document.createElement('iframe');iframe.src = 'URL scheme'; // URL scheme的方式跳转iframe.style.display = 'none';document.body.appendChild(iframe);
이때, 모든 환경이 지원하면 APP가 깨어납니다.

하지만 이것은 이상적인 상황입니다. 호환성 처리의 빠른 논리를 수행하는 것이 더 좋습니다.

일부 시스템은 iframe의 src를 가로챕니다(이것은 앱을 깨우지 못하는 이유 중 하나일 뿐입니다). 이 src 속성은 불법 해커이고 이를 악용하여 많은 취약점이 발생하기 때문입니다.

그래서 이때는 APP 조정 실패 여부를 판단할 필요가 있습니다.

의사 코드는 다음과 같습니다.

const timer = 1000;setTimeout(function() {        // 执行成功后移除iframedocument.body.removeChild(iframe);//setTimeout小于2000通常认为是唤起APP失败 if (Date.now() - last <div class="highlight highlight-source-js"></div>Understanding<p>: <strong></strong></p>
    호출에 성공하면 H5 페이지가 백그라운드로 전환되고 타이머가 지연됩니다. 사용자가 앱에서 H5 페이지로 전환하더라도 시간차는 2S보다 커야 합니다.
  • 각성이 실패하면 타이머가 제 시간에 실행되며(100ms의 지연이 있어도 충분함) 이때는 2S 미만이어야 합니다.
  • iframe이 차단되면 호환성을 위해
를 사용할 수 있습니다.

window.location.href = URL scheme관련 추천:

H5 페이지에 대한 추천 기사 10개

WeChat H5 페이지 제작 과정에 대한 자세한 설명

H5 페이지 참고 사항

위 내용은 H5 페이지에서 APP 인스턴스 코드를 호출해 보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.