Hybrid?是个啥? 相信大家在平常生活中也会经常见到这个词,比如现在比较火的hybrid汽车(混合动力汽车) 那如果是针对于App而言呢? 那就要从App的分类说起了 目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App 首先,我们来看看究竟什么是 Web App、Hybrid App、 Native App:

Native App

传统的原生App开发模式,android基于Java语言,底层调用Goolge提供的API,IOS基于Objective c或Swift,底层调用Apple官方提供的Api

优点:

直接依托于操作系统,交互性最强,性能最好

功能最为强大,特别是在与系统交互中,几乎所有功能都能实现

缺点 :

开发成本高,无法跨平台,不同平台Android和iOS上都要各自独立开发

门槛较高,原生人员有一定的入门门槛,相比广大的前端人员而言,较少 更新缓慢,特别是发布应用商店后,需要等到审核周期 维护成本高

Web App

即移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问,不是独立APP,无法安装和发布,类似于现在所说的轻应用

优点:

开发成本低,可以跨平台,调试方便

维护成本低 更新无需通知用户,不需要手动升级 无需安装App,不会占用手机内存

缺点:

无法获取系统级别的通知,提醒,动效等等

用户留存率低 设计受限制诸多 体验较差

Hybrid App

(Hybrid)混合应用程序,在应用程序中嵌入了webview,通过webview访问网页,嗯,那webview又是个啥? webview是一个基于webkit引擎,展现web页面的控件 作用: 显示和渲染web界面 直接使用html文件(网络或Apk资源包assets中)作布局 可和JavaScript交互调用

优点:

开发成本较低,可以跨平台,调试方便 维护成本低,功能可复用

功能更加完善,性能和体验要比起web app好太多 更新较为自由

缺点: 相比原生,性能仍然有较大损耗 不适用于交互性较强的app

tips

如何判断一个应用界面是native还是web界面

1、在手机/模拟器中点击关于手机中的版本号5下,出来开发者选项

2、在开发者选项中勾选上显示布局边界再返回到App界面

3、如果App是Html的界面,那界面不会有布局边界显示,如有则说明是native的界面

如下图:第一张图是native界面,第二张图是html的界面

               

============================ PS ==============================
请大家支持原创,尊重原创,如要转载,请注明出处:“转载自:http://www.cnblogs.com/yyoba/”,谢谢!!有任何疑问,欢迎大家留言区艾特我。

【app】Hybrid?Native?不知道你就out了!的更多相关文章

  1. 聊聊Web App、Hybrid App与Native App的设计差异

    目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...

  2. 超赞!聊聊WEB APP、HYBRID APP与NATIVE APP的设计差异

    编者按:这3类主流应用你都了解吗?设计师除了要有视觉功夫,对不同形式的APP也应当了然于胸,今天百度的同学写了一篇非常全面的总结,帮你迅速搞定3类主流APP的设计方法,附带一大波避雷针,带你巧妙跳过A ...

  3. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  4. Web App、Hybrid App与Native App的设计差异

    目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...

  5. 聊聊Web App、Hybrid App与Native App的设计差异(转)

    目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...

  6. [转帖]聊聊Web App、Hybrid App与Native App的设计差异

    聊聊Web App.Hybrid App与Native App的设计差异 https://www.cnblogs.com/zhuiluoyu/p/6056672.html 编者按:这3类主流应用你都了 ...

  7. 移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处

    因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H ...

  8. Native App, Hybrid App, Web App对比

    Native App,Hybrid App和Web App简介 目前基本所有的移动互联网app可以分为三类:Native App,Hybrid App和Web App. Native App是基于智能 ...

  9. Web App、Hybrid App与Native App

    在这个App的时代,转战了前端,一直接触的都是pc, 离out不远了. 那么接下来,app是我接下来半年的重点,为什么是半年,因为时间不多了. 因为是前端,那么我的重心肯定是 Web App, Hyb ...

  10. Hybrid APP之Native和H5页面交互原理

    Hybrid APP之Native和H5页面交互原理 Hybrid APP的关键是原生页面与H5页面直接的交互,如下图,痛过JSBridge,H5页面可以调用Native的api,Native也可调用 ...

随机推荐

  1. canvas的使用方法

    了解canvas:canvas标签是用作图形绘制,但是通过js脚本来实现的,canvas标签其实只是一个容器 ,最终实现绘制功能肯定是通过js脚本实现. 首先肯定要定义一个canvas标签当做容器 & ...

  2. Ax2009中使用CLR发送邮件

    由于Ax2009系统方法SysMailer 发送中文的时候会乱码,一直找不到原因,用.NEt Framwork的类库可以解决中文乱码的问题.static void CKT_DotNetMail(Arg ...

  3. 错误 : 资产文件“项目\obj\project.assets.json”没有“.NETCoreApp,Version=v2.0”的目标。确保已运行还原,且“netcoreapp2.0”已包含在项目的 TargetFrameworks 中。

    升级 vs201715.6.3之后发布出现 错误 : 资产文件“项目\obj\project.assets.json”没有“.NETCoreApp,Version=v2.0”的目标.确保已运行还原,且 ...

  4. matplotlib -- 基础知识

    matplotlib 组织图表的方式 最上层是一个 Figure 实例,包含了所有可见的和其他一些不可见的内容.该 Figure 实例包含了一个 Axes 实例的成员属性 Figure.axes,同时 ...

  5. MySql共享锁和排它锁

    共享锁和排他锁 1.共享锁: 读锁.X锁,在查询时生效,多个事务在查询同一个数据时共享一把锁,但是不能作用于修改数据,在select语句后添加 lock in share mode : 2.排他锁:在 ...

  6. Cookie随笔

    解决了服务器不能识别不同浏览器的问题,相当于给每个浏览器加了个“身份证”. Cookie首先由服务器创建发给浏览器,随后浏览器每次访问服务器时都带上这个Cookie. Cookie缺点: ·Cooki ...

  7. Appium+Python自动化 3 -获取 app 包名和 activity

    方法一: ①手机通过USB连接电脑 ②打开手机上被测app ③在电脑上 dos命令窗口,输入命令 adb shell dumpsys window w | findstr \/ | findstr n ...

  8. 浅谈React数据流管理

    引言:为什么数据流管理如此重要?react的核心思想就是:UI=render(data),data就是我们说的数据流,render是react提供的纯函数,所以用户界面的展示完全取决于数据层.这篇文章 ...

  9. Mac- appium 环境配置

    一: 下载    appium : https://bitbucket.org/appium/appium.app/downloads/ 下载安装完,打开appium,安全性与隐私设置  检测提示: ...

  10. Nginx服务器中配置非80端口的端口转发方法详解

    这篇文章主要介绍了Nginx服务器中配置非80端口的端口转发方法详解,文中使用到了Nginx中的proxy_pass配置项,需要的朋友可以参考下 nginx可以很方便的配置成反向代理服务器: 1 2 ...