最近项目中因各种客观因素,移动端都是默认用的纯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. linux驱动程序与菜单关联

  2. Cacti-0.8.8b详细安装及配置步骤

    1.  Cacti环境安装 1.1         安装LAMP环境 安装LAMP环境,当然,如果你有兴趣可以采用编译,我线上Mysql是编译的,其余是yum安装的.在这次实验采用yum安装. 关闭i ...

  3. (十三)r18 cpu id

    1.cpuid内核接口 lichee/linux-4.4/drivers/soc/sunxi/sunxi-sid.c int sunxi_get_soc_chipid(u8 *chipid) int ...

  4. fixed固定元素

    1.css <style type="text/css"> .elementFixed{ position: fixed; top:0; } </style> ...

  5. Launcher类源码分析

    基于上一次获取系统类加载器这块进行分析: 关于这个方法的javadoc在之前已经阅读过了,不过这里再来仔细阅读一下加深印象: 这里有一个非常重要的概念:上下文类加载器: 它的作用非常之大,在后面会详细 ...

  6. Codeforces Round #588 (Div. 1) C. Konrad and Company Evaluation

    直接建反边暴力 复杂度分析见https://blog.csdn.net/Izumi_Hanako/article/details/101267502 #include<bits/stdc++.h ...

  7. OEL7.2下Oracle11.2.0.4RAC部署

    OEL7.2下Oracle11.2.0.4RAC部署 一. 安装步骤简述 u OEL7.2操作系统安装 u RAC 安装环境配置 u ORACLE CRS安装 u ORACLE DB软件安装 u OR ...

  8. NMI是什么

    NMI是什么 2016/02/28 vmunix NMI(non-maskable interrupt),就是不可屏蔽的中断.根据Intel的Software Developer手册Volume 3, ...

  9. Git可视化极简易教程 — Git GUI使用方法[转]

    之前一直想一篇这样的东西,因为最初接触时,我也认真看了廖雪峰的教程,但是似乎我觉得讲得有点多,而且还是会给我带来很多多余且重复的操作负担,所以我希望能压缩一下它在我工作中的成本,但是搜索了一下并没有找 ...

  10. @Test 测试

    package com.自定义.mall.admin.system; import java.util.List; import java.util.Map; import javax.annotat ...