JS calls the local app

Often there are scenarios where the native-app we develop need to be promoted in Web-app, such as a large banner image at the top of the page, or a QR code. But often we are directly to promote the image plus a download link (in the APP store). So let's simulate how the user steps:

1, the first time users visit Web-app

A, click Banner, go to the App Store in the corresponding app download page

b, the app download page prompts: Install; user Click Install

C, after the installation is complete, the app download page prompts: Open; user continues to click Open

D, the user normal use of the app

2, the user second visit web-app

A, click Banner, go to the App Store in the corresponding app download page

b, the app download page prompt: Open, user directly click Open

c, the user normal use of the app

3, the user third, the fourth time 、...、 nth visit Web-app, the operation steps with 2

Can be seen, whether it is click Banner or scan QR code, for users who have installed the native app, this experience is very bad.

Better experience is: Click Banner (or scan the QR code), the program to determine whether the current system is installed native app, if not installed, then automatically jump to the App Store download page, or directly open the native app.

On iOS, to add an app to the big banner, in fact, only need to add a <meta> tag within the

<meta name= ' Apple-itunes-app ' content= ' app-id= your App-id ' >

For example, add a Baidu bar native app Big banner, with the following string of code:

<metaname=‘apple-itunes-app‘content=‘app-id=477927812‘>

And for the click Link, can open directly, the following code to achieve. Prerequisites: You need to know your app to open the protocol, such as Paste app, the agreement is: com.baidu.tieba://, the: weixin://, and so on ...

<!-- a标签的链接，设置为对应的下载链接；点击打开的动作，在click事件中注册 --><a href="https://itunes.apple.com/cn/app/id477927812"id="openApp">贴吧客户端</a><script type="text/javascript">    document.getElementById(‘openApp‘).onclick = function(e){        // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为        // 否则打开a标签的href链接        varifr = document.createElement(‘iframe‘);        ifr.src = ‘com.baidu.tieba://‘;        ifr.style.display = ‘none‘;        document.body.appendChild(ifr);        window.setTimeout(function(){            document.body.removeChild(ifr);        },3000)    };</script>

Of course, if you are designing a two-dimensional code, you can use the following code:

<!-- a标签的链接，设置为对应的下载链接；点击打开的动作，在click事件中注册 --><a href="https://itunes.apple.com/cn/app/id477927812"id="openApp"style="display: none">贴吧客户端</a><script type="text/javascript">    document.getElementById(‘openApp‘).onclick = function(e){        // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为        // 否则打开a标签的href链接        varifr = document.createElement(‘iframe‘);        ifr.src = ‘com.baidu.tieba://‘;        ifr.style.display = ‘none‘;        document.body.appendChild(ifr);        window.setTimeout(function(){            document.body.removeChild(ifr);        },3000)    };    document.getElementById(‘openApp‘).click();

Which one to use depends on your actual scene!