ホームページ  >  記事  >  ウェブフロントエンド  >  H5 ページで APP インスタンス コードを呼び出してみます。

H5 ページで APP インスタンス コードを呼び出してみます。

小云云
小云云オリジナル
2018-02-11 11:18:042500ブラウズ

この記事では主に、H5 ページで APP を呼び出すサンプルコードを紹介します。お役に立てれば幸いです。

市場で一般的な機能

この機能は、現在、淘宝H5、Zhihu H5などで非常に一般的であるはずです。 。 。

H5 ページで APP インスタンス コードを呼び出してみます。 H5 ページで APP インスタンス コードを呼び出してみます。

クリックすると、APPが起動するか、ダウンロードページが開くか、直接ダウンロードします。

しかし、Zhihu のこの機能は少し異なることがわかりました。そのロジックは、まず電話で Zhihu APP を開くかどうかを尋ね、その後、ダウンロードをポップアップ表示します。プロンプト。

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 をインターセプトします (これは、APP のウェイクアップに失敗する理由の 1 つにすぎません)。この src 属性は違法なハッカーであり、これを悪用することによって多くの脆弱性が引き起こされるためです。

そのため、この時点でアプリの調整が失敗したかどうかを判断する必要があります。

疑似コードは次のとおりです:

const timer = 1000;setTimeout(function() {        // 执行成功后移除iframedocument.body.removeChild(iframe);//setTimeout小于2000通常认为是唤起APP失败 if (Date.now() - last <div class="highlight highlight-source-js"></div>理解<p>: <strong></strong></p>
    呼び出しが成功すると、H5 ページがバックグラウンドに切り替わり、タイマーが遅延します。ユーザーがアプリから H5 ページに切り替えた場合でも、時間差は 2 秒以上である必要があります。
  • 覚醒に失敗した場合、タイマーは時間通りに実行され(100msの遅延があっても十分です)、この時点では2秒未満でなければなりません。
  • iframe がインターセプトされる場合、互換性のために
を使用できます。

window.location.href = URL scheme関連おすすめ:

H5ページに関するおすすめ記事10選

WeChat H5ページの作成プロセスを詳しく説明

H5ページの注意点

以上がH5 ページで APP インスタンス コードを呼び出してみます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。