How to implement H5 to invoke APP and debug bug solutions

Preface:

Why am I suddenly interested in this? It is because the H5 cashier calls the vx/jfb app recently when I am doing demand, but there are always bugs during debugging (a certain version of the application cannot lift the payment app), so I understand this article.

The most common scenario we usually see is that when you see an advertisement in the browser and click on the advertisement, he will judge that if you have installed the corresponding APP on your mobile phone, he will open the APP. If it is not installed, he will help you jump to the app store to download. (If you are not humanized, you will download it to you silently in the background, and you have no perception at all).

Let's take a look at how to jump from H5 to APP~

Call the end

We also call the deep link technology the end technology. Of course, the implementation methods of different platforms are somewhat different, and the common ones are:

They are:

• url schema (generic)
• universal link(ios)
• App link,chrome intents(android)

url schema

This is a relatively general technology, and the compatibility of each platform is also very good. It is generallyProtocol name, path, parameterscomposition. This is generally provided by students developed by native. Our front-end students can open a page in the app or app after getting this schema.

Opening method:

The commonly used methods are:

• Directly by jumping

="zhihu://" rel="external nofollow" 

• Jump via iframe

const iframe = ('iframe')
 = 'zhihu://'
(iframe)

• Directly use the a tag to jump
• Open via js bridge

 = {
 url:'zhihu://'
}

To determine whether it is successfully evoked:

When the user fails to call the app, we hope to guide the user to download it. So how can we know whether the current app is successfully called?

We can listen to the visibilitychange event of the current page. If the page is hidden, it means that the call end is successful, otherwise the call end fails and jump to the application store.

OK, let's try it:

First of all, Tencent Weibo is not installed on my phone, so I can't call it. We asked it to jump to the application download page corresponding to the app store. Here we will use Taobao's download page instead:

<template>  
  <div class="open_app">  
      <div class="open_app_title">Calling the end testDemo</div>  
      <div class="open_btn" @click="open">Open Tencent Weibo</div>  
  </div>  
</template>  
<script>  
let timer  
export default {  
    name: 'openApp',  
    methods: {  
        watchVisibility() {  
            ('visibilitychange', () => {  
                // Listen to page visibility                if() {  
                    // If the page is hidden, it means that the call is successful. At this time, you need to clear the download timer                    clearTimeout(timer)  
                }  
            })  
        },  
        open() {  
            timer = setTimeout(() => {  
              // The download page of Tencent Weibo was not found, and the Taobao download page is temporarily replaced here.                 = '![]()/cn/app/id387682726'  
            }, 3000)  
             = 'TencentWeibo://'  
        }  
    }  
}  
</script>  
<style lang="less">  
.open_app_title {  
    font-size: (20/@rem);  
}  
.open_btn{  
    margin-top:(20/@rem);  
    padding:(10/@rem) 0;  
    border-radius: (8/@rem);  
    background: salmon;  
    color: #fff;  
    font-size: (16/@rem);  
}  
</style>

applicability:

The url scheme has good compatibility and can be supported on both Android and iOS. It is the most commonly used method at present. But the obvious disadvantages can be seen from the code:

• It is impossible to accurately determine whether the call is successfully called, because this is essentially opening a link, but not an ordinary http link. Therefore, if the user does not install the corresponding app, then there will be no response in the browser after trying to jump. The timer is used to guide the user to jump to the corresponding application store. However, the event of this timer does not have an accurate value, and the call time of different mobile phones is also different. We can only roughly estimate its time to achieve it...
• It is easy to be blocked, and the app can easily block jumps initiated by url schema. For example, some blocking phenomena can often be seen in WeChat...

The above is the detailed content of how H5 realizes the arousal APP. For more information about how H5 realizes the arousal APP, please pay attention to my other related articles!