APP 开发技术该如何选型 ?

海军 等级 1454 0 0

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小书+思维导图)

收藏
评论区

相关推荐

Android通过URL打开Activity
关注公众号 QXF069 为每个 Activity 绑定一个 url 可以方便的让第三方 app 直接打开这些 Activity。也可以方便在 app 内部进行页面跳转,解耦。 背景 举一个常见的案例,假设我们有个产品 A,产品 A 包含 h5 网页端和客户端,当用户在手机打开我们的 h5 网页端的时候,我们会期望如果用户手机安装了我们的客户端,则直接打
APP 开发技术该如何选型 ?
目前 按照 APP 开发分类,分为以下三大类 原生 APP  \[ Android Swift  \] WEB APP Hybrid App \[混合 APP  \] 在找工作的当中,很多岗位 要求 会开发 H5 App ,那到底什么是H5 APP 呢?一开始我也有点疑惑,没接触这块,按自己理解 就是 采用 HTML5 技术
APP-H5- 小程序区别 (转载)
APP、H5 、小程序区别 ============= ●运行环境 原生App直接运行在操作系统的单独进行中(安卓中可以开启多进程),而小程序运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对性做了优化,配合自已定义的开发语言标准,提升了小程序的性能 。是一种应用,并非完整的浏览器,只用到一部分H5技术,无法调用window对象和docu
H5唤醒APP
Android使用iframe唤起,ios采用window.location.href唤起更合适一点。 1.ios系统:  在wap中唤起app其实应用最最广泛的并不是Universal Link,而是直接Schema跳转  window.location.href = "taobao://fulushuka.tmall.com/shop/view\_
H5调取APP或跳转至下载
#### 来源:   最近在配合移动端做几个详情页h5分享页面,需要调取App并跳转至app详情页, 如果没有安装App,需要判断引导至下载页面。 #### 参考文档: [https://juejin.im/post/5b7efb2ee51d45388b6af96c](https://www.oschina.net/action/GoToLink?u
H5性能优化方面的探索
H5性能优化方面的探索 =========== > H5很重要,很重要,很重要,重要的事情必须重复多遍,H5的优点:跨平台、迭代快、开发体验好。缺点:加载慢,用户体验差。所以在接下来很长一段时间内我将会从H5的几个缺点发面去研究如何优化。 一、缓存问题及其解决办法 ------------ 经常遇到一个问题,H5页面由于缓存问题经常在H5发布新版本之后
APP Inventor 基于网络微服务器的即时通信APP
APP Inventor 基于网络微服务器的即时通信APP ============================= 一、总结 ---- ### 一句话总结:(超低配版的QQ,逃~) ### 1、APP Inventor是什么? ##### google ##### 傻瓜式 编程 ##### 手机 app App Inventor是一款谷歌公
Android与H5混合开发
        Android 和 H5 在移动开发应用中非常广泛。市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力,且具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以App和H5页面相结合就显得尤为重要。而android
App的定位和目标
 在企业开发App之前,就应该明白好App的定位和目的。下面就App的定位和目的做剖析:   首先我们要明白,App的定位是指企业预估App在用户心目中的位置和形象。而目的是指企业希望经过这个App完成的什么效果。   App的定位和目的是相辅相成的关系,目的是定位的引导,定位精确才能完成目的。对于App的定位来说,有企业战略工具、企业员
H5 App实现热更新,不需要重新安装app
直接上代码吧,你竟然搜到了我的文章就应该知道了,为什么要热更新 //app热更新下载 //假定字符串的每节数都在5位以下 function toNum(a) { //也可以这样写 var c=a.split(/\./); var c = a.split('.'); var num_place = [""
H5接入app准入报告
功能标准 ![](http://static.oschina.net/uploads/space/2016/0725/160658_qiJY_1032182.png) ![](http://static.oschina.net/uploads/space/2016/0725/160850_gQgJ_1032182.png) iPhone性能标准 ![
Hybrid App从概念到实战
      最近一直在准备找工作,看了很多公司的招聘介绍,有相当一部分直接写:熟悉 Hybrid App 开发加分!正好,我司开发的就有这种 Hybrid App——使用 WebViewJavascriptBridge 通信,前端封装一些常用方法调用。       现在的 app 开发,已经不在是以前一样所以页面都是有原生开发,基于应用的更新上线繁琐,由于
IOS和android交互
第一次做和原生app的混合开发,其中有一些活动页面需要我这边用h5来做。 那么必定涉及一个问题。就是和原生app做交互。 分为ios和android。方法不同,逻辑思路都差不多。 大体思路就是我和app端约定一个方法,类似于?接头暗号? 比如说我们约定了一个方法:’蓝天白云‘,那么当我js调用这个方法的时候,app端通过'蓝天白云',认出了我,并作出
Native地图与Web融合技术的应用与实践
![](https://oscimg.oschina.net/oscnet/up-aad2c4fa385750c08df2ae9ab139e03c96b.JPEG) 1\. 背景 ------ 美团打车业务很早就在美团App与点评App中提供了服务入口,并在技术上采用了H5与Native的混合开发技术。随着业务上线,有用户反馈我们的地图性能有一些问题,原
外卖跑腿系统-H5+小程序+APP+PC
外卖跑腿系统H5+小程序+APP+PC,打造吃喝玩乐购”一站式“生活圈·外卖跑腿系统打造本地万能生活服务平台,搭建集线上外卖点餐、团购线下消费、物流电商、裂变营销、跑腿配送于一体的线上外送服务,成熟的O2O系统,轻松接轨“互联网+”。·用户端(H5+小程序)打通微信生态公众号+小程序流量入口,无需用户下载app,降低营销成本,加快用户裂变速度,提高复购率。微