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

时间:2022-01-07 15:21:56

因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑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写出来的,只是换了一个噱头,让人简单易上手。我们使用框架大抵也是如此吧。

六.小程序