原生开发、H5开发和混合式开发的区别

目前市场上主流的APP分三种:
1.原生APP
2.Web APP(即H5)
3.混合APP,还有flutter等

三种开发模式对比如下:

1.原生开发(Native App开发)

优点:可访问一台手机的所有功能,比如GPS、摄像头、扬声器等,可实现最齐全的功能;
运行速度快、性能高,用户体验最佳;
支持大量图形、动画的计算,不卡顿,随着CPU的优秀,反应和速度越来越快;
兼容性高,每个代码经过设计,一般不会出现闪退,还能抵御和防止病毒或漏洞;
比较快捷的使用设备端提供的接口,处理速度快。
缺点:开发时间长,制作费昂贵,成本高;
可移植性较差,一款原生的App,需要再安卓和苹果系统各自开发,同样的需求需要写两套逻辑或代码;
内容受限制(App Store限制)
必须等用户下载才可以使用,每次新版本都需要用户重新下载或更新
因为开发周期长,会造成需求迭代较慢,上线慢

2.Web APP(h5开发)

可以在手机端浏览器里打开的网页就称为webapp。Web技术本身需要浏览器的支持才可进行展示和交互,
因此主要用到的技术是html、css、js或vue、react等框架语言。
优点:开发成本低,开发周期短;
无平台内容的限制;
支持设备广,可跨平台,一套代码可以同时运行在安卓、IOS、windows上运行
用户可以直接看到或感知最新版本,即无需用户手动更新或下载
缺点:由于本身技术的限制,H5还不能直接访问设备的一些硬件条件(摄像头、麦克风等);
体验和性能较原生有很大的局限性;
对联网要求高,无网的情况下无法做任何操作;
页面切换的流畅性较差,多动画下卡顿,用户体验与原生比较差;
图片和动画的支持性不高;

3.混合开发—Hybrid App开发

混合开发(Hybrid App开发),是指在开发一款App产品的时候,为了提高效率、节省成本而利用原生与
H5的开发技术的混合应用。

优点:开发效率高、节约时间成本。同一套代码在安卓或IOS基本上通用;
更新和部署比较方便,每次升级不需要上传到App Store或应用市场审批;
代码维护方便、版本更新快;
比web的实现功能会多一些。
缺点:功能界面无法自定义,内容都是通过设计固定好的;
对网络要求高,每个页面都需要重新下载,缓冲时间长,容易给用户造成等待的反感;
安全性较低。

在混合式开发中,如何辨别出原生和H5

  1. 看加载方式—如果再打开新页面时,导航栏下面有一条加载的线的话,这个页面多半就是H5页面,反之则
    是原生页面。微信里打开我们的H5页面常见有个绿色的加载线条。
  2. 看app顶部导航栏是否会有关闭的按钮—这个判断在某些场景可以进行判断,一般app内原生页面不会添加
    关闭按钮(除非设计需要)
  3. 看布局(只限安卓手机)—可以打开手机的>开发者选项>显示布局边界,此时可以看到,一般H5的页面布局
    是一整块,而原生空间的布局是密密麻麻的
  4. 看复制文章的提示—此判断方式不太准确,只可作为参考,比如有些H5的页面没有对复制选择功能做屏蔽的话,可以发现在
    文章页面长按页面,会出现文字选择、粘贴
  5. 看断网情况—把手机的网络断掉,然后打开页面。还可以正常显示东西的一般是原生页面。显示404或错误页面的
    是html页面。原生部分页面是可以继续正常打开的,打不开的原生页面和H5报错信息也是有区别的
  6. 下拉页面的时候,若在下拉处显示网址提供方的大部分都是H5

总结与思考:

三种方式各有优缺点,选择合适自己团队的,选择适合自己需求、成本、时间的,才是最好的方案,就像技术本身没有绝对的好坏之分,只有不断锤炼,让每一种技术都发挥出最大的作用,才是一个开发者或团队的最佳使命。

