最近项目中因各种客观因素,移动端都是默认用的纯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的优异之处吧。

H5和原生APP之间的区别的更多相关文章

  1. h5做app和原生app有什么区别?

    h5做app和原生app有什么区别? 一.总结 一句话总结: 二.h5做app和原生app有什么区别? 普通的HTML5技术与原生技术相比,有跨平台.动态.开放.直达二级内容页面等特点,但却在性能.工 ...

  2. h5 与原生 app 交互的原理

    现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次就来捋 ...

  3. 客户端相关知识学习(二)之h5与原生app交互的原理

    前言 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...

  4. H5、原生app、混合开发三者比较

    一.概念 a) H5:即Html5,接触过互联网的都知道html,所以很明显h5是html的第5次重大修改的一项超文本标记语言的标准协议. b) 原生:使用原生制作APP(Native app),即在 ...

  5. 手机APP与原生APP设计的区别

    交互上可以按照原生App的设计方式,效果将越来越接近,主要区别在于: 1.设计中要考虑到浏览器地址栏和工具栏的占有空间,和其对App的操作存在一定的影响. 2.暂时不适合调用系统底层接口,更适合web ...

  6. h5启动原生APP总结

    许久没有写博客了,最近有个H5启动APP原生页面的需求,中间遇上一些坑,看了些网上的实现方案,特意来总结下 一.需要判断客户端的平台以及是否在微信浏览器中访问 1.客户端判断 在启动APP时,Andr ...

  7. uni-app强大的前端框架,h5,原生app(两大系统),微信小程序

    最近发现一款强大的前端框架,它叫uni-app 这是一款通用的框架可以打包app,h5,微信小程序, 说说要弄这个工具需要会那些技能吧, 要熟悉vue,微信小程序.这样这个框架用的就是很快上手了 模块 ...

  8. OVGap iOS与Javascript交互(H5与原生APP交互)

    源代码:https://github.com/windshg/OVGap OVGap:一个轻量级的类库,能够让iOS应用和远程网页的 Javascript 代码进行通信,也就是说,远程的 Javasc ...

  9. 通过AIDL在两个APP之间Service通信

    一.项目介绍 [知识准备] ①Android Interface definition language(aidl,android接口定义语言),其目的实现跨进程的调用.进程是程序在os中执行的载体, ...

随机推荐

  1. AJAX—AJAX基础

    AJAX简介 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异 ...

  2. web开发:jquery初级

    一.JQ入门 二.引入JQ 三.页面加载 四.分析JQ源码流程 五.JQ操作 六.c菜单栏案例 一.JQ入门 what is jQuery ???1.jQuery是对原生JavaScript二次封装的 ...

  3. JS继承的原理、方式和应用

    概要: 一.继承的原理 二.继承的几种方式 三.继承的应用场景 什么是继承? 继承:子类可以使用父类的所有功能,并且对这些功能进行扩展.继承的过程,就是从一般到特殊的过程.要了解JS继承必须首先要了解 ...

  4. 学习kafka笔记

    一:概念 Kafka是一个分布式的消息队列,相当于我们生活中的快递柜,快递点,快递员将快递放到快递柜中,收件人去取,把快递(消息)的入柜(入队)和处理进行解耦,使得双方以自己合适的时间和频率处理快递, ...

  5. [SCOI2016]美味——主席树+按位贪心

    原题戳这里 题解 让异或值最大显然要按位贪心,然后我们还发现加上一个\(x_i\)的效果就是所有\(a_i\)整体向右偏移了,我们对于\({a_i}\)开个主席树,支持查询一个区间中有多少个在\([L ...

  6. flutter 跳转至根路由

    上代码 //flutter 登录后跳转到根路由 Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (co ...

  7. SpringBoot AOP注解式拦截与方法规则拦截

    AOP的本质还是动态代理对方法调用进行增强. SpringBoot 提供了方便的注解实现自定义切面Aspect. 1.使用需要了解的几个概念: 切面.@Aspect 切点.@Pointcut. 通知. ...

  8. No module named 'pip._vendor.progress.helpers' 的解决方法

    莫名其妙的pip出现故障了 ModuleNotFoundError: No module named ‘pip._vendor.progress.helpers’ 在百度搜索了一圈也没看到这个错误的解 ...

  9. Luogu P1110 [ZJOI2007]报表统计 multiset

    沿用了学长的$multiset$ 然后这道题可以看到我的程序中有两行注释,它在我看来和他们下面的代码没区别,但是我们发现,C++会先调用后面的参数,所以$--it$会被先执行 ... ... ... ...

  10. Win7下使用Visual Studio为WinXP编译可执行文件

    造冰箱的大熊猫@cnblogs 2019/8/5 2019/9/5补充:参见这里 1.问题 开发机是64位Win7,想开发能够运行在WinXP下的C程序,怎么办? 2.解决方法 一个简单粗暴的解决办法 ...