淺談移動端跨平臺開發(fā)技術(shù)

劉蕾

摘 要 本文以發(fā)展歷程為脈絡(luò)，簡要介紹了移動端開發(fā)的幾種典型跨平臺開發(fā)方案的原理及技術(shù)構(gòu)思，主要有Web混合開發(fā)、Cocos2d游戲開發(fā)、ReactNative、Flutter等方案。

關(guān)鍵詞 移動開發(fā);跨平臺;APP開發(fā)

前言

目前，市場上的移動端操作系統(tǒng)主要有iOS和Android等;產(chǎn)品形式有應(yīng)用市場上架的原生應(yīng)用、使用瀏覽器訪問的Web頁面以及內(nèi)置到微信平臺的微信小程序等。隨著產(chǎn)品渠道的碎片化加劇，眾多產(chǎn)品選擇同時提供iOS和Android版，抑或還有Web版。于是便有了跨平臺開發(fā)訴求，減少平臺差異適配工作，降低開發(fā)成本。

1移動端原生開發(fā)技術(shù)棧

從操作系統(tǒng)原生支持能力來講，開發(fā)一款產(chǎn)品所需的技術(shù)棧如下：①iOS原生開發(fā)語言為Objective-C，支持C/C++，2014年起支持Swift。②Android原生開發(fā)語言為Java，支持C/C++，2017年起支持Kotlin。

另外，iOS和Android系統(tǒng)都支持瀏覽器訪問的Web APP，開發(fā)語言為HTML/CSS/JavaScript。

原生APP開發(fā)模式下，開發(fā)者需要根據(jù)不同的操作系統(tǒng)搭建開發(fā)環(huán)境，學(xué)習(xí)相關(guān)開發(fā)語言及工具，及各自不同的發(fā)布流程和渠道。原生開發(fā)的最大優(yōu)勢在于，能夠直接調(diào)用原生API，如圖1-A所示，在系統(tǒng)資源的調(diào)度和界面渲染性能上有明顯優(yōu)勢。

對于WebAPP，由于各操作系統(tǒng)對瀏覽器的良好支持，部署更新簡單，開發(fā)難度小，且Web開發(fā)者眾多，便成了首選的跨平臺方式。為了滿足諸如資訊、運營等頁面的使用周期短、迭代快的需求，產(chǎn)生了在原生應(yīng)用程序中內(nèi)嵌瀏覽器組件來渲染W(wǎng)eb頁面應(yīng)用并實現(xiàn)數(shù)據(jù)交互的技術(shù)方案，這便是混合應(yīng)用的雛形[1]。

2跨平臺開發(fā)技術(shù)棧

2.1 Web混合應(yīng)用方案

為了解決原生APP內(nèi)嵌瀏覽器組件的Web頁面無法使用系統(tǒng)的諸多設(shè)備接口數(shù)據(jù)的問題，如定位、加速傳感器等，出現(xiàn)了以PhoneGap/Cordova為代表的混合應(yīng)用（HybridAPP）方案。其利用JavaScript橋接API，將原生接口的數(shù)據(jù)或者功能按照規(guī)定的格式進(jìn)行封裝，并在橋接API中進(jìn)行相應(yīng)的接口注冊，實現(xiàn)了Web頁面與系統(tǒng)原生服務(wù)的雙向數(shù)據(jù)傳遞，如圖1-B所示。此外，Cordova項目針對多平臺開發(fā)、編譯環(huán)境配置復(fù)雜的問題，結(jié)合混合應(yīng)用“原生殼”和“Web內(nèi)容”耦合較低的特性，在多平臺的編譯及打包發(fā)布方面提供了一系列的云支持。

2.2 Cocos2d-JS方案

Cocos2d是始于2008年iPhone發(fā)展初期的一款移動端游戲開發(fā)引擎。Cocos2d-JS對Web平臺的支持主要是通過Web引擎Cocos2d-html5做到的，而對原生系統(tǒng)平臺的支持是以Cocos2d-x為核心，通過JavaScript編譯器SpiderMonkey來執(zhí)行JavaScript代碼，并通過JavaScript綁定技術(shù)將其API映射到Cocos2d-x的API上，如圖1-C所示。而Cocos2d-x本身則是以C/C++實現(xiàn)的。渲染方面，Cocos2d是在UI線程將場景文件理解成場景樹，然后交給GL線程渲染。用戶看到的大部分場景都是使用OpenGL/WebGL渲染的，不同平臺具有相同表現(xiàn)。

2.3 ReactNative方案

為了改善Web混合項目中頁面渲染流程復(fù)雜帶來的性能問題，2015年初Facebook推出了ReactNative（簡稱RN）。RN通過JS/JSX建立UI界面的VirtualDOM，調(diào)用各自平臺的原生UI組件，如圖1-D所示。其中JS和原生的數(shù)據(jù)交互通過JSBridge來實現(xiàn)。而由于不同平臺UI組件的接口表現(xiàn)不同，使得不同平臺JSBridge不同，維護較為復(fù)雜。

2.4 Flutter方案

Flutter是谷歌2018年2月推出的移動UI框架，支持iOS和Android。Flutter上層負(fù)責(zé)提供UI組件、動畫及基礎(chǔ)功能接口等，由Dart語言實現(xiàn);底層引擎負(fù)責(zé)GUI渲染、Dart運行時等功能，由C/C++實現(xiàn)。其中，F(xiàn)lutter底層GUI渲染所使用的Skia引擎，同樣是Android系統(tǒng)的原生GUI渲染引擎?？梢?，F(xiàn)lutter與Cocos2d-JS相似，都是繞過操作系統(tǒng)提供的UI封裝，減少從UI組件布局邏輯到底層圖形渲染之間的調(diào)用層級，對上層提供統(tǒng)一的調(diào)用接口，具有較高的靈活性和渲染性能[2]。

3結(jié)束語

本文以移動開發(fā)中跨平臺技術(shù)發(fā)展過程中的幾個典型方案為例，簡要分析了各個方案的原理和技術(shù)構(gòu)思，為開發(fā)人員學(xué)習(xí)理解以及選擇跨平臺方案提供參考。

參考文獻(xiàn)

[1] 寧君宇，袁芳芳，田路強，等.基于flutter的移動應(yīng)用跨平臺開發(fā)的研究[J].科技風(fēng)，2020（16）：88，94.

[2] 周勇，程子清.Flutter的原理深度剖析[J].電腦編程技巧與維護，2018（11）：19-21.