Öffnen Sie die App auf der h5-Seite in Vue (bestimmen Sie, ob es sich um Android oder Apple handelt).

Öffnen Sie die App auf der h5-Seite in Vue (bestimmen Sie, ob es sich um Android oder Apple handelt).

1. Entwicklungsumgebung vue+vant

2. Computersystem Windows 10 Professional Edition

3. Während der Entwicklung des h5-Endes müssen wir häufig auf eine Schaltfläche klicken, um festzustellen, ob der Benutzer die App installiert hat (bestimmen Sie zuerst, ob es sich um Android oder Apple handelt, und bestimmen Sie dann, ob die App installiert ist. Wenn sie nicht installiert ist, springen Sie zur Download-Seite und öffnen Sie sie, wenn sie installiert ist).

4. Kommen wir ohne weitere Umschweife direkt zum Code:

<div Klasse="xiding-r" @click="openapp">
 Öffne die APP
</div>

5. Fügen Sie den folgenden Code in den Methoden hinzu:

  öffneapp() {
  var u = navigator.userAgent,
   app = navigator.appVersion;
  var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  wenn (istAndroid) {
   // alert("Ich bin Android");
   dies.android();
  }
  wenn (istIOS) {
   // alert("Ich bin Apple");
  }
  },
android() {
  var _clickTime = neues Date().getTime();
  window.location.href = 'zhihu://'; /***Öffnen Sie die App-Vereinbarung, bereitgestellt von Android-Kollegen***/

  //Starte den Timer mit einem Intervall von 20 ms und überprüfe, ob die kumulierte Verbrauchszeit 3000 ms überschreitet. Wenn sie überschritten wird, wird sie beendet. var _count = 0, intHandle;
  intHandle = setzeIntervall(Funktion () {
   _Anzahl++;
   var elsTime = neues Date().getTime() - _clickTime;
   wenn (_count >= 100 || elsTime > 5000) {
   konsole.log(_Anzahl)
   console.log(elsTime)
   Intervall löschen(intHandle);
   // Prüfen, ob die App geöffnet ist, if (document.hidden || document.webkitHidden) {
    //Geöffnet window.location.href = "zhihu://";
    // Alarm ('geöffnet');
    fenster.schließen();
    // zurückkehren;
   } anders {
    // Nicht geöffnet // alert('Nicht geöffnet');
    window.location.href = ""; //Download-Link}
   }
  }, 20);
  },

5. Hinweis: In diesem Fall habe ich das Beispiel von Zhihu verwendet:

6. Hinweis

Der Vorteil der Verwendung des benutzerdefinierten URL-Schemas besteht darin, dass Sie die Anwendung über diese URL in anderen Programmen öffnen können. Wenn Anwendung A ein URL-Schema:myApp registriert, können Sie Ihre Anwendung über <a href ="myApp://"> im mobilen Browser öffnen. Bitte beachten Sie, dass Sie unter iOS die App über die oben beschriebene Webseitenmethode öffnen können (getestet und effektiv), wenn das System das URL-Schema registriert und die App installiert hat. Hinweis: Sie können ein URL-Schema wie http://xxx nicht in iOS registrieren, in Android jedoch schon.

Dies ist das Ende dieses Artikels zum Öffnen einer App von h5 in vue (Feststellen, ob es sich um Android oder Apple handelt). Weitere relevante Inhalte zum Öffnen einer App von h5 in vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Typbeurteilungsmethode verschiedener Browser in der Vue-Entwicklung
  • So implementieren Sie die Interaktion zwischen Vue und Android und iOS
  • Wie erkennt Vue, ob es sich um Android oder iOS handelt?

<<:  So installieren Sie schnell eine Tensorflow-Umgebung in Docker

>>:  MySQL verwendet Init-Connect, um die Implementierung der Zugriffsüberwachungsfunktion zu verbessern

Artikel empfehlen

CSS-Code zur Unterscheidung von IE8/IE9/IE10/IE11 Chrome Firefox

Das Debuggen der Website-Kompatibilität ist wirkl...

Erfahrungsaustausch zur Optimierung von MySQL-Big-Data-Abfragen (empfohlen)

Ernsthafte MySQL-Optimierung! Wenn die MySQL-Date...

So verwenden Sie Maxwell zum Synchronisieren von MySQL-Daten in Echtzeit

Inhaltsverzeichnis Über Maxwell Konfiguration und...

Änderung und Abfrage von Python MySQL-Datenbanktabellen

Python stellt eine Verbindung zu MySQL her, um Da...

Detaillierter Prozess zum Upgrade von gcc (Version 10.2.0) in der CentOS7-Umgebung

Inhaltsverzeichnis Kurze Einleitung 1. Überprüfen...

So vergessen Sie das Root-Passwort in Mysql8.0.13 unter Windows 10

1. Stoppen Sie zuerst den MySQL-Dienst Öffnen Sie...

Detaillierte Erläuterung der gespeicherten Prozeduren und Funktionen von MySQL

1 Gespeicherte Prozedur 1.1 Was ist eine gespeich...

Detaillierte Erklärung des Json-Formats

Inhaltsverzeichnis Ein JSON basiert auf zwei Stru...

JSONP-domänenübergreifende Simulation der Baidu-Suche

Inhaltsverzeichnis 1. Was ist JSONP 2. JSONP-Cros...

Analyse der Verwendung der Funktion zur sofortigen Ausführung in JavaScript

Wir wissen, dass eine Funktion im Allgemeinen auf...

Implementierung von nacos1.3.0, erstellt mit Docker

1. Fortsetzen nacos-Datenbank Datenbankname nacos...

Echarts-Tutorial zur Implementierung von Baumdiagrammen

Treemaps dienen vor allem der Visualisierung baum...