JS implementiert das Klicken auf die Webseite, um zu bestimmen, ob die App installiert und geöffnet werden soll, andernfalls springt man zum App Store

Es gibt häufig Situationen, in denen die von uns entwickelte APP beworben werden muss, beispielsweise durch ein großes Bannerbild oder einen QR-Code oben auf der Seite. Aber oft fügen wir dem Werbebild direkt einen Download-Link (aus dem App Store) hinzu. Lassen Sie uns also die Schritte des Benutzers simulieren:

1. Der Benutzer besucht die Aktionsseite zum ersten Mal

a. Klicken Sie auf das Banner und rufen Sie die entsprechende APP-Download-Seite im APP Store auf

b. Auf der APP-Downloadseite wird Folgendes angezeigt: „Installieren“. Der Benutzer klickt, um zu installieren

d. Der Benutzer nutzt die APP ganz normal

2. Der Benutzer besucht die Aktionsseite zum zweiten Mal.

a Store

Die Eingabeaufforderung auf der APP-Download-Seite: Öffnen; der Benutzer klickt direkt, um die APP zu öffnen

3 Zum dritten, vierten, ..., N-ten Mal sind die Bedienschritte die gleichen wie bei 2

Es ist ersichtlich, dass die Erfahrung sehr schlecht ist, unabhängig davon, ob auf das Banner geklickt oder der QR-Code gescannt wird für Benutzer, die die APP installiert haben.

Eine bessere Erfahrung ist: Nach dem Klicken auf das Banner (oder dem Scannen des QR-Codes) stellt das Programm fest, ob die App auf dem aktuellen System installiert wurde. Wenn nicht, springt es automatisch zum App Store-Download Andernfalls öffnen Sie die App direkt.

Um ein großes Banner für eine APP hinzuzufügen, müssen Sie nur ein e8e496c15ba93d81f6ea4fe5f55a2244-Tag hinzufügen. Das Format ist wie folgt:

<meta name=&#39;apple-itunes-app&#39; content=&#39;app-id=你的APP-ID&#39;>

Um beispielsweise ein Native APP-Banner von Baidu Tieba hinzuzufügen, verwenden Sie den folgenden Code:

<meta name=&#39;apple-itunes-app&#39; content=&#39;app-id=477927812&#39;>

Ob der Link direkt nach dem Klicken geöffnet werden kann, können Sie mit dem folgenden Code erreichen. Voraussetzung: Sie müssen das Öffnungsprotokoll kennen, das Ihrer APP entspricht, z. B. Tieba APP. Das Protokoll lautet: com.baidu.tieba://, WeChat: weixin:// usw. . .

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

Wenn Sie es als QR-Code gestalten, können Sie natürlich den folgenden Code verwenden:

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

Welches Sie verwenden, hängt von Ihrem tatsächlichen Szenario ab!

Wenn wir im Internet surfen, sehen Sie unter der Webseite ein Eingabeaufforderungsfeld „App öffnen“ oder „APP herunterladen“. Wenn Ihr Telefon diese APP bereits installiert hat, wird auf der Webseite angezeigt: „ Öffnen Sie die APP. Wenn diese nicht installiert ist, wird die Meldung „App herunterladen“ angezeigt. Wie wird dies technisch umgesetzt? Lassen Sie mich diese Technologie mit Ihnen teilen. Als das Unternehmen letztes Jahr an einem Projekt für das Internationale Cartoon- und Animationsfestival arbeitete, erwähnte der Kunde diese Anforderung. Öffnen Sie die APP direkt, wenn Sie auf die Webseite klicken ). > Sie müssen dabei auf zwei Punkte achten:

1. Sie können das Schemaprotokoll überprüfen

2. Wenn Sie WeChat verwenden, wenn Sie Android verwenden. Beim Scannen oder Verwenden der QR-Code-Scanfunktion des QQ-Browsers

if(navigator.userAgent.match(/android/i)) {
// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
// 否则打开a标签的href链接
var isInstalled;
//下面是安卓端APP接口调用的地址，自己根据情况去修改
var ifrSrc = 'cartooncomicsshowtwo://platformapi/startApp? type=0&id=${com.id}&phone_num=${com.phone_num}';
var ifr = document.createElement('iframe');
ifr.src = ifrSrc;
ifr.style.display = 'none';
ifr.onload = function() {
// alert('Is installed.');
isInstalled = true;
alert(isInstalled);
document.getElementById('openApp0').click();};
ifr.onerror = function() {
// alert('May be not installed.');
isInstalled = false;
alert(isInstalled);
}
document.body.appendChild(ifr);
setTimeout(function() {
document.body.removeChild(ifr);
},1000);
}
//ios判断
if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
//Animation://com.yz.animation
var isInstalled;
//var gz = '{"comName":"${com.short_name}","comID":"${com.id}","comPhoneNum":"${com.phone_num}","type":"0"}';
//var jsongz =JSON.parse(gz);
//下面是IOS调用的地址，自己根据情况去修改
var ifrSrc = 'Animation://?comName=${com.short_name}&comID=${com.id}&comPhoneNum=${com.phone_num}&type=0';var ifr = document.createElement('iframe');
ifr.src = ifrSrc;
ifr.style.display = 'none';
ifr.onload = function() {
// alert('Is installed.');
isInstalled = true;
alert(isInstalled);
document.getElementById('openApp1').click();};
ifr.onerror = function() {
// alert('May be not installed.');
isInstalled = false;
alert(isInstalled);
}
document.body.appendChild(ifr);
setTimeout(function() {
document.body.removeChild(ifr);
},1000);
}
}

Das Problem bei der Verwendung des oben genannten Protokolls besteht darin, dass es auf der aufgeführt sein muss Tencent App Market mit APK