APP (IOS、Android) を呼び出すモバイル H5 の記述例

APP (IOS、Android) を呼び出すモバイル H5 の記述例

iOS

1. URLスキーム

このソリューションは基本的に、WeChat、QQ 組み込みブラウザ、QQ ブラウザなど以外のブラウザ向けです。ネイティブからスキームを取得して a タグに配置したり、location.href にジャンプしたりできます。

iframe を使用してページにジャンプします。スキームがある場合はタイマーがトリガーされ、スキームがない場合はダウンロード アドレスにジャンプします。ただし、iOS でこの方法を使用すると、アプリがない場合に 2 回プロンプトが表示されます。

 var openApp = 関数 (src) {
        // iframe 経由で APP を開こうとします。正常に開くことができた場合は、APP に直接切り替わり、a タグのデフォルトの動作が自動的にブロックされます。// それ以外の場合は、a タグの href リンクを開きます const ifr = document.createElement('iframe');
        ifr.src = src;
        ifr.style.display = 'なし';
        ドキュメント本体に子要素を追加します(ifr);
        var 時間 = +新しい日付()
        ウィンドウ.setTimeout(() => {
          document.body.removeChild(ifr);
          ((+新しい日付()-openTime>2500)){
            window.location = 'APP Storeのダウンロードアドレス'
          }
        }, 600);
      };

2. ユニバーサルリンク (iOS)

これは iOS9 で導入された機能です。アプリがユニバーサル リンクをサポートしている場合は、従来の HTTP リンクを介してアプリを簡単に起動したり (アプリが iOS デバイスにすでにインストールされている場合は追加の判断は不要)、Web ページを開いたり (アプリが iOS デバイスにインストールされていない場合) できます。おそらく、もっと簡単に説明できるでしょう。iOS 9 より前では、Safari、UIWebView、WKWebView などのさまざまなブラウザからアプリを起動する必要がある場合、通常はスキームしか使用できませんでした。

window.location.href = "APP によって提供されたユニバーサル リンク"

要約する

互換性のある書き込み

if (isGreaterThan9){
   window.location.href = "APP によって提供されたユニバーサル リンク";
   戻る;
}
openApp(ソース)

アンドロイド

同様の方法

 if (openApp('urlスキームurl')) {
            openApp('urlスキームurl');
          } それ以外 {
            タイムアウトを設定する(() => {
              window.location.href = 'APP Market ダウンロード アドレス'; // 通常は Google ですが、アプリ ストアによってアドレスが異なります}, 600);
          }
      }

要約する

モバイル H5 ウェイクアップ アプリに関するこの記事はこれで終わりです。モバイル H5 ウェイクアップ アプリに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • H5ウェイクアップアプリの実装方法と注意点のまとめ

<<:  Win10 の Linux サブシステムを有効にする方法を説明します (詳細な画像とテキスト付き)

>>:  MySQLインデックスを追加する3つの原則を簡単に理解する

推薦する

MySQL 5.6 から 5.7 にアップグレードする際のマスター スレーブ遅延問題のトラブルシューティング

最近、Zabbix データベースを MySQL 5.6 から 5.7 にアップグレードしたときに、マ...

Mysql の一般的なベンチマーク コマンドの概要

mysqlslap共通パラメータの説明–auto-generate-sql システムはテスト用のSQ...

CSS: 訪問した疑似クラスセレクタの秘密の記憶

昨日、a:visited を使用して「Guess You Like」の右側にある訪問済みテキストの色...

アイデアコンパイラvueインデントエラー問題シナリオの分析

プロジェクトシナリオ: Vueプロジェクトを実行したらインデントエラーが出ました。ideaコンパイラ...

WeChatミニプログラムQRコード生成ツール weapp-qrcode 詳細説明

WeChat ミニプログラム - QR コード ジェネレーターダウンロード: weapp-qrcod...

MySQLサーバーは--read-onlyオプションで実行されているため、このステートメントを実行できません

会議中に同僚から開発ライブラリを書き込めないとの報告を受けました。エラー メッセージは次のとおりでし...

SQL Server の完全バックアップに関する珍しいエラーと解決策

1. エラーの詳細一度、データベース全体のバックアップを手動で実行したときに、次のエラーが発生しまし...

MySQLにおける(JOIN/ORDER BY)文のクエリ処理と最適化方法

EXPLAIN ステートメントは、MySQL クエリ ステートメント プロセスと EXPLAIN ス...

jsはショッピングカートの加算と減算、価格計算機能を実現します

この記事では、ショッピングカートの増減と価格計算を実現するためのjsの具体的なコードを紹介します。具...

システム CD をマウントして yum ウェアハウスを構築する VMware 15.5 バージョンのグラフィック チュートリアル

1. CentOS 7 仮想マシンを開きます。 2. 仮想マシンにログインし、リストにないユーザー名...

html+css3で実装されたログインインターフェース

成果を達成するまずHTMLを使って基本的なフレームワークを構築します <本文> <...

初心者がHTMLタグを学ぶ(2)

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...

フロントエンドページのスライド検証を実装するための JavaScript + HTML

この記事では、フロントエンドページのスライド検証を実装するためのJavaScript + HTMLの...

Ubuntu 18.04 で中国語入力方法を設定する方法

Ubuntuの最新バージョンでは、ユーザーは中国語入力方法を別途ダウンロードする必要がなくなりました...

Typescriptを使用してWeChatミニプログラムを開発するための詳細な手順

Typescript の利点については詳しく説明する必要はありません。ご興味があれば、(https:...