原生开发、H5开发和混合开发的区别?菜鸟教程网_区别使用帮助

目前市场上主流的APP分为三种:原生APP、Web APP(即HTML5)和混合APP三种,相对应的定 制开发就是原生开发、H5开发和混合开发。那么这三种开发模式究竟有何不同呢?下面我们就分别从这三者各自的优劣势来区分比较吧!一、原生开发原生开发(Native App开发),是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行

原生开发、H5开发和混合开发的区别?菜鸟教程网

目前市场上主流的APP分为三种:原生APP、Web APP(即HTML5)和混合APP三种,相对应的定 制开发就是原生开发、H5开发和混合开发。那么这三种开发模式究竟有何不同呢?下面我们就分别从这三者各自的优劣势来区分比较吧!

原生开发、H5开发和混合开发的区别?菜鸟教程网_区别使用帮助

一、原生开发

原生开发(Native App开发),是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发。比如Android是利用Java、Eclipse、Android studio;IOS是利用Objective-C 和Xcode进行开发。
通俗点来讲,原生开发就像盖房子一样,先打地基然后浇地梁、房屋结构、一砖一瓦、钢筋水泥、电路走向等,都是经过精心的设计。原生APP也一样:通过代码从每个页面、每个功能、每个效果、每个逻辑、每个步骤全部用代码写出来,一层层,一段段全用代码写出来。
优点:
1、可访问手机所有功能(如GPS、摄像头等)、可实现功能最齐全;
2、运行速度快、性能高,绝佳的用户体验;
3、支持大量图形和动画,不卡顿,反应快;
4、兼容性高,每个代码都经过程序员精心设计,一般不会出现闪退的情况,还能防止病毒和漏洞的出现;
5、比较快捷地使用设备端提供的接口,处理速度上有优势。
缺点:
1、开发时间长,快则3个月左右完成,慢则五个月左右;
2、制作费用高昂,成本较高;
3、可移植性比较差,一款原生的App,Android和IOS都要各自开发,同样的逻辑、界面要写两套;
4、内容限制(App Store限制);
5、必须等下载完毕用户才可以打开,获得新版本时需重新下载应用更新。

二、Web APP (HTML5)开发

HTML5应用开发,是利用Web技术进行的App开发,可以在手机端浏览器里面打开的网站就称之为webapp。Web技术本身需要浏览器的支持才能进行展示和用户交互,因此主要用到的技术是HTML、CSS、Javascript以及jQuery、Vue、React等JS框架。
优点:
1、支持设备范围广,可以跨平台,编写的代码可以同时在Android、IOS、Windows上运行;
2、开发成本低、周期短;
3、无内容限制;
4、适合展示有大段文字(如新闻、攻略等),且格式比较丰富(如加粗,字体多样)的页面;
5、用户可以直接使用最新版本(自动更新,不需用户手动更新)。
缺点:
1、由于Web技术本身的限制,H5移动应用不能直接访问设备硬件和离线存储,所以在体验和性能上有很大的局限性;
2、对联网要求高,离线不能做任何操作;
3、功能有限;
4、APP反应速度慢,页面切换流畅性较差;
5、图片和动画支持性不高;
6、用户体验感较差;
7、无法调用手机硬件(摄像头、麦克风等)。

三、混合(原生+H5)开发

混合开发(Hybrid App开发),是指在开发一款App产品的时候,为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来说,这就是网页的模式,通常由“HTML5云网站+APP应用客户端”两部份构成。
混合开发是一种取长补短的开发模式,原生代码部分利用WebView插件或者其它框架为H5提供容器,程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。
优点:
1、开发效率高,节约时间。同一套代码Android和IOS基本上都可使用;
2、更新和部署比较方便,每次升级版本只需要在服务器端升级即可,不再需要上传到App Store进行审核;
3、代码维护方便、版本更新快,节省产品成本;
4、比web版实现功能多;
5、可离线运行。
缺点:
1、功能/界面无法自定:所有内容都是固定的,不能换界面或增加功能;
2、加载缓慢/网络要求高:混合APP数据需要全部从服务器调取,每个页面都需要重新下载,因此打开速度慢,网络占用高,缓冲时间长,容易让用户反感;
3、安全性比较低:代码都是以前的老代码,不能很好地兼容最新手机系统,且安全性较低,网络发展这么快,病毒这么多,如果不实时更新,定期检查,容易产生漏洞,造成直接经济损失;
4、既懂原生开发又懂H5开发的高端人才难找。

目前混合开发有两种开发模式:

