Try to call up the APP instance code in the H5 page

This article mainly shares with you the code for trying to call up the APP example in the H5 page. I hope it can help you.

Common functions on the market

This function should be very common nowadays, such as Taobao H5, Zhihu H5, etc. . .

After clicking, it will launch the APP or open the download page or download directly.

But I found that Zhihu’s function is a little different.

Its logic is to first prompt me whether to open the Zhihu APP on my phone (the browser’s mechanism asks the user for permission to operate), Then the download prompt pops up again.

Solution URL scheme

The URL scheme method is supported on both IOS and Android, and has good compatibility.

The method of using iframe first

The pseudo code is as follows:

const iframe = document.createElement('iframe');iframe.src = 'URL scheme'; // URL scheme的方式跳转iframe.style.display = 'none';document.body.appendChild(iframe);

At this time, if all environments support it, the APP will be awakened .

But this is an ideal situation, more is to do the fast logic of compatibility processing.

Some systems will intercept the src of iframe (this is just one of the reasons for failure to wake up the APP), because this src attribute is an illegal hacker, and many vulnerabilities are caused by exploiting it.

So at this time it is necessary to determine the failure of adjusting the APP.

The pseudo code is as follows:

const timer = 1000;setTimeout(function() {        // 执行成功后移除iframedocument.body.removeChild(iframe);//setTimeout小于2000通常认为是唤起APP失败 if (Date.now() - last 

Understanding:

• If the evocation is successful, the H5 page will is switched to the background, the timer will be delayed. Even if the user switches from the app to the H5 page, the time difference must be greater than 2S.

• If the arousal fails, the timer will be executed on time (even if there is a delay of 100ms, it is enough), and it must be less than 2S at this time.

When the iframe is intercepted, we can use window.location.href = URL scheme for compatibility.

Related recommendations:

10 recommended articles about H5 pages

Detailed explanation of the process of making a WeChat H5 page

H5 page precautions

The above is the detailed content of Try to call up the APP instance code in the H5 page. For more information, please follow other related articles on the PHP Chinese website!