H5和原生APP之间的区别

 

原文：http://www.ui.cn/detail/247751.html

最近项目中因各种客观因素，移动端都是默认用的纯H5 APP，感受最深的就是各种坑啊，好大的坑啊。产品上线后，带着各种坑后的总结原因方发现很多人都说纯H5 APP一次编写就能支持android和IOS两种不同的APP，大大降低了开发成本。可实际的工作中却发现并不是如此，既不省事儿，又有很多BUG，而且各种css的兼容性的问题一大堆，更不要说动画点不到这些问题啦，真是一个坑比一个坑深啊。即使如此，虽然还是有很多问题没有很好的解决，为什么还是有很多H5汇合APP开发的人呢。这里要提到一个刚刚当了奶爸不久的扎克伯格——小扎同学。

早在2010年的时候，那个时候HTML5刚刚兴起不久，乔布斯就说HTML5将会成为取代Flash的下一个技术浪潮，从那个时候开始，很多大公司和有想法的创业公司都在试水并尝试不断的推动HTML5的发展。这里面就以Facebook的创始人最为炙热。他提出一定要尽可能的利用HTML5和Web App来打破iOS和Android的垄断，Facebook在信息浪潮的年代竟然用长达2年的时间潜心研发HTML5，投注大量的精力和物力。最终因HTML5自身技术问题导致经常出现bug，那对Facebook来说影响是不可估量的，因此差点引发被雅虎收购的命运。好在到2012年因为公司对市场上所有JS MVC框架都不满意以后，再加上借着重构Instagram网站的机会，才决定自己写一套，这个时候才从HTML5转向原生应用。

那说到H5和原生APP的差异，那什么是原生APP，什么是web APP？看到一个前辈解释的特别好，在这里和大家分享。

Web App即是一种框架型APP开发模式(HTML5 APP 框架开发模式)，该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。

原生APP又称Native App，该开发针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发，该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

那除了定义中提到两者的构成部分和读取数据的不同以外，还有哪些方面有区别呢？偶从以下几个方面简单阐述一下：

1、开发方面的区别（这个地方太专业啦，请教了团队的开发小伙伴）

目前React Native开发越来越火，微信小程序是基于React Native开发的，体验接近原生APP，发展前景值得重视。不过好在现在非原生APP同样可以调用蓝牙、相机等硬件，也能顺利发布到苹果APP store。

移动Web App

　　1、因为运行在移动设备的浏览器上，所以只需要一个开发项目

　　2、这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Ruby on Rails,Python)

　　3、这里可没有标准的SDK，基本任意选择别忘了有一些跨平台的开发工具，比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。

原生App

　　1、每一种移动操作系统都需要独立的开发项目

　　2、每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows phone)等等

　　3、需要使用各自的软件开发包，开发工具以及各自的控件

2、能力方面的区别

移动Web App

　　只能使用有限的移动硬件设备功能。

原生App

　　能够与移动硬件设备的底层功能，比如个人信息，摄像头以及重力加速器等等。对于这一点感触很深刻，2016年做新年H5营销小活动的时候，就是因为没有考虑到H5不能使用移动硬件端重力加速器而导致临时替换设计方案。

3、获取方法的区别

　　移动Web App

　　1、从移动设备上的浏览器访问

　　2、不需要安装额外的软件

　　3、软件更新只需要服务器就够了

　　4、因为现在没有什么商品或卖场提供这种App，不过一般都是嵌套在系统内部，或者内部系             统中使用

　   5、跨平台开发，用户不需要去卖场来下载安装App

      6、需要过度依赖网络，没有任何缓存数据

      7、任何时候都可以发布App，因为根本不需要官方卖场的审核

　　8、如果你已经有了一个Web App，你可以使用 responsive web design来辅助改进(这也是优势?)

      9、所有的用户都是用同样的版本

　　原生App

　　1、直接下载到设备

　　2、以独立的应用程序运行(并不需要浏览器)

　　3、用户必须手动去下载并安装这些原生App

　　4、有一些商店与卖场来帮助用户寻找你的App，app store里面应有尽有。

　　5、原生型APP应用的安装包相对较大，包含UI元素、数据内容、逻辑框架;

　　6、手机用户无法上网也可访问APP应用中以前下载的数据。

　　7、原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

　　8、APP应用更新新功能，涉及到每次要向各个应用商店进行提交审核。

      9、用户可以自由地选择是否更新软件版本，所以会出现不同用户同时使用不同版本的情况

　关于两者的交互方式不同的地方，回头令起篇幅再述……

即使两者之间有很大的区别，即使H5有一大堆的坑和问题，但是仍旧不妨碍移动WEB无所不在，移动web是目前唯一的支持各种设备访问的平台，也是唯一一个可供开发者发布移动应用的平台，它将各种移动交互与PC系统任务有效的结合在一起。而原生native app可以充分利用设备的特性，这一点是它得天独厚的优势。所以，对于一个对于决策者来说，如果你是要做一款体验更好的产品的话，那Native App不妨是最佳的选择。当然如果你想尽快让你的产品占住一席之地的话，力求快速开发、低成本、多平台等等的话，那技术还有很多问题都没有很好解决的H5，也是不错的选择。正式因为它有复杂多变的CSS样式消耗了大量性能，它才有一个更有竞争力的优势——它带来了多样性的排版，能够细致到每一个字宽行高和风格的像素级处理，能够给你带来不一样的图文汇合的排版。我想这些更是H5的优异之处吧。