一、原生主导的开发模式:需要安卓和IOS原生开发人员,整个App既有原生开发的页面,也有H5页面,在需要H5页面时由原生开发工程师实现内嵌,笔者最近正在开发的项目就使用这种开发模式。
二、H5主导的开发模式:只需要H5开发工程师,借助一些封装好的工具实现应用的打包与调用原生设备的功能,如HBuilder的云端打包功能。

如何辨别三种APP:

1、看断网的情况
把手机的网络断掉。然后点开页面。然后可以正常显示的东西就是原生写的。
显示404或者错误页面的是html页面。

2、看布局边界
可以打开 开发者选项中的显示布局边界,页面元素很多的情况下布局是一整块的是h5的,布局密密麻麻的是原生控件。页面有布局的是原生的否则为h5页面。(仅针对安卓手机试用)

3、看复制文章的提示,需要你通过对比才能得出结果。
比如是文章资讯页面可以长按页面试试,如果出现文字选择、粘贴功能的是H5页面,否则是native原生的页面。
有些原生APP开放了复制粘贴功能或者关闭了。而H5的css屏蔽了复制选择功能等等情况。需要通过对目标测试APP进行对比才可知。

4、看加载的方式
如果在打开新页面导航栏下面有一条加载的线的话,这个页面就是H5页面,如果没有就是原生的。 微信里面打开我们的H5页面常见的有个绿色的加载线条。

5、看app顶部 导航栏是否会有关闭的操作
如果APP顶部导航栏当中出现了关闭按钮或者有关闭的图标,那么当前的页面肯定的H5,原生的不会出现(除非设计开发者故意弄的)
美团的、大众点评的APP、微信APP当加载h5过多的时候,左上角会出现关闭二字。

6、判断页面 下拉刷新的时候(前提是要有下拉刷新的功能)
如果界面没有明显刷新现象的是原生的,如果有明显刷新现象(比如闪一下)的是H5页面(ios和android)。
比如淘宝的众筹页面。

7、下拉页面的时候显示网址提供方的一定是H5。

海计划公众号
(0)
上一篇 2020/03/26 23:36
下一篇 2020/03/26 23:36

