JS は、Web ページをクリックしてアプリをインストールして開くかどうかを決定するか、そうでない場合はアプリ ストアにジャンプするかを実装します。

大きなバナー画像やページ上部の QR コードなど、開発したアプリを宣伝する必要があるシナリオがよくあります。ただし、多くの場合、プロモーション画像に (App Store からの) ダウンロード リンクを直接追加します。それでは、ユーザーの操作手順をシミュレートしてみましょう:

1. ユーザーが初めてプロモーション ページにアクセスします

a. APP Store の対応する APP ダウンロード ページに入ります

b. APP ダウンロード ページに次のメッセージが表示されます。 ; ユーザーはクリックしてインストールします

c. インストールが完了すると、アプリのダウンロード ページが表示されます: ユーザーはクリックして開きます

d. ユーザーはプロモーションにアクセスします。 2 回目のページにアクセスします

a. バナーをクリックして、APP Store の対応する APP ダウンロード ページに移動します

b. ユーザーが直接クリックして開きます

c.通常アプリ

3. ユーザーの 3 回目、4 回目、...、N 回目の訪問では、操作手順は 2 と同じです

バナーをクリックするか QR コードをスキャンするかにかかわらず、エクスペリエンスが変化していることがわかります。すでにアプリをインストールしているユーザーにとっては非常に悪いです。

より良いエクスペリエンスは、バナーをクリックした後 (または QR コードをスキャンした後)、プログラムが現在のシステムにアプリがインストールされているかどうかを判断し、インストールされていない場合は自動的に App Store のダウンロード ページに移動します。アプリを直接開きます。

APP に大きなバナーを追加するには、 タグ内に タグを追加するだけです:

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

たとえば、次のように追加します。 Baidu Tieba ネイティブ APP バナーには、次のコードを使用します。

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

リンクをクリックした後に直接開くことができるかどうかについては、次のコードを使用して実現できます。前提条件: Tieba APP など、APP に対応する開始プロトコルを知っている必要があります。プロトコルは 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();

どちらを使用するかは、実際のシナリオによって異なります。

ウェブを閲覧すると、ウェブページの下に「アプリを開く」または「アプリをダウンロード」というプロンプトボックスが表示されます。携帯電話にこのアプリがすでにインストールされている場合は、ウェブページに「アプリを開く」というプロンプトが表示されます。インストールされていない場合は、「APP をダウンロードする」というメッセージが表示されます。これは技術的な観点からどのように実装されていますか?昨年、同社が国際漫画アニメーションフェスティバルのプロジェクトに取り組んでいたとき、顧客は、Web ページの会社をクリックすると、APP を直接開くという要件について言及しました。 ). インストールされていない場合は、直接 APP ページを開きます

この部分のソース コードを共有しましょう

プロセス中に、全員が 2 つの問題に注意する必要があります:

1.インターフェイス アドレスは正しく記述されている必要があります。このプロトコルを通じて呼び出されるスキーマ プロトコルを確認できます

2. Android を使用する場合、コードをスキャンするために WeChat スキャンまたは QQ ブラウザを使用すると問題が発生します。上記のプロトコル、つまり、Tencent に出品するには APK を使用する必要があるということです アプリマーケットにアクセスします