淺談移動(dòng)端跨平臺(tái)開發(fā)技術(shù)

劉蕾

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

關(guān)鍵詞 移動(dòng)開發(fā);跨平臺(tái);APP開發(fā)

前言

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

1移動(dòng)端原生開發(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)勢(shì)在于，能夠直接調(diào)用原生API，如圖1-A所示，在系統(tǒng)資源的調(diào)度和界面渲染性能上有明顯優(yōu)勢(shì)。

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

2跨平臺(tái)開發(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)的接口注冊(cè)，實(shí)現(xiàn)了Web頁面與系統(tǒng)原生服務(wù)的雙向數(shù)據(jù)傳遞，如圖1-B所示。此外，Cordova項(xiàng)目針對(duì)多平臺(tái)開發(fā)、編譯環(huán)境配置復(fù)雜的問題，結(jié)合混合應(yīng)用“原生殼”和“Web內(nèi)容”耦合較低的特性，在多平臺(tái)的編譯及打包發(fā)布方面提供了一系列的云支持。

2.2 Cocos2d-JS方案

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

2.3 ReactNative方案

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

2.4 Flutter方案

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

3結(jié)束語

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

參考文獻(xiàn)

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

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