H5 refers to vue to open the app (how to open the app directly if there is an app in the phone, if not, then jump to the app download page)

**ps: You must first ask ios (ios download address and app protocol corresponding to ios), and find Android (android download address and app protocol corresponding to andriod)

Insert picture description here

There are two situations for clicking the button
1. If the phone does not have an app, jump to the download page
2. There is an app in the phone, you can open the app

Insert picture description here

------------------------Proceed as follows:------------------

Determine whether it is WeChat to open the page or the browser (and force the user to use the browser to open) to
force the user to use the browser to open the code:

  <div id='guideZfbPayPage' v-if="iosApp">
    <div class="wx-open" >
      <p>1.请点击右上角 • • •</p>
      <p>2.选择在浏览器中打开</p>
      <img src="./images/arrow_right.png" />
    </div>
  </div>

When mounted, judge whether the page is opened by WeChat or browser, and force the user to use the browser to open the code. The
code is as follows:

    mounted(){
    
    
      if (this.isWeixin()) {
    
    
        this.iosApp = true
      } else {
    
    
        //显示手动打开外置浏览器提示
        this.iosApp = false
      }
    },

methods:{
    
    
      isWeixin() {
    
    
        return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
      },
}

Click the button

<div @click="openApp> 打开app</div>

   methods:{
    
      
      openApp() {
    
    
        const ua = window.navigator.userAgent.toLowerCase();
        // 非微信浏览器
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
    
    
          const loadDateTime = +new Date();
          window.setTimeout(function () {
    
    
            const timeOutDateTime = +new Date();
            if ((timeOutDateTime - loadDateTime) < 5000) {
    
    
              window.location.href = '// ios下载地址'; 
            } else {
    
    
              window.close()
            }
          }, 2000);
          window.location.href = '// ios对应的app协议'; 
        } else if (navigator.userAgent.match(/android/i)) {
    
    
          const state = null;
          try {
    
    
            window.location.href = '// 安卓对应的app协议'; 
            setTimeout(function () {
    
    
              window.location.href = '// android下载地址'; 
            }, 500);
          } catch (e) {
    
    
          }
        }
      }
    }

Pure H5 native js code

code show as below:

// =======================  Dom  ==========================

<div id='guideZfbPayPage' style="display: block;" >
  <div class="wx-open" >
      <p>1.请点击右上角 • • •</p>
      <p>2.选择在浏览器中打开</p>
      <img src="./image/arrow_right.png" />
  </div>
</div>

// =======================  css 样式  ==========================
<style>
/* 提示浏览器打开 */
#guideZfbPayPage {
    
    
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 777;
}
.wx-open {
    
    
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 888888;
}
.wx-open p {
    
    
    position: relative;
    top: 38%;
    margin-block-start: 0;
    color: white;
    font-size: 18px;
    line-height: 20px;
}
.wx-open img {
    
    
    width: 25%;
    border-style: none;
    position: absolute;
    transform: rotateZ(246deg);
    top: 6%;
    right: 28px;
}
</style>

// =======================  js  ==========================
<script>
// 页面加载时，立即执行代码
(function(){
    
    
  var u = navigator.userAgent,
  app = navigator.appVersion
  var isAndroidNum = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
  var isIOSNum = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isAndroidNum) {
    
    
    isAndroid = true
    schemeUrl= 'android://com.xpx.watercamera/open'
    downloadUrl = 'https://www.pgyer.com/8PGW'
  }
  if (isIOSNum) {
    
    
    isIos = true
    schemeUrl= 'iOSXPXMJCamera://'
    downloadUrl = 'itms-apps://itunes.apple.com/app/id1549495554'
  }
  if (isWeixin()) {
    
    
    console.log(11111111);
  document.getElementById("guideZfbPayPage").style.display=  "block"
  } else {
    
    
    //显示手动打开外置浏览器提示
    document.getElementById("guideZfbPayPage").style.display=  "none"
  }
})();

//判断当前是什么浏览器
function isWeixin() {
    
    
  return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
};
function openApp() {
    
    
  const ua = window.navigator.userAgent.toLowerCase();
  // 非微信浏览器
  if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
    
    
    const loadDateTime = +new Date();
    window.setTimeout(function () {
    
    
      const timeOutDateTime = +new Date();
      if ((timeOutDateTime - loadDateTime) < 5000) {
    
    
        window.location.href = '// ios下载地址'; 
      } else {
    
    
        window.close()
      }
    }, 2000);
    window.location.href = '// ios对应的app协议'; 
  } else if (navigator.userAgent.match(/android/i)) {
    
    
    const state = null;
    try {
    
    
      window.location.href = '// 安卓对应的app协议'; 
      setTimeout(function () {
    
    
        window.location.href = '// android下载地址'; 
      }, 500);
    } catch (e) {
    
    
    }
  }
}
</script>

This method has a small problem :
if the phone already has an app, a pop-up box will pop up to open the app. During this period, the jump link page will continue to be executed. If the requirement is not very large, this is enough;
no suitable one has been found yet. If any colleague is also solving this, I know some solutions and I hope I can tell you something below.

Reference links in the development project:
1.
https://blog.csdn.net/qq_36710522/article/details/100769219
2. https://www.dazhuanlan.com/2020/03/09/5e65d7366b6aa/ 3.https:/ /blog.csdn.net/w18246390463/article/details/81707961