H5は、アプリを開くためのvueを指します（電話にアプリがある場合はアプリを直接開く方法、ない場合はアプリのダウンロードページにジャンプする方法）

** ps：最初にios（iosダウンロードアドレスとiosに対応するアプリプロトコル）を尋ね、Android（Androidダウンロードアドレスとandriodに対応するアプリプロトコル）を見つける必要があります

ここに画像の説明を挿入

ボタンをクリックする状況は2つあります
1.電話にアプリがない場合は、ダウンロードページにジャンプします
2.電話にアプリがあり、アプリを開くことができます

ここに画像の説明を挿入

------------------------次のように実行します。------------------

ページを開くのがWeChatであるか、ブラウザを開くのがWeChatであるかを判断し（そして、ユーザーにブラウザを使用して開くように
強制し）、ユーザーにブラウザを使用してコードを開くように強制します。

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

マウントされたら、ページがWeChatまたはブラウザーのどちらで開かれているかを判別し、ユーザーにブラウザーを使用してコードを開くように強制します。
コードは次のとおりです。

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

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

ボタンをクリックします

<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) {
    
    
          }
        }
      }
    }

純粋なH5ネイティブjsコード

コードは次のように表示されます。

// =======================  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>

この方法には小さな問題があります。
電話にすでにアプリがある場合、ポップアップボックスがポップアップしてアプリを開きます。この間、ジャンプリンクページは引き続き実行されます。要件がそれほど大きくない場合は、これで十分です。これ
までのところ適切ではありません同僚もこれを解決している場合、私はいくつかの解決策を知っています。以下で何かをお話しできるといいのですが。

開発プロジェクトでの参照リンク：
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