当前位置: 首页 > Web前端 > HTML5

软件开发中原生开发和H5开发、混合开发的区别

时间:2023-04-05 21:15:28 HTML5

软件开发中原生开发、H5开发和混合开发的区别目前市场上主流的APP有三种:原生APP、WebAPP(即HTML5)和混合APP,对应于定制开发就是原生开发、H5开发和混合开发。那么这三种开发模式有什么区别呢?下面我们就来分别比较一下三者各自的优缺点。1、原生开发原生开发(NativeAppdevelopment)是使用官方的开发语言、开发类库、开发工具,在Android、IOS等移动平台上进行App开发。比如Android用的是Java、Eclipse、Androidstudio;IOS使用Objective-C和Xcode进行开发。通俗地说,原生开发就像盖房子。先打地基,然后地梁、房屋结构、一砖一瓦、钢筋混凝土、电路走向等,都经过精心设计。原生APP也是如此:每一个页面,每一个功能,每一个效果,每一个逻辑,每一个步骤,都是通过代码,一层一层,一段一段的写出来的。优点:1、可接入手机所有功能(如GPS、摄像头等),实现最完整的功能;2、运行速度快,性能高,用户体验好;3.支持海量图文动画,无卡顿,反应灵敏;4、兼容性高,每段代码都经过程序员精心设计,一般不会出现闪退,还能防病毒防漏洞;5.使用设备端提供的接口更快速的处理速度上有优势。缺点:1、开发时间长,最快3个月左右可以完成,最慢5个月左右;2、生产成本高,成本高;3、可移植性比较差,一个原生App,Android和IOS必须分开开发,同样的逻辑和界面必须分两套写;4.内容限制(AppStore限制);5、用户必须等待下载完成后才能打开。当获得新版本时,需要重新下载应用程序更新。2、WebAPP(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、手机硬件(摄像头、麦克风等)无法调用。3、混合(原生+H5)开发混合开发(HybridAppdevelopment)是指在开发App产品时,为了提高效率和节约成本,采用原生和H5开发技术的混合应用。通俗地说,这就是网页模型,通常由两部分组成:“HTML5云网站+APP应用客户端”。混合开发是一种优势互补的开发模式。原生代码使用WebView插件或其他框架为H5提供容器。程序的主要业务实现和界面展示均采用H5相关的Web技术实现。京东、淘宝、今日头条等应用都是采用混合开发模式开发的。优点:1.开发效率高,节省时间。同一套代码基本上可以在Android和IOS上使用;2、更新部署更方便。每次版本升级只需要在服务器端升级,不再需要上传到AppStore审核;3、代码维护方便,版本更新快,节省产品成本;4、比网页版功能更多;5.可以离线运行。缺点:1.功能/界面不可定制:所有内容都是固定的,不能更改界面或增加功能;2、加载慢/网络要求高:所有混合APP数据需要从服务器获取,每个页面需要重新加载下载,所以打开速度慢,网络占用率高,缓冲时间长,并且容易让用户产生反感;3、安全性较低:密码都是旧密码,不能很好地兼容最新的手机系统,安全性较低。网络发展如此之快,病毒如此之多。如果不实时更新和定期检查,很容易产生漏洞,造成直接的经济损失;4、既懂原生开发又懂H5开发的高端人才难找。目前混合开发有两种开发模式:1、原生主导开发模式:需要Android和IOS原生开发者。整个APP既有原生开发的页面,也有H5页面。当需要H5页面时,原生开发工程师实现embedding,笔者最近开发的项目就是采用这种开发模式。2、H5主导的开发模式:只需要H5开发工程师使用一些打包工具即可实现应用打包和调用原生设备功能,如HBuilder的云打包功能。如何区分原生和H5:以最近在开发的混合APP项目首页为例:1、检查断网情况,将手机断网。然后点击页面。那么能正常显示的东西就原生写好了。显示404或错误页面的是html页面。2.要查看布局边界,可以在开发者选项中打开显示布局边界。当页面元素较多时,布局是一整块h5,密集布局是原生控件。有布局的页面是原生的,否则就是h5页面。(仅限安卓手机试用)3、看复制文章的提示,需要比较才能得出结果。比如在文章信息页可以尝试长按页面。如果出现文本选择和粘贴功能,则为H5页面,否则为原生页面。某些本机应用程序启用或禁用了复制和粘贴功能。H5css屏蔽复制选择功能等。需要通过对比目标测试APP才知道。4.看加载方式。如果打开新页面时导航栏下方有加载线,则该页面为H5页面。如果不是,则它是本机页面。在微信中打开我们的H5页面时,经常会出现一条绿色的加载线。5、查看app顶部导航栏是否有关闭操作。如果app的顶部导航栏有关闭按钮或者关闭图标,那么当前页面肯定是H5,不会出现原来的(除非设计开发者特意做的))美团、大众点评的APP,以及微信APP,加载过多h5时,左上角会出现关闭字样。6、判断页面下拉刷新时(前提是有下拉刷新功能),如果界面没有明显的刷新现象,就是原来的。如果有明显的刷新现象(比如闪退),就是一个H5页面(ios和android)。比如淘宝的众筹页面。7、页面下拉时,必须是H5才能显示URL提供者。