APP 开发技术该如何选型 ?

海军
• 阅读 2546

APP 开发技术该如何选型 ?

目前 按照 APP 开发分类,分为以下三大类

  • 原生 APP [ Android Swift ]

  • WEB APP

  • Hybrid App [混合 APP ]

在找工作的当中,很多岗位 要求 会开发 H5 App ,那到底什么是H5 APP 呢?

一开始我也有点疑惑,没接触这块,按自己理解 就是 采用 HTML5 技术开发出的页面应用 跑在移动端当中。

下面引用 阮一峰对 H5 开发解释。

真正理解 H5 开发,需要先搞清楚什么是原生 App、什么是 Web App,因为混合 App 是在它们的基础上诞生的

H5 这个词,可以理解成就是混合 App 模型,只不过它特指混合 App 的前端部分。

因为混合 App 的前端就是 HTML5 网页,所以简称 H5。这个词是国内独有的,基本上都是前端程序员在用,国外不用这个词,就直接叫混合 App。

APP 开发技术该如何选型 ?

来对比一下 三种开发模式区别

原生APP

在这里就不讨论原生APP的优点了,想必大家都知道。主要围绕缺点来说

  1. 需要 开发 两套 代码 AndroidIOS

  2. 旧版本出现 bug 无法更新修改,必须用户 下载 更新

  3. 发版审核时间长,无法随时更新


Web APP

优点

  1. 入门简单,成本低 (前端三件套)

  2. 可以同步更新

  3. 可以跨平台

缺点

  1. 不能直接访问设备硬件和离线存储,功能受限( 相机,蓝牙.......)

  2. 音视频体验不好


混合APP

优点

  1. 开发效率高

  2. 更新和部署方便,不需要审核,只需要在服务器端部署

  3. 代码维护方便,版本更新快,成本低

缺点

  1. 需要了解 原生开发 才能更好的开发 H5

  2. 需要熟知 原生开发H5 的各种通信和兼容性问题。

什么是 Hybrid App

Hybrid App [ 混合 APP] 指 原生 APPWEB APP 的结合体。它主要是以 JavaScript + Native [ APP 原生] 两者结合相互调用使用。

混合 App 的原生外壳称为"容器",内部隐藏的浏览器,通常使用系统提供的网页渲染控件(即 WebView 控件),也可以自己内置一个浏览器内核。结构上,混合 App 从上到下分成三层:HTML5 网页层、网页引擎层(本质上是一个隔离的浏览器实例)、容器层。

为什么要采用 Hybrid App

Hybrid App 主要是用来优化 原生APPWEB APP 的缺点诞生的新技术,但也有自己的不足。

优点

  1. 跨平台

    Web 技术是跨平台的,开发者只写一次页面,就能支持多个平台。也就是说,混合 App 只需要一个团队就够了,开发成本较低。

  2. 灵活性

    混合 App 的灵活性大,很容易集成多种功能。一方面,混合 App 很容易加载外部的 H5 页面,实现 App 的插件结构;另一方面,Web 页面可以方便地调用外部的 Web 服务。

  3. 开发方便

    Web 页面的调试和构建,远比原生控件简单省时。页面的更新也容易,只要在服务器上发布新版本,触发容器内更新就可以了。另外,Web 开发人员也比较容易招聘,传统的前端程序员可以承担开发任务。

缺点

  1. 性能不如 原生 APP , 但相对原生 轻量

  2. 页面跨平台,无法保证多平台统一。

  3. 需要 前端人员有 原生开发(IOS/Android) 经验,才能完美的上手开发出体验比较好的 混合APP。

APP 开发技术该如何选型 ?

什么时候 采用 Hybrid App 应用

  • 对于原生性能要求没那么高

  • 企业会根据团队前端技术进行选型

  • ......

混合开发任务分配原则

  1. 业务关联性强的 H5

  2. H5原生 都能做的,尽量使用 H5 来做

  3. H5 做不了的, 原生

  4. 交互性强的 原生 做 [ 体验佳 ]

原生 与 H5 交互

原生 与 H5 交互主要是采用 JSBridge

它给 JavaScript 提供调用 Native 功能的接口,让混合开发中的前端部分可以方便地使用 Native 的功能(例如:地址位置、摄像头)。JSBridge 的功能不止调用 Native 功能这么简单宽泛。实际上,JSBridge 就像其名称中的Bridge的意义一样,是 Native 和非 Native 之间的桥梁,它的核心是构建 Native 和非 Native 间消息通信的通道,而且这个通信的通道是双向的。

双向通信的通道:

  • JS 向 Native 发送消息: 调用相关功能、通知 Native 当前 JS 的相关状态等。

  • Native 向 JS 发送消息: 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。

APP 开发技术该如何选型 ?

最后

  相信看到这里的朋友,对于 APP 技术选型 有 大概了解了,每项技术都有优缺点,主要看这项技术是否满足当前项目业务大部分场景,小部分单独优化处理。

关于 APP 开发,你有何看法?

欢迎来交流群 一起讨论!

APP 开发技术该如何选型 ?

React Hook | 必 学 的 9 个 钩子

Vue权限路由思考

MYSQL常用操作指令

浅聊防抖与节流 实现与应用

深入剖析 JavaScript 闭包

[浏览器系列] :客户端本地存储

TypeScript学习指南(有PDF小书+思维导图)

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
4个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
海军
海军
Lv1
海军,专注Web前端领域开发,分享开发经验与最新前端技术。 微信公众号: 前端自学社区
文章
27
粉丝
10
获赞
33