APP 기본 페이지를 시작하는 H5 인스턴스 메소드

오랫동안 블로그를 작성하지 않았습니다. 최근 H5에 APP의 기본 페이지를 출시하라는 요구가 있었습니다. 그 과정에서 몇 가지 함정에 부딪혔습니다. 일부 온라인 구현 계획을 읽은 후 특별히 요약했습니다.

1. 클라이언트 플랫폼과 WeChat에서 탐색 중인지 확인해야 합니다. 브라우저에서 액세스

1. 클라이언트 판단

Android와 IOS 시스템에서는 다르게 처리합니다. 브라우저에서 태그와 메타 태그를 전달할 수 있습니다. 이 방법을 사용하면 브라우저 앱이 애플리케이션을 열고 앱을 실행할 수 있는 권한을 얻을 수 있습니다.

IOS 측면에서 IOS9 이후 시스템은 앱 개발 프로세스 중에 구성 및 논리 코드 작성을 추가할 수 있습니다. 시스템은 브라우저가 도메인 이름에 액세스하려고 하기 전에 도메인 이름에 해당하는 앱을 엽니다. , 폐쇄해도 여전히 이점이 있습니다.

먼저 클라이언트에서 Android 시스템인지 IOS 시스템인지 판단해야 합니다. 판단 코드는 다음과 같습니다

function isInIos(){var userAgentInfo = navigator.userAgent ,
        Agents = ["iPhone" , "iPad", "iPod"];for(var v = 0; v  0) {          return true;
        }
    }return false;
}

2. WeChat 내장 브라우저에 있는지

어느 쪽인지는 중요하지 않습니다. 클라이언트 Android/IOS가 켜져 있는 플랫폼, WeChat에서 플랫폼에 액세스할 때 문제가 있습니다. 즉, 이는 보안상의 이유로 WeChat의 제한 사항입니다. WeChat의 파트너이며 화이트리스트에 가입되어 있으면 IOS 시스템을 사용할 수 있습니다. 앱에 해당하는 앱 스토어의 다운로드 페이지를 방문할 수 있지만 WeChat은 종종 앱 스토어 URL을 차단하여 액세스할 수 없게 만듭니다. 더 편리한 방법은 IOS든 Android든 WeChat 브라우저에서 App Store의 다운로드 페이지를 여는 것입니다(IOS는 결국

appstore로 이동합니다). 여기서 요구 사항은 사용자에게 "..."를 클릭하여 기본 브라우저로 열도록 요청하는 것입니다.

WeChat에 있는지 확인하기 위한 코드는 다음과 같습니다.

function isInWx(){var agent = window.navigator.userAgent.toLowerCase();return agent.match(/MicroMessenger/i) == 'micromessenger';
}

2. 원리

우선 안드로이드인지 IOS인지 확인이 불가능합니다. 브라우저에 JS를 통해 특정 소프트웨어가 장착되어 있으면 이 브라우저에 모바일 애플리케이션 목록을 읽을 수 있는 권한이 있어도 쿼리할 수 있는 고정된 외부 API가 없습니다. H5 시작 앱은 기본적으로

URL 체계를 통해 앱을 엽니다. 앱은 자체적으로 열도록 하나 이상의 URL 체계를 설정할 수 있으며, 시스템에 이 앱이 설치된 경우 이 앱을 열려면 권한을 요청합니다. 실제로 브라우저 앱이라고 볼 수 있습니다

다른 앱을 열려면 iOS는 UIApplication의 canOpenUrl 메서드를 사용하여 URL 구성표가 해당 앱을 열 수 있는지 여부를 감지할 수 있으며 Android도 비슷합니다. 물론, JS 점프 URL 방식이 응답하지 않는다면 휴대폰에 이 앱이 설치되어 있지 않다는 의미이기도 합니다.

3. Android 플랫폼

주로 두 번째

<activity>  <intent-filter>  <action></action>　　　　　　<category></category>  </intent-filter>  <intent-filter>  <action></action>　　　　　　<category></category>　　　　　　<category></category>　　　　　　<data></data>  </intent-filter></activity>

를 추가하기 위해 AndroidManifest.xml을 먼저 편집합니다. 예를 들어 여기 wushang은 구성표이며 이는 앱의 고유 식별자에 가장 적합합니다. 그렇지 않으면 H5가 깨어나면 시작할 앱을 선택하는 선택 상자가 나타납니다. 그리고 호스트는 페이지를 시작한다는 의미입니다. 실제로는 com.android.sky와 같은 패키지 이름으로 바꿔야 합니다.

이 경우 전체 URL은 wushang://android?data=sky이고 매개변수 전송이 이어집니다. 활동에서 다음 코드를 사용하여 매개변수

public void onCreate(Bundle savedInstanceState) {             
     Uri uridata = this.getIntent().getData();             
     String mydata = uridata.getQueryParameter("data");            
}

를 가져올 수 있습니다. 그런 다음 문자열 가로채기 등을 수행할 수 있습니다.

다음으로 프론트 엔드 코드에 대해 이야기하겠습니다. 여기에는 두 가지 상황이 있습니다.

1. 페이지가 새로 고쳐지면 앱 호출 권한을 요청하세요.

이것은 비교적 간단합니다. 하지만 페이지 상단에

<meta>

가 표시되어 있고 페이지가 새로고침되면 이 링크에 액세스하여 앱을 시작할 수 있습니다. 하지만 Apple 시스템의 Safari 브라우저인 경우 이 메타로 헤더에 액세스하면 오류 메시지가 표시됩니다. 따라서 페이지를 렌더링할 때 클라이언트의

