H5和原生APP之间的区别
最近项目中因各种客观因素,移动端都是默认用的纯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之间的区别的更多相关文章
- h5做app和原生app有什么区别?
h5做app和原生app有什么区别? 一.总结 一句话总结: 二.h5做app和原生app有什么区别? 普通的HTML5技术与原生技术相比,有跨平台.动态.开放.直达二级内容页面等特点,但却在性能.工 ...
- h5 与原生 app 交互的原理
现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次就来捋 ...
- 客户端相关知识学习(二)之h5与原生app交互的原理
前言 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...
- H5、原生app、混合开发三者比较
一.概念 a) H5:即Html5,接触过互联网的都知道html,所以很明显h5是html的第5次重大修改的一项超文本标记语言的标准协议. b) 原生:使用原生制作APP(Native app),即在 ...
- 手机APP与原生APP设计的区别
交互上可以按照原生App的设计方式,效果将越来越接近,主要区别在于: 1.设计中要考虑到浏览器地址栏和工具栏的占有空间,和其对App的操作存在一定的影响. 2.暂时不适合调用系统底层接口,更适合web ...
- h5启动原生APP总结
许久没有写博客了,最近有个H5启动APP原生页面的需求,中间遇上一些坑,看了些网上的实现方案,特意来总结下 一.需要判断客户端的平台以及是否在微信浏览器中访问 1.客户端判断 在启动APP时,Andr ...
- uni-app强大的前端框架,h5,原生app(两大系统),微信小程序
最近发现一款强大的前端框架,它叫uni-app 这是一款通用的框架可以打包app,h5,微信小程序, 说说要弄这个工具需要会那些技能吧, 要熟悉vue,微信小程序.这样这个框架用的就是很快上手了 模块 ...
- OVGap iOS与Javascript交互(H5与原生APP交互)
源代码:https://github.com/windshg/OVGap OVGap:一个轻量级的类库,能够让iOS应用和远程网页的 Javascript 代码进行通信,也就是说,远程的 Javasc ...
- 通过AIDL在两个APP之间Service通信
一.项目介绍 [知识准备] ①Android Interface definition language(aidl,android接口定义语言),其目的实现跨进程的调用.进程是程序在os中执行的载体, ...
随机推荐
- linux驱动程序与菜单关联
- Cacti-0.8.8b详细安装及配置步骤
1. Cacti环境安装 1.1 安装LAMP环境 安装LAMP环境,当然,如果你有兴趣可以采用编译,我线上Mysql是编译的,其余是yum安装的.在这次实验采用yum安装. 关闭i ...
- (十三)r18 cpu id
1.cpuid内核接口 lichee/linux-4.4/drivers/soc/sunxi/sunxi-sid.c int sunxi_get_soc_chipid(u8 *chipid) int ...
- fixed固定元素
1.css <style type="text/css"> .elementFixed{ position: fixed; top:0; } </style> ...
- Launcher类源码分析
基于上一次获取系统类加载器这块进行分析: 关于这个方法的javadoc在之前已经阅读过了,不过这里再来仔细阅读一下加深印象: 这里有一个非常重要的概念:上下文类加载器: 它的作用非常之大,在后面会详细 ...
- Codeforces Round #588 (Div. 1) C. Konrad and Company Evaluation
直接建反边暴力 复杂度分析见https://blog.csdn.net/Izumi_Hanako/article/details/101267502 #include<bits/stdc++.h ...
- 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 ...
- NMI是什么
NMI是什么 2016/02/28 vmunix NMI(non-maskable interrupt),就是不可屏蔽的中断.根据Intel的Software Developer手册Volume 3, ...
- Git可视化极简易教程 — Git GUI使用方法[转]
之前一直想一篇这样的东西,因为最初接触时,我也认真看了廖雪峰的教程,但是似乎我觉得讲得有点多,而且还是会给我带来很多多余且重复的操作负担,所以我希望能压缩一下它在我工作中的成本,但是搜索了一下并没有找 ...
- @Test 测试
package com.自定义.mall.admin.system; import java.util.List; import java.util.Map; import javax.annotat ...