赞
踩
一、说明
手机App的开发方式进入跨平台时代,但目前跨平台的开发方式很多,以至于App开发爱好者在进行技术选型时感到很迷茫,在此对App开发常见的几种方案做一个分析,包括原生开发、混合App、ReactNative、Weex、Flutter、uniapp等,希望能通过此文找到最适合我们项目的开发语言。
内容仅为自己学习过程中的浅薄心得,欢迎指正。
本文主要从“原生开发”和“跨平台技术”两种方式介绍,具体内容请见下文。
二、原生开发
原生应用程序是指某一个移动平台(比如iOS或安卓)所特有的应用,使用相应平台支持的开发工具和语言,并直接调用系统提供的SDK API。比如Android原生应用就是指使用Java或Kotlin语言直接调用Android SDK开发的应用程序;而iOS原生应用就是指通过Objective-C或Swift语言直接调用iOS SDK开发的应用程序。
技术类型 | 优势 | 缺陷 | 代表平台 |
原生开发 | 可访问平台全部功能(GPS、摄像头); 第三方SDK直接支持;可通过webView与网页交互; 速度快、性能高、可以实现复杂动画及绘制,整体用户体验好。 | 平台特定,开发成本高; 不同平台必须维护不同代码,人力成本随之变大; 内容固定,动态化弱,大多数情况下,有新功能更新时只能发版。 | Android、iOS |
三、跨平台技术
传统的纯原生开发已经不能满足需求。主要表现在如下两个方面:
开发团队,版本迭代时,无论人力成本还是测试成本都会变大。
3.1 跨平台技术演进
3.2 跨平台技术的分类
根据跨平台技术的原理,主要可分为如下三类:
3.3 H5 + 原生混合开发
这类框架的主要原理是将APP需要动态变动的一部分内容通过H5来实现,通过原生的网页加载控件 Webview( Android)或 WK Webview(iOS)来加载。这样,H5部分就可以随时改变而不用发版,动态化需求得到满足。同时,由于H5代码只需要一次开发,就能同时在 Android和OS两个平台上正常运行,这也可以降低开发成本。
这类框架里最具有代表性的就是Cordova。
技术特点:
在混合开发中,H5代码是运行在WebView中的,Webview实质上就是一个浏览器器内核,依然运行在一个权限受限的沙箱中,所以对大多数系统能力都没有访向权限,如无法访问文件系统、不能使用蓝牙等,所以,对于H5不能实现的功能,都需要原生来实现。
而混合框架一般都会在原生代码中预先实现一些访问系统能力的API,然后暴露给 Webview以供 Javascript调用,这样一来, Webview就成为 Javascript与原生AP之间通信的桥梁,主要负责 Javascript与原生之间调用消息的传递,而消息的传递必须遵守一个标准的协议,其规定了消息的格式与含义,这种依赖于 Webview的、用于在 Javascript与原生之间通信并实现了某种消息传输协议的工具称为 Webview Javascript Bridge,简称 Jsbridge,它也是混合开发框架的核心.
技术名 | 优点 | 缺陷 | 代表框架 |
H5 + 原生混合开发 | 可以跨平台,可以随时更新发布内容,方便与第三方网页交互 | 无系统访问权限; 无SDK访问权限; 性能差,对于复杂用户界面或动画支持性差 | Cordova、微信小程序 |
3.4 Javascript开发+原生渲染
采用web技术栈,将dom映射为原生控件树,体验好,接近原生,这类框架里最具代表性的为React-Native,React-Native的生态非常强大,它开发出来的,也是真正的原生应用,原理如下:
在React-Native文件中编写的代码,会在内存中生成虚拟DOM对象,然后再通过javaScriptCore映射成原生控件树:
技术名 | 优点 | 缺陷 | 代表框架 |
Javascript开发+原生渲染 | 采用Web开发技术栈,社区庞大、上手快、开发成本相对较低。 原生渲染,性能相比H5提高很多。 | 渲染时需要JavaScript和原生之间通信,在有些场景如拖动可能会因为通信频繁导致卡顿; 需要自编写插件与系统和SDK交互。 | React-native |
3.5自绘UI+原生
这种技术的思路是,通过在不同平台实现一个统一接口的渲染引擎来绘制UI,而不依赖系统原生控件,所以可以做到不同平台UI的一致性。
注意,自绘引擎解决的是UI的跨平台问题,如果涉及其它系统能力调用,依然要涉及原生开发。
技术名 | 优点 | 缺陷 | 代表框架 |
自绘UI+原生 | 性能高;UI外观保真度和一致性高;代码容易维护;不会受原生布局系统的限制,布局系统灵活。 | 动态性不足,不能动态下发代码; 需要自编写插件与原生系统和SDK交互; 与网页交互需要编写插件。 |
这类框架里最具代表性的为Flutter:
Flutter是Google推出并开源的移动应用开发框架,主要特点是跨平台、高保真、有些性能。开发者可以通过Dart语言开发APP,一套代码可以同时运行在iOS和 Android平台以上。Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 Native扩展。同时Flutter还可以使用 Native引擎渲染视图,这无疑能为用户提供良好的体验。
3.5.1跨平台自绘引擎
Flutter与用于构建移动应用程序的其他大多数框架不同,因为 Flutter既不使用Webview,也不使用操作系统的原生控件。相反, Flutter使用自己的高性能渲染引擎来绘制 Widget。这样不仅可以保证在 Android和iOS上UI的一致性,而且可以避免因对原生控件依赖而带来的限制及高昂的维护成本。
3.5.2高性能
Flutter的高性能主要靠两点来保证,首先, Flutter APP采用Dart语言开发。Dart在JIT(即时编译)模式下,速度与 Javascript基本持平。同时Dar还支持AOT,当以AOT模式运行时, Javascript便远远追不上了。
速度的提升对高帧率下的视图数据计算很有帮助。其次, Flutter使用自己的渲染引擎来绘制UI,布局数据等由Dart语言直接控制,所以在布局过程中不需要像RN那样要在 Javascript和 Native之间通信。
Flutter高性能:
Flutter与原生交互原理:
3.6 uniApp
uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
uni-app打包成App后,支持webview渲染和weex原生渲染这2种引擎,可以任由开发者切换使用。
webview渲染方式,架构和微信小程序一样。微信小程序的Hybrid应用框架是业内体验上的标杆,实践证明这种体验足以承载一线互联网开发商获得上亿用户。uni-app的App端体验同微信小程序,超过其他平台的小程序,超过一般的hybrid框架。
原生渲染方式,是DCloud改造了weex引擎,在原生渲染引擎上实现了uni-app的组件和API。达到更优秀的用户体验。
由于有丰富的插件市场,以及支持所有小程序SDK在App端的使用,使得uni-app拥有更庞大的应用生态。
3.7 weex
Weex是一个可以利用web 前端开发技术来实现Android/ios 原生引用的框架,使用 Vue 作为上层框架;
Weex原理:
weex 中文件默认为 .vue ,而 vue 文件是被无法直接运行的,所以 vue 会被编译成 .js 格式的文件,Weex SDK会负责加载渲染这个js文件。Weex可以做到跨三端的原理在于:在开发过程中,代码模式、编译过程、模板组件、数据绑定、生命周期等上层语法是一致的。不同的是在 JS Framework 层的最后,web 平台和 Native 平台,对 Virtual DOM 执行的解析方法是有区别的。
weex 比起react native,主要是在JS V8的引擎上,多了 JS Framework 承当了重要的职责,使得上层具备统一性,可以支持跨三个平台。
技术名 | 优点 | 缺陷 | 代表框架 |
Uni-App | 采用Vue开发技术栈,可以直接编译成小程序、Android和iOS平台,提供Android和iOS平台的sdk,比较适合做原生+web的混合型App开发。 | 性能比原生和自渲染的平台差。 | Uni-app |
四、小结
本文档主要介绍了目前移动开发中用到的技术技术,现在我们从框架角度对比一下它们,如表:
技术类型 | UI渲染方式 | 性能 | 开发效率 | 动态化 | 框架代表 |
原生开发 | 原生渲染 | 最好 | 低 | 不支持 | Android、iOS |
H5 + 原生混合开发 | WebView渲染 | 一般 | 高 | 支持 | Cordova、 Tonic、微信小程序 |
Javascript开发+原生渲染 | 原生控件渲染 | 好 | 高 | 支持 | ReactNative、Weex |
自绘UI+原生 | 调用系统API渲染 | 好 | Flutter高 | 目前不支持 | Flutter |
uni-app | 原生控件渲染 | 好 | 高 | 支持 | uni-app |
注:本文为了方便描述,从网络上引用了部分图片,单纯为了学习使用,如有侵权,请联系删除!
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。