JS는 웹페이지를 클릭하여 앱을 설치할지 여부를 결정하고 열지 않으면 앱 스토어로 이동하도록 구현합니다.

페이지 상단에 대형 배너 사진이나 QR 코드 등 우리가 개발한 앱을 홍보해야 하는 시나리오가 종종 있습니다. 그러나 종종 우리는 홍보 이미지에 (App Store로부터의) 다운로드 링크를 직접 추가합니다. 그럼 사용자의 단계를 시뮬레이션해 보겠습니다.

1. 사용자가 처음으로 프로모션 페이지를 방문합니다.

a. 배너를 클릭하고 앱 스토어에서 해당 앱 다운로드 페이지로 들어갑니다

b. 앱 다운로드 페이지에 다음 메시지가 표시됩니다. 사용자가 설치를 클릭합니다.

c. 설치가 완료된 후 앱 다운로드 페이지에 다음 메시지가 표시됩니다. 사용자가 계속 클릭하여 엽니다.

d. 사용자가 정상적으로 APP을 사용하는 경우

2. 사용자가 두 번째로 프로모션 페이지를 방문합니다.

배너를 클릭하여 APP에서 해당 APP 다운로드 페이지로 들어갑니다. 스토어

b. 앱 다운로드 페이지의 프롬프트: 사용자가 직접 클릭하여 엽니다.

사용자가 앱을 정상적으로 사용합니다

3. 세 번째, 네 번째,..., N번째 작업 단계는 2번과 동일합니다

배너를 클릭하거나 QR 코드를 스캔하면 경험이 매우 좋지 않음을 알 수 있습니다. APP을 설치한 사용자를 대상으로 합니다.

더 나은 경험은 배너를 클릭(또는 QR 코드 스캔)한 후 프로그램이 현재 시스템에 앱이 설치되어 있는지 확인하고 그렇지 않은 경우 자동으로 App Store 다운로드로 이동한다는 것입니다. 페이지가 아니면 앱을 직접 엽니다.

iOS에서는 APP용 대형 배너를 추가하려면 93f0f5c25f18dab9d176bd4f6de5d30e 태그 내에 e8e496c15ba93d81f6ea4fe5f55a2244 태그만 추가하면 됩니다.

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

예를 들어 Baidu Tieba의 기본 앱 배너를 추가하려면 다음 코드를 사용하세요.

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

링크를 클릭한 후 바로 열릴 수 있는지 여부는 다음 코드를 사용하여 달성할 수 있습니다. 전제 조건: Tieba 앱과 같은 앱에 해당하는 개방 프로토콜을 알아야 합니다. 프로토콜은 com.baidu.tieba://, WeChat: weixin:// 등입니다. . .

<!-- 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>

물론 QR코드로 디자인하실 경우에는 아래와 같은 코드를 사용하시면 됩니다.

<!-- 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();

어떤 것을 사용할지는 실제 시나리오에 따라 다릅니다!

웹을 탐색할 때 웹 페이지 "앱 열기" 또는 "앱 다운로드" 아래에 프롬프트 상자가 떠 있는 것을 볼 수 있습니다. 휴대폰에 이미 이 앱이 설치되어 있으면 웹 페이지에 " Open APP". 설치되지 않은 경우 "Download APP" 메시지가 표시됩니다. 이는 기술적인 관점에서 어떻게 구현됩니까? 이 기술을 작년에 회사에서 국제 만화 및 애니메이션 페스티벌 프로젝트를 진행했을 때 고객이 웹 페이지를 클릭하면 바로 APP를 열 수 있다고 언급했습니다(이미 설치되어 있는 경우). ) 설치되어 있지 않다면 바로 APP페이지를 열어주세요

이 작품의 소스코드를 공유해드리겠습니다

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);
}
}

이 때 주의할 점이 있습니다.

1. 인터페이스 주소를 올바르게 작성해야 합니다. 이 프로토콜을 통해 호출됩니다. 🎜>

2. 안드로이드 사용시 위챗을 사용하는 경우 QQ브라우저의 QR코드 스캔 기능을 스캔하거나 사용할 경우

위 프로토콜을 사용할 때의 문제점은 반드시 위챗에 기재되어 있어야 한다는 점입니다. APK를 사용하는 Tencent App Market