HTML 5ページ起動アプリ

HTML5 call native app
背景
appの露出とappのユーザーの新規化を向上させるためには、H 5共有ページを追加するアプリケーションシーンは欠かせませんが、さまざまなプラットフォーム環境が異なり、どのように互換性とポリシー処理を行うかが異なります.以下、一つ一つ説明します
1.ページを元のappに戻す

オリジナルアプリを起動し、アプリ

をダウンロードします.

異なるプラットフォームの互換性と戦略処理、例えば微信、微博、QQ、QQ空間、ブラウザ

2.HTML 5ページからオリジナルアプリを呼び出す
Android、ios呼び出し方式
Schame + Android Itent
Schema ＋　Universal links(IOS9+)
3.呼び出しの方式

アプリを引き上げる

window.location.href= "ftnn:login";

説明:クライアントがインストールされているかどうかを判断できないためwindowを通過する.location=schemaの方法では、ブラウザがエラーページにジャンプする可能性があります.だからiframeを通ってsrcまたはa.hrefをschemaにロードすることは、現在比較的一般的な方法である.

コード実装

export const locationCallAPP = (url, downloadUrl, ios9Type) => {
 location.href = url
 var timeout
 var t = Date.now()
 var interval = ios9Type ? 2500 : 1000
 timeout && clearTimeout(timeout)
 timeout = setTimeout(function() {
   if (Date.now() - t < interval + 1000) {
     location.href = downloadUrl
   }
 }, interval)
}

export const iframeCallAPP = (url, downloadUrl, ios9Type) => {
 console.log('[iframeCallAPP1]'+url)
 var timeout
 var t = Date.now()
 var interval = ios9Type ? 2500 : 2000
 timeout && clearTimeout(timeout)
 timeout = setTimeout(function () {
   if (Date.now() - t < interval+1000) {
      console.log('[iframeCallAPP2]'+downloadUrl)
     location.href = downloadUrl
   }
 }, interval)
 if (ios9Type) {
   location.href = url
 }
 var docNode = document
 var iframe = docNode.createElement('iframe')
 iframe.setAttribute('src', url)
 // iframe.setAttribute('target', '_self');
 iframe.setAttribute('style', 'display:none')
 docNode.body.appendChild(iframe)
 setTimeout(function () {
   docNode.body.removeChild(iframe)
 }, 200)
}

4. 特殊シーンの説明
マイクロ信

• 応用宝deeplink

マイクロブログ

• 中間プロンプトページ
  
  • は、「ブラウザで開いてください」
  に似ています.
  

5. 問題:携帯電話にappがインストールされているかどうか分かりません.

    APP，    ，  setTimeout    ，        ，   ：
$(document).on('visibilitychange webkitvisibilitychange', function() {
            var tag = document.hidden || document.webkitHidden;
            if (tag) {
                clearTimeout(timer);
            }
        })

    $(window).on('pagehide', function() {
        clearTimeout(timer);
    })

スマホにアプリがインストールされている場合、アプリを起動してからダウンロードはできません
アプリがインストールされていないため、しばらくしてからダウンロードします

6.H5 page call native

H 5 page call nativeこのライブラリは、一般的なプラットフォーム呼び出しappと互換性があります.