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壳的接口协议，帮助理解如何在两者之间实现功能的无缝...
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中组件化的思想，...
从晚上下载的例子，发现不能自动获取设备、服务和特征值，这就导致了程序通用性大大降低，在通过自己的摸索后，将这部分功能调试通过，现在已经是一个通用的webapp调用ble的程序了，功能包括搜索、连接蓝牙，选取...
苹果iPhone的WebApp开发是指利用HTML、CSS和JavaScript等网页技术构建可以在iPhone设备上运行的应用程序，无需通过App Store审核，直接通过Safari浏览器访问。本指南将详细讲解这一开发过程，帮助开发者快速掌握...
版本控制： 集成应用 适用于和React JS和React Native App。 内容 贡献 您可以通过以下方式做出贡献： 如果您想了解更多有关Integreat的信息或想加入...如果您在这些子项目中进行更改，请确保在相应的package.json中