일반 클래스를 통해 이 헤더를 추가할 수 있습니다. 백엔드.

2. 클릭 이벤트를 통해 APP를 호출하는 가장 쉬운 방법은 물론 다음과 같이 a 태그를 직접 사용하는 것입니다

<a>open Android app</a>

그러나 실제 사용에서는 클라이언트의 플랫폼 유형과 해당 여부를 알아야 합니다. WeChat 내장 브라우저에서 판단이 필요하므로 이러한 접근 방식은 절대 허용되지 않습니다.

다음으로, 개발 과정에서 겪은 문제에 대해 이야기하고 기록해보겠습니다. 여기 모바일 단말에서 사용하는 툴 라이브러리는 zepto이고, 사용되는 클릭 이벤트는 탭이기 때문에, 처리를 위해 탭을 사용할 때, APP를 활성화하기 위해 여러 번 클릭해야 하는 경우가 종종 있습니다

<script>
  $(&#39;#go&#39;).tap(function(){
      window.location.href = "wushang://android";
  });</script>

모르겠습니다. 구체적인 이유는 있지만 탭 이벤트일 수도 있습니다. 그런 다음 몇 가지 탐색 후에 이 문제를 피하기 위해 click 이벤트를 사용하거나 a 태그에 핸들러 기능을 직접 표시했습니다

<a>open Android app</a>
   open<script></script><script></script><script>$(&#39;#go&#39;).click(function () {       if(publicFun.isIos()){
          alert(&#39;it is IOS&#39;)
       }else{
          window.location.href = "wushang://android";
       }
    });function startApp(){       if(publicFun.isIos()){
          alert(&#39;it is IOS&#39;)
       }else{
          window.location.href = "wushang://android";
       }
    }</script>

그래서 앞으로 이런 종류의 문제가 발생하면 이 두 가지 방법을 사용하기로 결정했습니다. 아래는 실제 처리 기능입니다

 window.startApp = function(){     //启动APP if(publicFun.isInWx()){     //微信中alert("请在浏览器中打开");
     }else{      //非微信中if(publicFun.isIos()){　　　　//IOS系统，直接去itunes中，既可以下载也可以打开window.location.href = "https://itunes.apple.com/cn/app/[name]/id[id]";
        }else{      //android系统，通过定时器的方式，判断是否安装有APPvar hasApp = true , t = 1000;
            setTimeout(function () {  //没有安装APP则跳转至应用宝下载，延时时间设置为2秒  if(!hasApp) window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=[name]";
            } , 2000);var t1 = Date.now();
            window.location.href = "wushang://android";
            setTimeout(function () {    //t的时间就是出发APP启动的时间，若APP启动了，再次返回页面时t2这行代码执行，hasApp即为true。反之若APP没有启动即为false  var t2 = Date.now();
              hasApp = !(!t1 || t2 - t1 <p></p><p>사실 앱으로 ​​바로 이동하는 아주 간단한 방법이 있습니다. Android든 IOS든, WeChat이든 WeChat이 아니든 마찬가지입니다. App Store의 다운로드 페이지에는 다운로드와 열기의 두 가지 기능이 있습니다(IOS 플랫폼인 경우 앱 스토어에 연결하는 것입니다) </p><p> </p><p> 4. IOS 플랫폼 </p><p>ios9과 위의 링크는 열 수 없습니다. 실제로 iOS 9는 더 나은 솔루션인 범용 링크를 제공합니다. </p><p>이 기능은 iOS9에서 출시된 기능입니다. 앱이 유니버설 링크를 지원하는 경우 기존 HTTP 링크를 통해 쉽게 앱을 시작할 수 있습니다. (앱이 이미 iOS 기기에 설치되어 있는 경우 추가 판단 등을 할 필요가 없습니다.) , 또는 웹 페이지를 엽니다(앱이 iOS 장치에 설치되지 않음). 아마도 더 간단하게 설명할 수 있을 것입니다. iOS9 이전에는 Safari, UIWebView 또는 WKWebView와 같은 다양한 브라우저에서 앱을 깨워야 하기 때문에 일반적으로 스키마만 사용할 수 있었습니다. </p><p>위 내용은 인터넷의 범용 링크에 대한 소개에서 나온 것입니다. 프런트 엔드의 경우 간단히 말하면 http URL에 액세스합니다. 이 URL에 개발 플랫폼에 제출한 구성 파일의 규칙과 일치하는 콘텐츠가 포함되어 있으면 iOS 시스템이 앱을 열려고 시도합니다. 앱을 열 수 없으면 시스템이 브라우저에서 액세스하려는 링크로 리디렉션됩니다. 이는 매우 좋은 속성입니다. 이 속성을 통해 WeChat의 가로채기를 우회하고 iOS9에서 앱을 열 수 있기 때문입니다. </p><p>그래서 위의 클릭 이벤트는 단지 앱 스토어에 액세스하기 위한 것입니다. 앱이 설치되어 있으면 브라우저에서 액세스할 때 이미 앱에 있을 것이기 때문입니다. </p><p>이것들은 모두 IOS 구성이므로 더 이상 쓰지 않겠습니다. 매개변수 전달 및 페이지 방향은 실제로 UIWebView에서 현재 연결된 URL을 얻은 다음 문자열 분할 및 검증을 수행하여 이동할 페이지를 결정하고 매개변수 값을 얻는 것과 같습니다. </p><p></p>

위 내용은 APP 기본 페이지를 시작하는 H5 인스턴스 메소드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!