您可能感兴趣的内容

  • angular-seed小白知识_AngularJS种子项目

    angular-seed小白知识 官方网址:http://angularjs.org/ GitHub:https://github.com/angular/angular-seed…

    2020/03/11
  • JS基础语法:continue关键字指南教程_关键字入门教程

    continue: 在循环中如果遇到continue关键字,直接开始下一次循环如下:continue在计数器之前,会一直循环,浏览器会崩溃,我的就崩溃了var i = 0;
    while (i < 10) {console.log("哈哈");continue;i++;
    }练习1: 求100-200之间所有的奇数的和(用continue)var sum = 0

    2020/03/23
  • HTTPS为什么是安全的?菜鸟攻略_安全基础指南

    超文本传输协议HTTP被用于在web浏览器和网站服务器之间传递信息,但以明文方式发送内容,被攻击者截取就可以直接读取内容信息,不适合传输敏感信息。为解决这一缺陷,需要使用另一种协议:安全套接字层超文本传输协议HTTPS,为了数据传输的安全,在HTTP的基础上加入了SSL协议,SSL依靠证书来验证服务器身份,并为浏览器和服务器之间的通信加密。HTTPS协议的主

    2020/03/24
  • SUI菜鸟指南简单易用、功能强大的UI库

    SUI基础入门 官方网址:http://sui.taobao.org 简介描述:简单易用、功能强大的UI库 SUI 是一套基于bootstrap开发的前端组件库,同时她也是一套设计…

    2020/03/05
  • web安全漏洞之目录遍历菜鸟指南_漏洞入门基础教程

    什么是目录遍历第一次接触到目录遍历漏洞还是在 ThinkJS 2 的时候。代码如下图,目的是当用户访问的 URL 是静态资源的时候返回静态资源的地址。其中 pathname 就是用户访问的 URL 中的路径,我们发现代码中只是简单的解码之后就在22行将其与资源目录做了拼接,这就是非常明显的目录遍历漏洞了。为什么这么说呢?假设用户访问的 URL 是 http:

    2020/03/26
  • js中Date的构造函数解读基础教程_日期小白入门

    javascript中的内置对象是我们经常会用到的,那么今天我们就来说说Date的四种构造方法吧一、new Date()这是我们最常使用也最熟悉不过的Date对象的构造方法了,通过无参数的构造函数我们可以默认获取到一个代表实例化时的Date对象var now = new Date();
    console.log(now) //Thu Sep 19 2019 1

    2020/03/26
  • 高性能Javascript总结指南教程_性能基础入门

    一、加载和运行Javascript代码执行会阻塞其他浏览器处理过程、充分利用webpack或gulp工具对文件打包压缩,减少js文件的数量,从而减少http请求的次数,以提高网页应用的实际性能。二、数据访问 经典计算机科学的一个问题是确定数据应当存放在什么地方、以实现最佳的读写效率。数据存储在哪里会关系到代码运行期间数据被检索到的速度。JS中的四

    2020/04/05
  • background 实现四角选中框效果使用说明_效果基础入门

    css 背景backgroundbackground: linear-gradient(#d70c25,#d70c25) left top,linear-gradient(#d70c25,#d70c25) left top, linear-gradient(#d70c25,#d70c25) right top,linear-gradient(#d70c25,

    2020/03/20
  • 程序员经典面试题:高并发系统,一般需要怎么做基础知识教程_面试使用帮助

    高并发系统总是那么令人着迷,比如说双十一的抢购,比如说12306的抢票,都是非常经典的高并发的例子,也是非常大的挑战。对于开发这样系统的人来说,最怕的就是突发的流量,就好比河流突发大水而引发洪涝灾害一样,突发的流量也会引起服务器奔溃。为了应对这些突发的流量,我们总需要做点什么?今天我们来介绍一下高并发的几个套路。分布式提升并发的好的办法,便是提升硬件。举个大

    2020/03/26
  • 为什么json 不能使用 int64类型基础知识教程_json使用指南

    json 简介JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999的一个子集 。 JSON采用完全独立于语言

    2020/03/29
  • js调用电脑摄像头使用帮助_摄像使用攻略

    js如何调用电脑的摄像头?使用js写了一个调用摄像头的demo,并用canvas显示保存。这个功能很实用,比如上传用户的头像,即时拍照及时上传。 Html:

    <button

    2020/04/05
  • Javascript有重写吗?菜鸟教程下载_方法基础教程

    JavaScript中有重写。有时子类并不想原封不动地继承父类的方法,而是想作一定的修改,这就需要采用方法的重写。方法重写又称方法覆盖。JavaScript中通过覆盖原有方法进行重写:<html>

    <meta http-equiv="Content-Type" content="text/ht

    2020/03/20
  • Python 错误和异常零基础入门_Python小白攻略

    错误和异常在编写代码的时候,先不管出于什么原因,在运行阶段,可能都看到过一些错误的信息。这些信息当中(至少)有两种可区分的错误:语法错误 和 异常。语法错误语法错误也叫解析错误,这可能在学习编码中最容易遇到的错误:>>> while True print(‘Hello World’)File “”, line 1while True print

    2020/03/24
  • 扒开V8引擎的源码,我找到了你们想要的前端算法使用帮助_源码菜鸟知识

    算法对于前端工程师来说总有一层神秘色彩,这篇文章通过解读V8源码,带你探索 Array.prototype.sort 函数下的算法实现。来,先把你用过的和听说过的排序算法都列出来:快速排序冒泡排序插入排序归并排序堆排序希尔排序选择排序计数排序桶排序基数排序答题环节到了, sort 函数使用的以上哪一种算法?如果你在网上搜索过关于 sort 源码的文章,可能会

    2020/03/26
  • 敏捷开发入门基础知识_开发小白攻略

    1、我们最优先要做的是通过尽早的、持续的交付有价值的软件来使客户满意。2、即使到了开发的后期,也欢迎改变需求。敏捷过程利用变化来为客户创造竞争优势。3、经常性的交付可以工作的软件,交付的间隔可以从几周到几个月,交付的时间间隔越短越好。4、在整个项目开发期间,业务人员和开发人员必须天天都在一起工作。5、围绕被激励起来的人个来构建项目。给他们提供所需要的环境和支

    2020/03/31
  • 为什么Web前端开发技术如此受欢迎?基础入门_前端教程视频

    随着互联网的发展,Web前端的应用范围更加广泛,除了网页,Web前端更广泛应用于各类APP中,到我们生活的方方面面。Web前端开发好吗?为什么Web前端开发技术会如此受欢迎?一、互动更好很多人都喜欢更好的互动,喜欢对用户有反馈的动态网站,并且用户也很享受互动的过程,HTML5的画图便签就允许你更多的互动和动画,甚至超越我们之间使用的flash达到的效果,HT

    2020/03/26