原生开发、H5开发和混合式开发的区别相关推荐

  1. 手机 html5 语音输入,整合vue开发H5+跨平台app (以开发语音识别为例)

    HBuilder快速搭建H5+应用 上一次尝试了下H5+开发了跨平台app,能够发现的事利用H5+开发app的话,其实就是利用h5将页面给作出来,而后借助H5+的sdk和原生系统作交互,而咱们开发人员 ...

  2. 原生与H5混合式开发详解

    声明:本教程不收取任何费用,欢迎转载,尊重作者劳动成果,不得用于商业用途,侵权必究!!! 目录 一.前言 二.原生与H5简介 1.浅析原生Android与HTML5 2.Native App的优缺点 ...

  3. 微信开发h5图片上传(拍照、图片压缩、IOS照片旋转)

    微信开发h5图片上传 开发环境 vue.js,原生h5 input file, 微信公众号网页 依赖安装 exif-js:IOS下拍照照片的方向有问题, 需要exif-js来读取照片信息进行旋转处理: ...

  4. 连接真机开发安卓(Android)移动app MUI框架——混合式开发(一) (敲详细)

    从接触安卓开发的第一天起,我想我已经爱上了开发,哈哈哈,愿你我坚持下去的理由都是热爱,共勉!这几天没有更新博客,是因为我学习去了(没有相见的日子,我在努力哈哈哈).有想过用模拟器来运行的,但是模拟器太 ...

  5. 原生Android也能做Web开发了

    大家好,今天跟大家介绍一个让原生Android也可以做Web开发的开源项目--AndServer. 开源地址:github.com/yanzhenjie/- AndServer是一个Android端的 ...

  6. .Net Web微信H5鱼虾蟹网站开发搭建技术栈

    本文整理了当前企业web微信H5鱼虾蟹网站开发搭建(h5.fanshubbs.com)的管理系统架设Q1687054422,商城等系统的常用开发技术栈. C#常见运算符 一元运算符(+.-.!.~.+ ...

  7. 小程序开发 和html的区别,h5和小程序有什么区别?

    我们都知道微信小程序说是一种程序.看似与手机当中的app一样,实际上都是一种网页程序,所以它在设计上面很多地方都会与H5网页设计有一些雷同性,那么微信小程序与H5有什么区别?下面本篇文章给大家介绍一下 ...

  8. 苏州木渎计算机课程培训,苏州木渎H5/web全栈开发培训

    课程名称:H5/web全栈开发 课程类型:网页设计 班型:全日制/周末班/晚班 适用校区:全校区 课程详情: 由于网络的发展以及人们使用网络的频繁性,企业需要通过网页呈现产品.服务.理念.文化,或向大 ...

  9. Android原生集成MUI框架进行混合开发

    开发APP中我们经常进行原生结合H5进行混合开发,下面将进行详细讲解Android原生集成MUI框架进行混合开发(项目Demo如下,有需要的可以下载查看),下一篇讲述,Android原生和MUI(也适 ...

  10. uniApp开发h5踩坑 px转rpx转rem 1px转2rpx 2倍

    项目要求开发h5移动端页面,查看了后续可能会出现的ui设计.不选择使用原生写法写h5,选择了uniApp+vue3来开发h5,高效简洁.由于第一次使用uniApp开发h5,所以挺多坑和报错. 在h5移 ...

最新文章

  1. maven项目密码md5加密_加密Spring Boot中的application.properties
  2. HotSpotOverview.pdf
  3. 250相当于什么显卡_2K(4K)144hz显示器需要什么显卡来带? 本文将给你答案。
  4. C#中使用ProtoBuf将list进行序列化并保存到文件
  5. Angular Component template函数执行上下文的对象
  6. 【渝粤教育】国家开放大学2018年秋季 0062-22T港台文学专题讲座 参考试题
  7. 现代软件工程讲义 9 测试 QA 的角色和分工
  8. linux 日志清理
  9. Matlab三维绘图plot3按二维数组分类区分颜色
  10. bootbox.js中confirm()方法的使用
  11. Swift3.0 中实现发短信功能
  12. 如何申请注册微信公众号
  13. 哪些因素决定了CRM客户管理系统的价格?
  14. 计算机技术毕业生个人简历,计算机技术毕业生个人简历模板
  15. MacBook下载的软件显示无法打开“某某某”,因为Apple无法检查其是否包含恶意软件。”的解决办法
  16. R语言将变量分组的三种方法(含cut函数介绍)
  17. 多多客api_拼多多推广接口多多客API的简单使用
  18. 前端技术栈-----WEB
  19. 从电路交换到分组交换——TDM、ATM
  20. 医咖会R语言学习笔记——如何安装工具包

热门文章

  1. Springboot发送美观的HTML邮件
  2. 怎么用计算机打吃鸡,电脑上怎么玩吃鸡端游
  3. c语言卡诺图算法实现,多变量卡诺图化简的算法实现.pdf
  4. 计算机上怎么写英语音标,手的英语音标怎么写
  5. 跟父母还是要保持一定的距离感
  6. linux怎么看内存时序,内存速度和时序重要么
  7. 在Power BI中如何计算同比增长?
  8. Linux du命令和df命令
  9. XTU 1236 Fibonacci
  10. 运放放大倍数计算公式_运放选型速记指南