移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处

因为工作需要，需要进一步了解移动端的开发，遂返回复习移动端的知识点，在开始学习之前，产生了疑惑WEB APP 、Native APP 、Hybrid APP、React Native、Uniapp、H5这些东西到底是什么？感觉是那么熟悉，单词拆分开每一个都认识，但是合在一起就完全不知道什么意思了，遂自行百度查询，自己解自己的惑吧。

个人博客，理解不具权威性。

一.WEB APP

　　通俗的理解，WEB APP 即为使用HTML、CSS、JS三大前端基础进行开发的WEB APP，是基于浏览器进行运行使用的；使用HTML、CSS、JS可以在浏览器上怎么开发网页，那么WEB APP也是一样，只是浏览器的使用场景放在了手机等移动端设备上。

　　那么产品转移到了移动端上，跟电脑端有几点不同和需要注意：

　　①适配，手机的屏幕尺寸是比电脑小很多的，因此不能用传统的电脑端去衡量一个手机端的屏幕显示，在开发的时候可在CSS头部加上@media屏幕大小判断（可选择REM取代PX来进行大小适配），也可使用JS提供的navigator对象获取客户使用的设备，根据设备来相应的显示，这与在CSS中配置@media是一样的道理。

　　②交互，电脑端的交互就是鼠标点点点，然后键盘可以敲敲敲，但是手机端不一样，手机端其实交互很单一，现在都是大屏手机，基本上大家也就是点点、滑滑然后再输入，所以在使用移动端开发WEB APP的时候，要注意客户的使用场景，WEB APP比电脑端操作少很多，也功能简单了很多。

　　③性能与速度，手机端不比电脑端，电脑端的网络都是比较稳定的，要么是光缆，就算是wifi也是信号很强的，但是手机端是不一定的，2G、3G、4G都有可能，用户的网络有不稳定的因素，所以在开发WEB APP时应该注意不能使用较大的资源，比如引入非常大的js文件，花费客户大量的时间去请求，且因为是运行在手机浏览器上，不同移动设备的浏览器也是参差不齐的，用户容易出现页面根本加载不出来，或者运行及其缓慢的现象。

　　④与手机设备原生的一些功能调用是比较差的。比如摄像头这些，WEB APP他不像安卓这种原生APP，原生APP对设备的支持是很好的，浏览器的话相当于中间是要使用浏览器这个中间件去调用，上面说到了不同浏览器参差不齐所以效果可想而知。

　　现在的理解大概是这样，后面深入了再补充和修改吧。

二.Native APP

　　即原生APP，原生APP就是我们实实在在运行在手机设备上的应用，在APP store 应用商店都有的，需要下载和安装，那么主要从区别上来讲讲对这个的理解吧

　　①使用的语言。安卓使用java、苹果使用swift。

　　②使用速度非常的快，比WEB APP速度快非常多。

　　③与人的交互更为支持，对设备的比如摄像头的功能调用非常方便。

　　④很难，比如你想学安卓开发，你还得学习java；那你要想开发ios，还必须学习swift。

三.Hybrid APP

　　Hybrid 可以理解为是WEB APP和Native APP的混合，使用的语言是HTML、CSS、JS。

　　①不需要浏览器运行

　　②比WEB APP 好一点， 比Native APP 稍微差一点

　　这个不甚了解..

四.React Native / Uniapp

　　这个就是纯前端的东西了，使用React 和 Vue 框架作为技术支撑的开发，可以理解为移动端版的VUE和React。

　　但这两个有个非常好的好处，也是大前端的发展趋势一个分支，那就是一套代码，多端使用。

　　一套代码，多端使用：假如我使用uniapp，我则只需要使用vue的语法，加上uniapp提供的各式各样的api，我就可以开发出一个编译后可在浏览器WEB APP、手机设备NATIVE APP、小程序、H5都能使用的东西，是不是很强大？ 当然在全面性上面比不上native，但是应付一些简单的工作需要已经搓搓有余了。

五.H5

　　H5其实是一个称呼，他本身就是HTML、CSS、JS，但是因为易企秀、微信推广，让这种简单模式的有音乐播放功能、可以上下滑动等交互功能，但入门门槛极低，不需要去学习HTML、CSS、JS，你可以把他想象成，对HTML、CSS、JS进行了一次封装，我调用这个函数可以实现放音乐，还能送我一个音乐播放器；我调用另一个函数，就可以实现页面文字一排一排的浮现。但其实呢，我们前端完全可以写，他本来也就是HTML、CSS、JS写出来的，只是换了一个噱头，让人简单易上手。我们使用框架大抵也是如此吧。

六.小程序