Open the app on the h5 side in vue (determine whether it is Android or Apple)

1. Development environment vue+vant

2. Computer system Windows 10 Professional Edition

3. During the development of the h5 end, we often need to click a button to determine whether the user has installed the app (first determine whether it is Android or Apple, then determine whether the app is installed. If not installed, jump to the download page, and if installed, open it).

4. Without further ado, let's get straight to the code:

<div class="xiding-r" @click="openapp">
 Open APP
</div>

5. Add the following code in methods:

  openapp() {
  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/);
  if (isAndroid) {
   // alert("I am Android");
   this.android();
  }
  if (isIOS) {
   // alert("I am Apple");
  }
  },

android() {
  var _clickTime = new Date().getTime();
  window.location.href = 'zhihu://'; /***Open the app agreement, provided by Android colleagues***/

  //Start the timer with an interval of 20ms, and check whether the cumulative consumption time exceeds 3000ms. If it exceeds, it will end var _count = 0, intHandle;
  intHandle = setInterval(function () {
   _count++;
   var elsTime = new Date().getTime() - _clickTime;
   if (_count >= 100 || elsTime > 5000) {
   console.log(_count)
   console.log(elsTime)
   clearInterval(intHandle);
   // Check if the app is open if (document.hidden || document.webkitHidden) {
    //Opened window.location.href = "zhihu://";
    // alert('opened');
    window.close();
    // return;
   } else {
    // Not open // alert('Not open');
    window.location.href = ""; //Download link}
   }
  }, 20);
  },

5. Note: In this case I used the example of Zhihu:

6. Note

The advantage of using Custom URL Scheme is that you can open the application through this URL in other programs. If application A registers a url scheme:myApp, then you can open your application in the mobile browser through <a href ="myApp://">. Please note that in iOS, if the system has registered the url schemen and installed the app, you can open the app through the web page method above (tested and effective). Note: You cannot register a URL scheme like http://xxx in iOS, but you can in Android.

This is the end of this article about opening app from h5 in vue (determining whether it is Android or Apple). For more relevant content about opening app from h5 in vue, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!