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之争总是不绝于耳，...
NativeApp开发与webapp开发.pdf
目前主流应用程序大体分为三类：WebApp、HybridApp、NativeApp。首先，我们来看看什么是WebApp、HybridApp、NativeApp。WebApp指采用Html5语言写出的App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的...
WebApp和NativeApp谁将是未来.本文详细分析了WebApp和NativeApp的优势和劣势，指出Web只是我们作为设计者和开发者所期待的一种理想化结果，是一种趋势，将会是一个相当久的过渡阶段，对复杂产品来说，NativeApp+...
移动应用开发的三种方式比较 移动应用开发的方式，目前主要有三种： Native App： 本地应用程序（原生App） Web App：网页应用程序（移动web） Hybrid App：混合应用程序（混合App）
NULL 博文链接：https://topmanopensource.iteye.com/blog/1577717
从晚上下载的例子，发现不能自动获取设备、服务和特征值，这就导致了程序通用性大大降低，在通过自己的摸索后，将这部分功能调试通过，现在已经是一个通用的webapp调用ble的程序了，功能包括搜索、连接蓝牙，选取...
版本控制： 集成应用 适用于和React JS和React Native App。 内容 贡献 您可以通过以下方式做出贡献： 如果您想了解更多有关Integreat的信息或想加入...如果您在这些子项目中进行更改，请确保在相应的package.json中
REACT-NATIVE案例，模仿ireading阅读模式，已经写好的支持android和ios双系统app，解压后打开文件，npm install安装，然后react-native run-android/ios即可
HTML5技术的强势发展，为互联网带来的最大...app的研发产品领域圈地设岗，并试图建立以自己为中心的”云“服务平台，企图在webapp时代到来的时候充当霸主。本文将围绕webapp的设计，与大家讨论几点设计技巧。Webapp是一
结合webapp和native app总结出一条折中道路-混合开发app，将web和native结合。讲解技术实现和经验分享。
要求[确保在安装@ angular / cli时未在任何位置运行ng命令] Nodejs 角度CLI npm install -g @ angular / cli 初始化应用 ng新ng刷新器 安装nodejs npm install -g nativescript安装Android Studio安装jdk（至少8...
正如F8大会的主题“Bringmodernwebtechtomobile”，巨头们已经着手从上自下展开技术融合，WebApp开发者们与NativeApp开发者们长年相互鄙视斗争的过程将要告一段落。WebApp开发者们实在是受够了HTML5应用的诸多基础...
NativeApp是用原生语言开发，用户需要下载安装的手机应用。 NativeApp的开发成本很高，每个平台的开发语言都不一样， 比如IOS的开发语言是object C ， Android系统的APP需要用Java开发， WindowsPhone 则需要用 C# ...
在webapp和Native app之间，有一条无法逾越的鸿沟：体验和性能的差距。轻应用是webapp的延伸，同样存在此问题。为弥补这条鸿沟，我们要有一套方案，能让开发者使用web API，做出体验和性能与原生应用差距不大的应用...
原生应用（nativeapplication，简称nativeApp）Web应用（webapplication，简称WebApp）混合应用（hybridapplication，简称hybridApp）这三类App的技术模型都不一样，各有优缺点。企业一般会选择其中一种作为主要技术...
WebApp是否在将来能取代NativeApp？这一直是移动互联网从业者讨论的话题，本文将从架构的角度来进行分析。 还记得C/S和B/S吗 类似的技术趋势之争实际上已经有很多了，我们不妨花点时间回顾一下十年前的C/S和B/S之争...