vue で h5 側のアプリを開きます (Android か Apple かを判断します)

vue で h5 側のアプリを開きます (Android か Apple かを判断します)

1. 開発環境 vue+vant

2. コンピュータシステム Windows 10 Professional Edition

3. h5 エンドの開発中に、ユーザーがアプリをインストールしたかどうかを判断するためにボタンをクリックする必要があることがよくあります (最初に Android か Apple かを判断し、次にアプリがインストールされているかどうかを判断します。インストールされていない場合はダウンロード ページにジャンプし、インストールされている場合は開きます)。

4. では、早速コードを見てみましょう。

<div class="xiding-r" @click="openapp">
 アプリを開く
</div>

5. メソッドに次のコードを追加します。

  オープンアプリ() {
  var u = ナビゲータ.userAgent、
   アプリ = navigator.appVersion;
  var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isAndroid) {
   // alert("私はAndroidです");
   android.app.android() を呼び出します。
  }
  (IOSの場合) {
   // アラート("私はAppleです");
  }
  },
アンドロイド(){
  var _clickTime = 新しい Date().getTime();
  window.location.href = 'zhihu://'; /***Android の同僚が提供したアプリ契約を開く***/

  // 20ms間隔でタイマーを開始し、累積消費時間が3000msを超えるかどうかを確認します。超えている場合は終了します。var _count = 0, intHandle;
  intHandle = setInterval(関数() {
   _count++;
   var elsTime = new Date().getTime() - _clickTime;
   _count >= 100 || elsTime > 5000 の場合 {
   コンソールログ(_count)
   コンソールログ(elsTime)
   クリア間隔(intHandle);
   // アプリが開いているかどうかを確認します if (document.hidden || document.webkitHidden) {
    // 開いた window.location.href = "zhihu://";
    // アラート('開かれました');
    ウィンドウを閉じる();
    // 戻る;
   } それ以外 {
    // 開いていません // alert('開いていません');
    window.location.href = ""; //ダウンロードリンク}
   }
  }, 20);
  },

5. 注: この場合、私は Zhihu の例を使用しました。

6. 注記

カスタム URL スキームを使用する利点は、他のプログラムでこの URL を介してアプリケーションを開くことができることです。アプリケーション A が URL スキーム:myApp を登録すると、<a href ="myApp://"> を通じてモバイル ブラウザーでアプリケーションを開くことができます。 iOS では、システムが URL スキームを登録し、アプリをインストールしている場合は、上記の Web ページ メソッド (テスト済みで有効) を使用してアプリを開くことができます。注意: iOS では http://xxx のような URL スキームを登録できませんが、Android では登録できます。

これで、vue の h5 からアプリを開く方法 (Android か Apple かを判断する方法) に関するこの記事は終了です。vue の h5 からアプリを開く方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue開発におけるブラウザ別の型判定方法
  • vueとAndroidおよびIOS間のインタラクションを実装する方法
  • VueはAndroidかiOSかをどのように判断するのか

<<:  DockerにTensorFlow環境を素早くインストールする方法

>>:  MySQLはinit-connectを使用してアクセス監査機能の実装を増やします

推薦する

WeChatアプレットは記録機能を実装します

この記事では、WeChatアプレットのレコード機能を実装するための具体的なコードを参考までに紹介しま...

nginx で SSL 証明書を設定して https サービスを実装する方法

前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...

MySQL の文字セット utf8 を utf8mb4 に変更する方法

MySQL 5.5 の場合、文字セットが設定されていない場合、MySQL のデフォルトの文字セットは...

Vue3 でモバイル ログインおよび登録モジュールをエレガントに実装する方法

目次序文入力ボックスコンポーネントレイアウトvモデルデータ検証ルール設計形状サブコンポーネントは検証...

MySQL 最適化チュートリアル: 大規模なページングクエリ

目次背景制限の最適化最適化方法1. カバーインデックスを使用する2. サブクエリの最適化3. 遅延連...

MySQLでSELECT文が実行される仕組み

目次1. マクロの観点からMySQLを分析する2. SQL ステートメントを実行するには、どの程度の...

【Webデザイン】E-WebTemplates の美しい海外の Web ページ テンプレート (FLASH+PSD ソース ファイル+HTML) を共有します

これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...

VMware + Ubuntu18.04 による Hadoop クラスタ環境の構築に関するグラフィック チュートリアル

目次序文VMware クローン仮想マシン (準備、3 台の仮想マシンのクローン、1 台のマスター、2...

CSS 兄弟要素フローティング分析の概要

float:左/右/なし; 1. 同じレベルフローティング(1)ブロックレベル要素を同じ行に表示する...

Vue はタブ ラベルを実装します (ラベルが自動スクロールを超える)

作成されたタブラベルがページの表示領域を超えると、タブラベルの距離だけ自動的にスクロールされます。ま...

MySQL テーブル構造を Excel にエクスポートする方法

要件は次のとおりですテーブル構造、フィールドコメント情報、テーブル名などをエクスポートします。これは...

Vue3 ベースのスクリプト設定構文 $refs の使用

目次1. Vue2 構文2. Vue3の使用1. コンポーネントのref値を設定する2. コンポーネ...

追加、削除、変更、クエリを実行するための JS 操作オブジェクト配列のサンプルコード

1. はじめに最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを...

Ubuntu 20.04 CUDA & cuDNN のインストール方法 (グラフィカル チュートリアル)

CUDA インストール cuda をダウンロードサポートされているcudaバージョンを表示するには...

WeChatアプレットはシンプルな計算機を実装する

WeChatアプレットの簡単な計算機は参考用です。具体的な内容は次のとおりです。 1. はじめに1....