移动应用开发的方式，目前主要有三种：
Native App： 本地应用程序（原生App）
Native App开发即我们所称的传统APP开发模式（原生APP开发模式），该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发，该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。
适用企业：游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用。
Web App：网页应用程序（移动web）
Web App开发即是一种框架型APP开发模式（HTML5 APP 框架开发模式），该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。
适用企业：电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。
Hybrid App：混合应用程序（混合App）
Hybrid App主要以JS+Native两者相互调用为主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发。Hybrid App兼具了Native App良好用户体验的优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。
目前已经有众多Hybrid App开发成功应用，比如美团、爱奇艺、微信等知名移动应用，都是采用Hybrid App开发模式。
一、原生App和WebApp的区别
1、开发方面
原生App：每一种移动操作系统都需要独立的开发项目，iphone版本、Ipad版本、安卓版本。每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)等等
需要使用各自的软件开发包，开发工具以及各自的控件。开发成本高、开发速度慢、维护成本高。三个平台（IOS、安卓、windows）的规则、推广、运营都不相同。
官方应用商店对APP上线审核流程比较复杂而且很慢，会严重影响APP的发布上线。
Web App：因为运行在移动设备的浏览器上，所以只需要一个开发项目。可以通过HTML、 CSS或者JavaScript来进行Web APP的开发。开发成本低、开发速度快。
2、功能方面
原生App：原生APP是一个系统性的应用程序，可以类比于电脑上的软件。原生app可以调用移动终端的硬件设备， 比如：麦克风、摄像头、短信、GPS、蓝牙、重力感应等。实现功能丰富
Web App：Web APP可以类比于电脑上的网页。Web APP更多是页面展示类的APP。只能使用有限的移动硬件设备功能。更多用于页面展示，侧重于简单的交互，无法使用很多硬件设备独特的功能。
3、获取方法
原生App：需要通过应用商店将原生app下载到手机上或移动终端上，以独立的应用程序运行(并不需要浏览器)；
用户必须手动去下载并安装这些原生App，原生应用可以节约宽带成本，可以访问本地资源、缓存。
Web App：从移动设备上的浏览器访问，不需要安装客户端；
软件更新只需要更新服务器就够了，用户层面不需要做任何操作；
由于商品或卖场很少提供移动Web App，所以不容易搜索到。
4、版本控制
原生App：用户可以自由地选择是否更新软件版本，所以会出现不同用户同时使用不同版本的情况。同时也会导致维护成本比较高。使用旧版本的用户无法体验新版本的完整功能。
Web App：所有的用户都是用同样的版本，所有用户获得的功能都是相同的。版本更新比较方便，直接在服务器侧更新数据即可。一个功能做好了就能上线，一天更新几十次都毫无压力。如果客户端只是个浏览器，那一切都会变得很简单。另外web统一性高，跨平台适用时开发量少。由于其入口不明显（浏览器导航或者随意点击链接进入），让用户记住的门槛也随之拔高，每次推广导入的流量都可能沦为一次性努力，用户留存率低。
5、加载速度
原生App：原生APP由“云服务器数据+APP应用客户端”两部分构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。访问的时候，不需要重新下载加载应用页面框架，只需要加载数据即可。所以加载速度更快，页面响应更快。
Web App：而Web APP打开一个页面，都需重新加载页面的所有元素，访问速度受手机终端性能和网络环境的限制，导致加载速度慢，而且操作频繁容易卡死。
二、原生App和WebApp的优劣势
1、原生App
优势：
（1）运行速度比较快
（2）能使用设备的底层功能，如摄像头、方向传感器、重力传感器、拨号、GPS、语音、短信、蓝牙等
（3）在界面设计、功能模块、操作逻辑等层面相较web更易做到App的便捷性和舒适性，功能更加强大
（4）官方卖场的应用审核流程会保证让用户得到高质量以及安全的App
（5）官方会发布很多开发工具或者人工支持来帮助你的开发
（6）节省流量
劣势：
（1）不同的操作系统（如Android和iOS）需要独立的进行开发，使用其各自的开发包、开发工具和控件，维护成本高
（2）每次有更新，都需要重新打包一次发布到应用平台上，且每次要向各个应用商店进行提交审核。官方卖场审核流程复杂且慢，会严重影响你的发布进程 ；之后用户需要手动进行点击更新安装（安装成本较高）；
（3）开发成本比较高，尤其需要适配各种机型时（如Android应用，需要适配各种Android手机）
2、Web App
优势：
（1）由于是运行在浏览器上，所以只需要开发一次便可以在不同的操作系统上显示；
（2）迭代版本时，不需要打包便可以发布（实时更新、快速迭代），与云端实现实时数据交互；
（3）开发成本相对较低，对浏览器的适配较简单，且发布门槛相对较低
（4）任何时候都可以发布App，不需要官方卖场的审核。
劣势：
（1）每次打开页面，都得重新加载，获取数据。
（2）过于依赖网络，速度无法保证。特别在弱网环境下，不仅耗费流量而且加载缓慢，就算是WiFi情况下也不容乐观；
（3）要同时支持多种移动设备的浏览器让开发维护的成本也不低；
（4）只能使用有限的设备底层功能（无法使用摄像头、方向传感器、重力传感器、拨号、GPS、语音、短信、蓝牙等功能）
（5）仍处于发展阶段，部分功能无法在基于现有技术的浏览器基础上实现，且无法全面的显示最完美的用户体验，只能用现有技术去弥去找最佳解决方案。
（6）对于用户来说，这种App很难被用户发现
三、APP原生和H5页面如何分辨
1、看断网的情况
把手机的网络断开，然后点击页面。如果可以正常显示内容的则是原生页面；
显示404或错误的则是H5页面。
H5页面
2、看布局边界
开发者选项->显示布局边界，页面元素很多的情况下布局是一整块的是h5的，布局密密麻麻的是原生控件。页面有布局的是原生的，否则为h5页面。iOS在真机上没有这个选项。一般开发人员可以用mac上的Reveal软件来查看APP的布局，或者用网络抓包来分析是否为H5页面。（仅针对安卓手机试用）如下图所示：
左为原生页面，右为H5页面
3、新打开页面
如果页面是个空页面，基本就是H5页面。原生的页面一般都会有一些控件提前放在页面中。如果空页面上拉还有大块黑色的背景，就是H5页面，不过现在很多开发人员已经做了优化，不会显示黑色的大色斑。
4、看复制文章的提示，需要你通过对比才能得出结果。
比如是文章资讯页面可以长按页面试试，弹出一个系统默认的快捷菜单：拷贝、查询、添加、分享。这个页面就是H5页面，否则是native原生的页面。
有些原生APP开放了复制粘贴功能或者关闭了。而H5的css屏蔽了复制选择功能等等情况。需要通过对目标测试APP进行对比才可知。
这个在支付宝APP、蚂蚁聚宝都是可以判断的。
5、看加载的方式
如果在打开新页面导航栏下面有一条加载的线的话，这个页面就是H5页面，如果没有就是原生的。 微信里面打开我们的H5页面常见的有个绿色的 加载线条。如下图红框里面所示：
H5页面
6、看app顶部 导航栏是否会有关闭的操作
如果APP顶部导航栏当中出现了关闭按钮或者有关闭的图标，那么当前的页面肯定的H5，原生的不会出现（除非设计开发者故意弄的）。
美团的、大众点评的APp、微信APP当加载h5过多的时候，左上角会出现关闭2字。
H5页面
7、判断页面下拉刷新的时候（前提是要有下拉刷新的功能）
下拉刷新的时候H5会有一个明显的刷新现象，比如闪现、导航栏标题消失等。原生的下拉刷新没有明显现象，很平滑。
比如淘宝的众筹页面。
8、下拉页面的时候显示网址提供方的一定是H5
H5
9、页面的底部导航，在上拉的时候，如果跟着一起滚动，就是H5页面。
10、H5页面点击输入框，弹出的键盘上面一般都有“完成”按钮，原生的没有。
四、APP原生和H5什么时候使用
在你准备做移动App时，你应该先问问自己以下几个问题：
1. 你的应用是否需要使用某些设备的特殊功能，比如摄像头，摄像头闪光灯或者重力加速器
2. 你的开发预算是多少？
3. 你的应用是否一定需要网络？
4. 你的应用的目标硬件设备是所有的移动设备还是仅仅只是一部分而已？
5. 你自己已经熟悉的开发语言？
6. 这个应用对于性能要求是否苛刻？
7. 如何靠这个应用赢利？
小结：
1、原生App偏向于交互，注重用户体验（导航切换、勾选选项、图片、视频等操作），Web APP偏向与浏览和简单的交互。
2、核心需求 要用原生，比如淘宝里的产品详情页、订单页、支付页等。一些功能需要访问硬件（摄像头、传感器等），也要使用原生App。
非核心需求 可以考虑用H5，遇到功能调整，可以快速发布。比如淘宝首页的特色好货、热门市场等栏目 需要经常变动，用H5来做比较灵活。
3、阶段性的营销活动页面，特别是功能、布局等经常需要修改的需求，可以用H5来做。比如节日的有奖活动页面，经常需要调整，用H5做会更灵活。
参考目录：
1.侯二飞,再次对比：原生APP和Web APP的区别,搜外问答
2.小圣,Hybrid App中原生页面 VS H5页面 ,简书
3.大河,APP中的 H5和原生页面如何分辨、何时使用,博客园
4.慕村225694,原生app和web app的区别,猿问
5.25学堂,教你判断一个APP页面是原生的还是H5页面,25学堂
说明：文中图片来自网络。
网友评论