原生开发、H5开发和混合开发的区别

目前市场上主流的APP分为三种：原生APP、Web APP（即HTML5）和混合APP三种，相对应的定 制开发就是原生开发、H5开发和混合开发。那么这三种开发模式究竟有何不一样呢？下面咱们就分别从这三者各自的优劣势来区分比较吧！
1、原生开发
原生开发（Native App开发），是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发。好比Android是利用Java、Eclipse、Android studio；IOS是利用Objective-C 和Xcode进行开发。
通俗点来说，原生开发就像盖房子同样，先打地基而后浇地梁、房屋结构、一砖一瓦、钢筋水泥、电路走向等，都是通过精心的设计。原生APP也同样：经过代码从每一个页面、每一个功能、每一个效果、每一个逻辑、每一个步骤所有用代码写出来，一层层，一段段全用代码写出来。
优势：
一、可访问手机全部功能（如GPS、摄像头等）、可实现功能最齐全；
二、运行速度快、性能高，绝佳的用户体验；
三、支持大量图形和动画，不卡顿，反应快；
四、兼容性高，每一个代码都通过程序员精心设计，通常不会出现闪退的状况，还能防止病毒和漏洞的出现；
五、比较快捷地使用设备端提供的接口，处理速度上有优点。
缺点：
一、开发时间长，快则3个月左右完成，慢则五个月左右；
二、制做费用高昂，成本较高；
三、可移植性比较差，一款原生的App，Android和IOS都要各自开发，一样的逻辑、界面要写两套；
四、内容限制（App Store限制）；
五、必须等下载完毕用户才能够打开，得到新版本时需从新下载应用更新。
2、Web APP (HTML5）开发
HTML5应用开发，是利用Web技术进行的App开发，能够在手机端浏览器里面打开的网站就称之为webapp。Web技术自己须要浏览器的支持才能进行展现和用户交互，所以主要用到的技术是HTML、CSS、Javascript以及jQuery、Vue、React等JS框架。
优势：
一、支持设备范围广，能够跨平台，编写的代码能够同时在Android、IOS、Windows上运行；
二、开发成本低、周期短；
三、无内容限制；
四、适合展现有大段文字（如新闻、攻略等），且格式比较丰富（如加粗，字体多样）的页面；
五、用户能够直接使用最新版本（自动更新，不需用户手动更新）。
缺点：
一、因为Web技术自己的限制，H5移动应用不能直接访问设备硬件和离线存储，因此在体验和性能上有很大的局限性；
二、对联网要求高，离线不能作任何操做；
三、功能有限；
四、APP反应速度慢，页面切换流畅性较差；
五、图片和动画支持性不高；
六、用户体验感较差；
七、没法调用手机硬件（摄像头、麦克风等）。
3、混合（原生+H5）开发
混合开发（Hybrid App开发），是指在开发一款App产品的时候，为了提升效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来讲，这就是网页的模式，一般由“HTML5云网站+APP应用客户端”两部份构成。
混合开发是一种取长补短的开发模式，原生代码部分利用WebView插件或者其它框架为H5提供容器，程序主要的业务实现、界面展现都是利用与H5相关的Web技术进行实现的。好比京东、淘宝、今日头条等APP都是利用混合开发模式而成的。
优势：
一、开发效率高，节约时间。同一套代码Android和IOS基本上均可使用；
二、更新和部署比较方便，每次升级版本只须要在服务器端升级便可，再也不须要上传到App Store进行审核；
三、代码维护方便、版本更新快，节省产品成本；
四、比web版实现功能多；
五、可离线运行。
缺点：
一、功能/界面没法自定：全部内容都是固定的，不能换界面或增长功能；
二、加载缓慢/网络要求高：混合APP数据须要所有从服务器调取，每一个页面都须要从新下载，所以打开速度慢，网络占用高，缓冲时间长，容易让用户反感；
三、安全性比较低：代码都是之前的老代码，不能很好地兼容最新手机系统，且安全性较低，网络发展这么快，病毒这么多，若是不实时更新，按期检查，容易产生漏洞，形成直接经济损失；
四、既懂原生开发又懂H5开发的高端人才难找。

目前混合开发有两种开发模式：
1、原生主导的开发模式：须要安卓和IOS原生开发人员，整个App既有原生开发的页面，也有H5页面，在须要H5页面时由原生开发工程师实现内嵌，笔者最近正在开发的项目就使用这种开发模式。
2、H5主导的开发模式：只须要H5开发工程师，借助一些封装好的工具实现应用的打包与调用原生设备的功能，如HBuilder的云端打包功能。

如何辨别原生和H5：
以最近正在开发的混合APP项目首页为例：

一、看断网的状况
把手机的网络断掉。而后点开页面。而后能够正常显示的东西就是原生写的。
显示404或者错误页面的是html页面。

二、看布局边界
能够打开 开发者选项中的显示布局边界，页面元素不少的状况下布局是一整块的是h5的，布局密密麻麻的是原生控件。页面有布局的是原生的不然为h5页面。（仅针对安卓手机试用）

三、看复制文章的提示，须要你经过对比才能得出结果。
好比是文章资讯页面能够长按页面试试，若是出现文字选择、粘贴功能的是H5页面，不然是native原生的页面。

有些原生APP开放了复制粘贴功能或者关闭了。而H5的css屏蔽了复制选择功能等等状况。须要经过对目标测试APP进行对比才可知。
四、看加载的方式
若是在打开新页面导航栏下面有一条加载的线的话，这个页面就是H5页面，若是没有就是原生的。 微信里面打开咱们的H5页面常见的有个绿色的加载线条。

五、看app顶部 导航栏是否会有关闭的操做
若是APP顶部导航栏当中出现了关闭按钮或者有关闭的图标，那么当前的页面确定的H5，原生的不会出现（除非设计开发者故意弄的）

美团的、大众点评的APP、微信APP当加载h5过多的时候，左上角会出现关闭二字。
六、判断页面 下拉刷新的时候（前提是要有下拉刷新的功能）
若是界面没有明显刷新现象的是原生的，若是有明显刷新现象（好比闪一下）的是H5页面（ios和android）。
好比淘宝的众筹页面。
七、下拉页面的时候显示网址提供方的必定是H5。