JS start to open app_ Browser Click to open wechat

Time:2020-10-25

demand

In the project, you need to open the app in the web page. If the mobile phone does not have an app installed, you need to jump to the download custom app page. This kind of demand can be realized in many “other people’s home” websites. Of course, our developers have requirements and have to toss around.

analysis

First of all, it is necessary to judge whether the app is opened on the mobile phone, and the PC will directly jump to the download page.
Calling to open an app is actually equivalent to jumping to an app link, but JS cannot judge whether it can jump to open. Since there is no direct way to judge, you can judge whether the monitoring browser is hidden after triggering for a period of time. If it is hidden, it means that the activated app has been opened. If the hidden event has not entered the set time, it means that the mobile phone has not installed this app, then it will jump to the download app page.

realization

The new H5 event suspended by the listening browser is: visibility change
The code is as follows:

//Set to jump to the download page without opening the app for 3 seconds
var COUNT = 3;
//Timer
var TIMER;

$('button').click(function(){
    bindEvent()
    //Open wechat
    window.location = 'weixin://';
    TIMER = setTimeout(function(){
        //Jump to download page after timeout
        window.location.href = 'download.html';
    },COUNT*1000);
});

//Bind pending listening
function bindEvent() {
    var hidden, visibilityChange;
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
    }
    $(document).bind(visibilityChange, function () {
        if(document[hidden]) {
            //Monitor the clearing time when the browser is suspended (i.e. calling the app)
            clearTimeout(TIMER);
        }
    });
}

summary

If considering the user experience or optimization, it is also necessary to judge whether the mobile terminal is in the mobile terminal, display the loading status before the call, count down the countdown, unbound after opening, listen to the suspended function, etc. There is a better way, boss, please advise me more.

Recommended Today

What black technology does the real-time big data platform use behind the glory of the king?

Hello everyone, I’m Xu Zhenwen. Today’s topic is “Tencent game big data service application practice based on Flink + servicemesh”, which is mainly divided into the following four parts: Introduction to background and Solution Framework Real time big data computing onedata Data interface service onefun Microservice & servicemesh 1、 Introduction to the solution framework and […]