浅谈移动端跨平台开发技术

刘蕾

摘 要 本文以发展历程为脉络，简要介绍了移动端开发的几种典型跨平台开发方案的原理及技术构思，主要有Web混合开发、Cocos2d游戏开发、ReactNative、Flutter等方案。

关键词 移动开发;跨平台;APP开发

前言

目前，市场上的移动端操作系统主要有iOS和Android等;产品形式有应用市场上架的原生应用、使用浏览器访问的Web页面以及内置到微信平台的微信小程序等。随着产品渠道的碎片化加剧，众多产品选择同时提供iOS和Android版，抑或还有Web版。于是便有了跨平台开发诉求，减少平台差异适配工作，降低开发成本。

1移动端原生开发技术栈

从操作系统原生支持能力来讲，开发一款产品所需的技术栈如下：①iOS原生开发语言为Objective-C，支持C/C++，2014年起支持Swift。②Android原生开发语言为Java，支持C/C++，2017年起支持Kotlin。

另外，iOS和Android系统都支持浏览器访问的Web APP，开发语言为HTML/CSS/JavaScript。

原生APP开发模式下，开发者需要根据不同的操作系统搭建开發环境，学习相关开发语言及工具，及各自不同的发布流程和渠道。原生开发的最大优势在于，能够直接调用原生API，如图1-A所示，在系统资源的调度和界面渲染性能上有明显优势。

对于WebAPP，由于各操作系统对浏览器的良好支持，部署更新简单，开发难度小，且Web开发者众多，便成了首选的跨平台方式。为了满足诸如资讯、运营等页面的使用周期短、迭代快的需求，产生了在原生应用程序中内嵌浏览器组件来渲染Web页面应用并实现数据交互的技术方案，这便是混合应用的雏形[1]。

2跨平台开发技术栈

2.1 Web混合应用方案

为了解决原生APP内嵌浏览器组件的Web页面无法使用系统的诸多设备接口数据的问题，如定位、加速传感器等，出现了以PhoneGap/Cordova为代表的混合应用（HybridAPP）方案。其利用JavaScript桥接API，将原生接口的数据或者功能按照规定的格式进行封装，并在桥接API中进行相应的接口注册，实现了Web页面与系统原生服务的双向数据传递，如图1-B所示。此外，Cordova项目针对多平台开发、编译环境配置复杂的问题，结合混合应用“原生壳”和“Web内容”耦合较低的特性，在多平台的编译及打包发布方面提供了一系列的云支持。

2.2 Cocos2d-JS方案

Cocos2d是始于2008年iPhone发展初期的一款移动端游戏开发引擎。Cocos2d-JS对Web平台的支持主要是通过Web引擎Cocos2d-html5做到的，而对原生系统平台的支持是以Cocos2d-x为核心，通过JavaScript编译器SpiderMonkey来执行JavaScript代码，并通过JavaScript绑定技术将其API映射到Cocos2d-x的API上，如图1-C所示。而Cocos2d-x本身则是以C/C++实现的。渲染方面，Cocos2d是在UI线程将场景文件理解成场景树，然后交给GL线程渲染。用户看到的大部分场景都是使用OpenGL/WebGL渲染的，不同平台具有相同表现。

2.3 ReactNative方案

为了改善Web混合项目中页面渲染流程复杂带来的性能问题，2015年初Facebook推出了ReactNative（简称RN）。RN通过JS/JSX建立UI界面的VirtualDOM，调用各自平台的原生UI组件，如图1-D所示。其中JS和原生的数据交互通过JSBridge来实现。而由于不同平台UI组件的接口表现不同，使得不同平台JSBridge不同，维护较为复杂。

2.4 Flutter方案

Flutter是谷歌2018年2月推出的移动UI框架，支持iOS和Android。Flutter上层负责提供UI组件、动画及基础功能接口等，由Dart语言实现;底层引擎负责GUI渲染、Dart运行时等功能，由C/C++实现。其中，Flutter底层GUI渲染所使用的Skia引擎，同样是Android系统的原生GUI渲染引擎。可见，Flutter与Cocos2d-JS相似，都是绕过操作系统提供的UI封装，减少从UI组件布局逻辑到底层图形渲染之间的调用层级，对上层提供统一的调用接口，具有较高的灵活性和渲染性能[2]。

3结束语

本文以移动开发中跨平台技术发展过程中的几个典型方案为例，简要分析了各个方案的原理和技术构思，为开发人员学习理解以及选择跨平台方案提供参考。

参考文献

[1] 宁君宇，袁芳芳，田路强，等.基于flutter的移动应用跨平台开发的研究[J].科技风，2020（16）：88，94.

[2] 周勇，程子清.Flutter的原理深度剖析[J].电脑编程技巧与维护，2018（11）：19-21.