H5 ベースの Jump APP、インストールされていない場合は、appstore にジャンプします

最近、会社のビジネスが推進されています。SMS H5 リンクを送信して、APP をクリックすると、APP にジャンプしますが、アプリケーション市場のビジネスにはリンクしません。上司のブログを参照してください。

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

 toApp() {
    
    
     //微信内置浏览器
      let ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
    
    
          //微信内置浏览器,提醒浏览器打开  -我这边ui提供的是图片
        this.dialogImg = true;
        return;
      }
      //ios
      if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
    
    
        window.location = ('xxx://');//schema链接或者universal link
        window.setTimeout(() => {
    
     //如果没有安装app,便会执行setTimeout跳转下载页
            window.location.href = "xxx"; //ios下载地址3
        }, 3000);
       //android
      } else if (navigator.userAgent.match(/android/i)) {
    
    
        try {
    
    
          window.location.href = ('app://xxx'); //schema链接或者universal link
          window.setTimeout(() => {
    
    
            window.location = "xxx"; //android下载地址
          }, 3000);
        } catch (e) {
    
    
        }
      }
    }

シーンの説明

  • サーバーはジャンプパスを送信し、クライアントはサーバーから送信されたジャンプパスに従って対応するページにジャンプします。
  • H5ページ上のアンカーポイントをクリックすると、APP側はアンカーポイントの特定のジャンプパスに従って特定のページにジャンプします
  • APP側はサーバー側からPUSH通知バーメッセージを受信し、メッセージのクリックジャンプパスに従って該当ページにジャンプします。
  • APPはURLに従って別のAPP指定のページにジャンプします

h5 はアプリ スキームを呼び出します

  • URL スキーム (両方とも Android/iOS でサポート)

  • ユニバーサルリンク(ios9以降でサポート)

  • アプリリンク (Android 6 以降でサポート) [SMS でアプリを開いた場合にのみ使用できるため、これは省略できます]

  • WeChat オープンラベル SDK (両方とも Android/iOS でサポート)

  • WeChat/ブラウザのアプリストアを覚醒

    今回は主に URL スキームを使用します。これは、Web でドメイン名を使用して Web サイトを見つけるのと似ており、アプリも同様のもの (URL スキーム) を使用してアプリを見つけます。ただし、URL スキームはのみ使用できます。 WeChat 環境をトリガーできません。

実装アイデア:

  1. navigator.userAgent-wechat 組み込みブラウザ、android、ios 組み込みブラウザの区別、wechat 組み込みを開いた場合、組み込みブラウザで開くように求めるプロンプト
  2. window.location = ('xxx://') - Android、iOS スキーマ リンクを構成します
  3. アプリがインストールされていない場合は、setTimeout を実行してダウンロード ページにジャンプし、異なるダウンロード アドレスを区別します。

私の理解は比較的浅いですが、機能は実現されており、具体的な原理については下の偉い人の記事がとても詳しく書かれているので参考にしてください。

参照文書:

https://blog.csdn.net/weixin_43972437/article/details/121210350?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165957877516781818735740%2522%252C%2522scm%25 22%253A%252220140713.130102334…%2522%257D&request_id= 165957877516781818735740&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2すべてsobaiduend~default-2-121210350-null-null.142 v39 pc_rank_v36&utm_term=h5%E8%B7%B3%E8%BD %ACAPP&spm=1018.2226.3001.4187

おすすめ

転載: blog.csdn.net/m0_58481462/article/details/126154779