H5ウェイクアップアプリの実装方法と注意点のまとめ

序文

フロントエンド開発者として、このような要件がよくあります。ユーザーが独自のアプリをインストールしている場合は、アプリのホームページまたは指定されたページを開きます。アプリがインストールされていない場合は、対応するダウンロードページにジャンプします。こうした需要は、新規ユーザーの獲得や分裂を進める上でも欠かせない部分なので、解決していく必要があります。今日はこれを実現する方法を見てみましょう。

APPメソッドにジャンプ

現在、この機能を実装するためのより良い方法は、URL スキーム、メタタグ、ユニバーサルリンクの 2 つです。

URLスキーム

URL スキームは、アプリが相互にジャンプできるようにする外部インターフェースです。アプリに固有の URL パスを定義することで、外部から指定したアプリを素早く開くことができます。アプリごとに URL スキームが異なります。同じ URL スキームが存在する場合、後からインストールされたアプリの URL スキームは上書きされ、呼び出すことができないため、システムは最初にインストールされたアプリの URL スキームに応答します。 URL スキームの形式は次のとおりです。

[スキーム]://[ホスト]/[パス]?[クエリ]

よく使用される URL スキームプラットフォームをいくつか紹介します。

QQ: mqq://
微信: weixin://
テンセント微博: TencentWeibo://
タオバオ：taobao://
アリペイ：alipay://
微博：sinaweibo://

AndroidとiOSの両方のプラットフォームをサポート

メタタグ

ウェブページにメタタグを設定すると、Safari で開いたときにアプリのナビゲーションバーが上部に表示されます。アプリがインストールされていない場合は、クリックしてアプリストアにジャンプし、ダウンロードしてください。アプリがインストールされている場合は、上部のメタタグからアプリを直接起動できます。

iOSのみ

ユニバーサルリンク

ユニバーサルリンクはユニバーサルリンクです。iOS9 以降のユーザーは、Safari で開かなくても、このリンクをクリックすることでアプリにシームレスにリダイレクトできます。ユーザーがこのアプリをインストールしていない場合、このリンクが指す Web ページは Safari で開かれます。

iOS 専用で、iOS 9.0 でのみ利用可能

さまざまな使い方

URL スキームとユニバーサルリンクの両方を構成する必要があり、構成後にのみ有効になります。

URLスキームの使用

URL スキームの使い方は難しくありません。最も簡単な方法は、タグリンクを追加することです。

<a href="weixin://" rel="external nofollow" >WeChatを開く</a>

このアクセス方法は比較的簡単で、AndroidとiOSの両方で使用できますが、WeChatでは機能しません。WeChatにはURLスキームの使用を完全にブロックするホワイトリストがあります。ホワイトリストに追加されない限り、JD.comのように直接開くことができますが、そうでない場合は不可能です。

メタタグの使用

メタタグ方式も非常に簡単です。ウェブページにメタタグを追加するだけです。

 <meta charset="UTF-8" name="apple-itunes-app" content="app-id=7777777, affiliate-data=myAffiliateData, app-argument=yourScheme://">

その効果は、Web ページの上部に固定バーが表示されることです。

ユニバーサルリンクの使用

この設定方法はちょっと面倒です。私はiOS開発に携わったことがないので、公式サイトの紹介をします。

要約する

上記の方法はいずれも完璧な解決策にはなりません。Apple のみがサポートしているか、ヘッドアプリに多くの制限があるため、適応するには自分で多くの作業を行う必要があります。

まず、どの方法を取るかを確認する必要があります。上記の紹介に基づくと、最初の URL スキーム方法のみが最良の選択であるはずです。結局のところ、両方のプラットフォームがそれをサポートしています。次のステップは、ヘッド APP でそれを開く方法をどのように解決するかです。実際には、この問題は通常、ユーザーに外部ブラウザーで開くように促すため、基本的にこれで問題は解決します。コードを使用して、段階的に実装してみましょう。

ウェイクアップAPP機能を実現

ブラウザを開くように促す

まず、次のようにブラウザで開く小さなプロンプトを実装する必要があります。

トップアプリを判断する機能を実現

ここでは、ブラウザの User-Agent を使用して、それが WeChat ブラウザか他の APP ブラウザかを判断します。コードは次のとおりです。

/**
 * ブラウザがヘッドアプリであるかどうかを判定する
 */
関数isBlackApp() {
  var u = navigator.userAgent.toLowerCase();
  /micromessenger/i.test(u) を返します || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf('mqqbrowser') > -1;
}

上記の関数は、WeChat、Weibo、QQ、QQ Browser などの複数のブラウザを決定します。開くまたはダウンロードボタンをクリックすると、それがヘッドアプリであるかどうかが判断されます。ヘッドアプリである場合は、ブラウザーで開くように求められます。それ以外の場合は、独自のアプリを直接開くことができます。コードは次のとおりです。

関数 openTuer() {
  if (isBlackApp()) {
    // ヘッダー APP により、Web ページにヒントが表示され、ブラウザーで開きます showTips();
  } それ以外 {
    // ヘッド APP でない場合は、直接開きます。ここでパラメータを使用する必要はありません。記述後、後から追加できます。 openApp(0, 0);
  }
}

アプリを起動する基本的な方法

openApp 関数についても上で触れましたが、具体的にはどのようなものなのでしょうか。ここではこの機能の実装方法を見ていきます。ここで、現在のプロジェクト要件によれば、APP を開くには 2 つのパラメータが必要です。1 つは APP の特定のページを開くためのパラメータで、もう 1 つは特定のページを開くために必要なパラメータ arg です。したがって、openApp 関数には 2 つのパラメータが必要です。

openAppの実装

openApp 関数は非常にシンプルで、次の 2 つの関数を呼び出します。

関数 openApp(which, arg) {
    jumpApp("testApp://which=" + which + "&arg=" + arg);
    いいえApp();
}

最初の関数は APP を開く役割を担い、2 番目の関数は APP が開かれていないかインストールされていない場合にアドレスジャンプする役割を担います。

jumpAppの実装

なお、この機能はiOS8以前はiframeを使用して実装できましたが、iOS8以降はAppleによってブロックされているため実装できず、ページジャンプを通じてのみ実装できます。具体的なコードは次のとおりです。

関数jumpApp(t) {
  試す {
    var e = navigator.userAgent.toLowerCase(),
      n = e.match(/cpu iphone os (.*?) like mac os/);
    (((n = null !== n ? n[1].replace(/_/g, ".") : 0)、parseInt(n) >= 9)) の場合 {
      ウィンドウの場所の href = t;
    } それ以外 {
      var r = document.createElement("iframe");
      (r.src = t)、(r.style.display = "none")、document.body.appendChild(r);
    }
  } キャッチ (e) {
    ウィンドウの場所の href = t;
  }
}

noAppの実装

noApp の実装も非常にシンプルです。タイマーを定義するだけです。一定時間内に応答がない場合は、指定されたダウンロードページにジャンプします。具体的なコードは次のとおりです。

var タイマー = null;
関数noApp() {
  var t = Date.now(),
    r = "http://www.tuerapp.com";
  タイマー = setTimeout(関数() {
    Date.now() を返す - t > 2200
      ? (clearTimeout(タイマー), !1)
      : !document.webkitHidden && !document.hidden && void (location.href = r);
  }, 2000);
}

今のところは基本的な機能は実現できており、実際のプロセスでは多くの問題が発生する可能性があります。

要約する

H5ウェイクアップアプリの実装方法と注意事項についてはこれで終わりです。より関連性の高いH5ウェイクアップアプリの実装方法の内容については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません: