Jump APP based on H5, if it is not installed, it will jump to appstore

Recently, the company's business has been promoted. Sending SMS H5 links to click on the APP to jump to the APP, but not to the business of the application market. Refer to the boss's blog to realize

code show as below:

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

scene description

  • The server sends the jump path, and the client jumps to the corresponding page according to the jump path sent by the server
  • Click the anchor point on the H5 page, and the APP side will jump to the specific page according to the specific jump path of the anchor point
  • The APP side receives the PUSH notification bar message from the server side, and jumps to the relevant page according to the click jump path of the message
  • The APP jumps to another APP specified page according to the URL

h5 evokes the App scheme

  • URL Scheme (both supported by android/ios)

  • Universal Link (supported by ios9 and above)

  • App Links (supported by android 6+ and above) [this can be omitted, because this can only be used when the app is opened by SMS]

  • WeChat open label SDK (both supported by android/ios)

  • Arouse app store in WeChat/browser

    This time we mainly use the URL Scheme, which is a bit like we locate a website through the domain name in the web, and the app also locates the app through a similar thing (URL Scheme), but the URL Scheme can only be used in the browser. The WeChat environment cannot be triggered.

Implementation ideas:

  1. navigator.userAgent-wechat built-in browser, android, ios built-in browser distinction, if wechat built-in open, prompt to open with built-in browser
  2. window.location = ('xxx://') - configure android, ios schema link
  3. If the app is not installed, it will execute setTimeout to jump to the download page to distinguish between different download addresses

My understanding is relatively shallow, but the function is realized. The article of the big guy below the specific principle is very detailed, you can refer to it.

Reference documents:

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

Guess you like

Origin blog.csdn.net/m0_58481462/article/details/126154779