http://www.baidufe.com/item/cc592a4b3382eed8ec6e.html
常常有这样的场景，咱们开发出来的Native-APP需要在Web-APP中进行推广，比如在页面顶部来一张大Banner图片，亦或一张二维码。但往往我们都是直接给推广图片加了一个下载链接（App Store中的）。所以咱们来模拟一下用户的操作步骤：
1、用户第一次访问Web-APP
a、点击Banner，进入到APP Store中对应的APP下载页
b、APP下载页中提示：安装；用户点击安装
c、安装完成后，APP下载页中提示：打开；用户继续点击打开
d、用户正常使用APP
2、用户第二次访问Web-APP
a、点击Banner，进入到APP Store中对应的APP下载页
b、APP下载页中提示：打开；用户直接点击打开
c、用户正常使用APP
3、用户第三次、第四次、...、第N次访问Web-APP，操作步骤同2
能看出来，不管是点击Banner还是扫描二维码的方式，对于已经安装过Native APP的用户来说，这个体验都是非常糟糕的。
更优的体验是：点击Banner（或扫描二维码）后，程序判断当前系统是否已安装Native App，如果未安装，则自动跳转到App Store下载页；否则直接打开Native App。
在iOS上，要增加一个APP的大Banner，其实只需要在<head>标签内增加一个<meta>标签即可，格式如：
<meta name='apple-itunes-app' content='app-id=你的APP-ID'>
比如加一个百度贴吧的Native APP大Banner，用下面这串儿代码：
<meta name='apple-itunes-app' content='app-id=477927812'>
而对于点击链接后，能否直接打开，可以通过下面的代码来实现。前提条件：你得知道你的APP对应的打开协议，如贴吧APP，协议为：com.baidu.tieba:// ，微信的：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链接
var ifr = 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>
当然，如果你是设计成一张二维码，可以用下面这段代码：
<!-- 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链接
var ifr = 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();
要使用哪一种，就取决与你的实际场景了！
分享到：
相关推荐
关于WebApp和NativeApp之争总是不绝于耳，本文作者则认为HTML5的WebApp和NativeApp谁都不会干死谁，它们将和平共处，各自发挥各自的强项，让整个互联网更美好。一直以来，关于WebApp和NativeApp之争总是不绝于耳，...
WebApp和NativeApp谁将是未来.本文详细分析了WebApp和NativeApp的优势和劣势，指出Web只是我们作为设计者和开发者所期待的一种理想化结果，是一种趋势，将会是一个相当久的过渡阶段，对复杂产品来说，NativeApp+...
原生应用程序(Native App)通常是指为特定平台（如iOS或Android）专门设计的应用程序，它们可以直接访问设备的所有功能，如摄像头、GPS等，并且通常提供更流畅的用户体验。Web应用程序(Web App)则是基于网络技术...
#### 二、原生App（Native App） **定义** 原生应用是专门为特定的操作系统（如iOS、Android或黑莓OS）开发的应用程序。这些应用能够充分利用设备的各项硬件功能，并提供最佳的用户体验。 **优点** 1. **高性能*...
在标题“Native+WebApp中Phonegap调用Android Activity”中，我们关注的是如何在PhoneGap应用中启动并交互Android的原生Activity。 在Android平台上，Activity是程序的基本单元，用于处理用户交互和展示UI。当...
在介绍React Native之前，我们先了解一下移动应用开发的几种常见模式：WebApp（Web应用）、HybridApp（混合应用）以及NativeApp（原生应用）。WebApp指的是基于Web技术开发的应用，通常通过浏览器访问，不需要安装，...
标题中的“Mobile摄影图片展示手机APP网站”是一个项目或...而源代码和设计资源则隐藏在这个名为“Mobile摄影图片展示手机APP网站_摄影 图片 展示 手机 黑色 webapp app 框架 手机网站 mobileFramework”的文件夹中。
移动WebApp的介绍中，提到了其与NativeApp（原生应用）之间的对比，指出了WebApp在跨设备和跨平台能力上的优势。WebApp能够拥有和NativeApp相似的体验，并且支持离线工作、设备访问能力和云端升级等能力。此外，...
在移动应用开发中，WebApp与原生APP的壳（Native Shell）之间的交互是至关重要的，尤其是在构建混合型应用时。本文将详细解析一个公司内部使用的WebApp与Android壳的接口协议，帮助理解如何在两者之间实现功能的无缝...
从晚上下载的例子，发现不能自动获取设备、服务和特征值，这就导致了程序通用性大大降低，在通过自己的摸索后，将这部分功能调试通过，现在已经是一个通用的webapp调用ble的程序了，功能包括搜索、连接蓝牙，选取...
2. 添加WebView：在布局文件中，添加一个WebView控件，设置其属性，如加载的网页URL、是否启用JavaScript等。 3. 配置WebView：在Activity中，初始化WebView，设置WebViewClient和WebChromeClient，以便处理页面...
在移动应用开发领域，Android与WebApp的混合开发已经成为一种常见的模式，旨在融合原生应用的优势和Web技术的灵活性。这种开发方式允许开发者利用HTML5、CSS3和JavaScript等Web技术构建应用程序，同时通过Android ...
【标题】"Webapp:我的移动端app" 涉及的知识点主要集中在移动应用开发领域，特别是使用Web技术构建跨平台的移动应用。这个标题暗示了我们正在讨论一个基于Web技术（HTML、CSS和JavaScript）的移动端应用程序，可能是...
Webapp指的是基于网页技术构建的应用，而nativeapp则是指原生应用，即直接使用平台原生语言编写的程序。CSS（层叠样式表）是网页设计中用来描述如何显示HTML元素的语言。 文章也提到了React Native中组件化的思想，...
苹果iPhone的WebApp开发是指利用HTML、CSS和JavaScript等网页技术构建可以在iPhone设备上运行的应用程序，无需通过App Store审核，直接通过Safari浏览器访问。本指南将详细讲解这一开发过程，帮助开发者快速掌握...
在Android的Web APP中，AJAX可以让应用在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容，提高了应用的响应速度和用户体验。 5. **Web服务接口**：为了实现Web APP与服务器的数据交互，通常需要设计...