介紹跨平臺(tái)技術(shù)分類同時(shí)將進(jìn)一步深度揭示APICloud混合開(kāi)發(fā)技術(shù)的技術(shù)原理。

跨平臺(tái)技術(shù)的分類

目前跨平臺(tái)技術(shù)領(lǐng)域分為兩個(gè)發(fā)展方向：

第一個(gè)是HTML5 + Native混合方向；

第二個(gè)是中間語(yǔ)言編譯方向，其中APICloud和小程序都屬于前者。

HTML5 + Native混合，也就是我們通常所說(shuō)的混合開(kāi)發(fā)。

這種模式的開(kāi)發(fā)主體是HTML5，但整個(gè)app的架構(gòu)是Native架構(gòu)：通過(guò)HTML5 快速實(shí)現(xiàn)app的UI布局、產(chǎn)品業(yè)務(wù)邏輯，在開(kāi)發(fā)過(guò)程中涉及HTML5 無(wú)法實(shí)現(xiàn)或者體驗(yàn)不好的功能，則借助Native模塊來(lái)實(shí)現(xiàn)。

混合開(kāi)發(fā)在保證app渲染效率和用戶體驗(yàn)的同時(shí)，能夠降低app開(kāi)發(fā)成本和復(fù)雜度，提高app開(kāi)發(fā)效率。

中間語(yǔ)言編譯方向，代表產(chǎn)品為React Native（RN），Xamarin以及Google剛剛發(fā)布的Flutter。

如何理解中間語(yǔ)言編譯？

以RN為例，傳統(tǒng)的app開(kāi)發(fā)，要求開(kāi)發(fā)者使用Android和iOS原生技術(shù)-Java、Object-C、C/C++等進(jìn)行開(kāi)發(fā)，而RN的開(kāi)發(fā)過(guò)程則要求開(kāi)發(fā)者使用JS進(jìn)行編碼輸出app，但在app執(zhí)行過(guò)程中，JS又映射回到安卓和iOS原生層面執(zhí)行。借助JS快速實(shí)現(xiàn)編碼，翻譯為原生代碼執(zhí)行，這就是中間語(yǔ)言編譯方向。

Xamarin則要求使用微軟自己的語(yǔ)言C#，對(duì)于大部分開(kāi)發(fā)者而言，C#的學(xué)習(xí)成本比較高且Xamarin需要付費(fèi)使用，因此它目前在國(guó)內(nèi)應(yīng)用比較少。Flutter的開(kāi)發(fā)語(yǔ)言為Dart，它是谷歌發(fā)明的編程語(yǔ)言，這個(gè)語(yǔ)言很有趣，它的語(yǔ)法類似于C語(yǔ)言，又將JS和Java的一些設(shè)計(jì)思想以及語(yǔ)法規(guī)則融合了進(jìn)去。Dart語(yǔ)言在此前應(yīng)用比較少，可參考的資料不多，開(kāi)發(fā)者上手需要一個(gè)過(guò)程。

Html5 到跨平臺(tái)APP應(yīng)用

每一項(xiàng)新興技術(shù)的出現(xiàn)和流行，都是為了規(guī)?；娜ソy(tǒng)一解決一系列復(fù)雜問(wèn)題，APICloud選擇混合開(kāi)發(fā)方向，目的是希望借助HTML5 降低app開(kāi)發(fā)復(fù)雜度，提高app開(kāi)發(fā)效率。

通過(guò)工程化的實(shí)踐手段，我們首先設(shè)計(jì)了一個(gè)app開(kāi)發(fā)引擎。簡(jiǎn)單的向大家介紹一下這個(gè)引擎的架構(gòu)：

整個(gè)引擎基于Android和iOS系統(tǒng)的原生技術(shù)架構(gòu)

最上層為app應(yīng)用層，涉及到業(yè)務(wù)以及功能相關(guān)的部分，要求開(kāi)發(fā)者使用HTML + CSS進(jìn)行UI布局和渲染，功能和業(yè)務(wù)邏輯則通過(guò)JS實(shí)現(xiàn)，這是app開(kāi)發(fā)者直接參與的地方。

第二層則是API層，API層核心的功能是橋接和管理，負(fù)責(zé)JS與Java，JS與Object-C之間的通訊，管理API的分發(fā)，以及一些JS-Framework的加載和執(zhí)行。

引擎與模塊的API通過(guò)這里向開(kāi)發(fā)者開(kāi)放

接下來(lái)是引擎，引擎主要負(fù)責(zé)應(yīng)用的消息命令管理、事件管理、模塊管理、以及UI渲染。

我們通過(guò)將Android和iOS系統(tǒng)的原生窗口機(jī)制抽象出來(lái)，再模擬原生的方式實(shí)現(xiàn)了一個(gè)新的窗口系統(tǒng)，由Widget/Window/Frame/UI Model構(gòu)成，形成混合渲染能力，使得app性能和體驗(yàn)接近原生。

引擎通過(guò)開(kāi)放模塊機(jī)制，支持動(dòng)態(tài)載入模塊，豐富和增強(qiáng)app功能，滿足各式各樣的需求。

最底下則是OS層，OS層中主要涉及Android和iOS系統(tǒng)之間一些不同的特性，是我們要花大量時(shí)間精力進(jìn)行適配和抽象的地方。

除此之外，一個(gè)app還應(yīng)當(dāng)具備符合Android和iOS原生app的生命周期特性，例如：如何啟動(dòng)，啟動(dòng)流程以及生命周期事件分發(fā)等。

以下是app開(kāi)發(fā)引擎對(duì)app生命周期管理的主要處理流程。

引擎觸發(fā)app的生命周期同原生app一致，觸發(fā)點(diǎn)來(lái)自用戶

用戶點(diǎn)擊桌面的某個(gè)圖標(biāo)，或者點(diǎn)擊手機(jī)狀態(tài)欄的某個(gè)通知，系統(tǒng)會(huì)將這個(gè)事件分發(fā)到對(duì)應(yīng)的app，引擎在收到這個(gè)事件后開(kāi)始初始化。

初始化的過(guò)程為：原生窗口系統(tǒng)初始化，展示啟動(dòng)頁(yè)->HTML5 運(yùn)行環(huán)境初始化->加載模塊運(yùn)行環(huán)境->事件及消息隊(duì)列管理初始化->根窗口開(kāi)始渲染，之后開(kāi)始加載HTML5 頁(yè)面，這個(gè)HTML5 頁(yè)面是整個(gè)app的入口。

App啟動(dòng)完畢后進(jìn)入等待狀態(tài)，由用戶的點(diǎn)擊等事件驅(qū)動(dòng)打開(kāi)新的窗口，加載新的模塊，UI更新等。

通過(guò)app開(kāi)發(fā)引擎，初步達(dá)到了使用HTML5 + Native混合開(kāi)發(fā)，提高開(kāi)發(fā)效率的目的，然而實(shí)踐過(guò)程遠(yuǎn)比想象的要復(fù)雜，為此APICloud在專產(chǎn)品層面付出了非凡的努力。