APICloud多端開(kāi)發(fā)原理

在兼容和繼承 APICloud 所有 API、模塊、技術(shù)棧以及用戶體驗(yàn)的基礎(chǔ)上，APICloud 定義了一套新的代碼編寫標(biāo)準(zhǔn)(DSL)：基于標(biāo)準(zhǔn) Web Components 組件化思想，兼容 Vue / React 語(yǔ)法特性，通過(guò)一次編碼，分別編譯為 APP、小程序代碼，實(shí)現(xiàn)多端開(kāi)發(fā)。

APP 代碼使用 DeepEngine3.0 運(yùn)行，全翻譯式的運(yùn)行原理提供完全原生的體驗(yàn)和性能。

APICloud 整個(gè)多端技術(shù)的工作原理

開(kāi)發(fā)者在開(kāi)發(fā)工具中編寫代碼并形成一個(gè)虛擬 dom，通過(guò) webpack、rollup 等編譯工具分別編譯到 app、H5 以及小程序平臺(tái)。在編譯到 app 平臺(tái)時(shí)整個(gè)運(yùn)行基于 V8JavaScript 的引擎去運(yùn)行，加上 avm.js 的共同作用去渲染或者執(zhí)行開(kāi)發(fā)者編寫的代碼，基于瀏覽器或者系統(tǒng)自帶的 webview，代碼借助于 avm.js 直接渲染到瀏覽器或者 webview 真實(shí) dom 上。而對(duì)應(yīng)小程序代碼，則是直接生成小程序語(yǔ)法。

APICloud 在多端技術(shù)的 4 個(gè)核心能力：

跨平臺(tái)引擎

歷經(jīng)近十年的發(fā)展，跨平臺(tái)技術(shù)和生態(tài)如今趨于穩(wěn)定，企業(yè)和開(kāi)發(fā)者對(duì)跨平臺(tái)技術(shù)已形成共識(shí)，并大規(guī)模的應(yīng)用到各種業(yè)務(wù)場(chǎng)景中。

在此期間，跨平臺(tái)技術(shù)分離出兩個(gè)主要方向：

1. 混合方向：即 HTML5 + Native 混合，也就是我們通常說(shuō)的混合開(kāi)發(fā)：通過(guò) HTML5 快速實(shí)現(xiàn) APP 的 UI 布局、業(yè)務(wù)邏輯，在開(kāi)發(fā)過(guò)程中涉及 HTML5 無(wú)法實(shí)現(xiàn)或者體驗(yàn)不好的功能，則借助Native模塊來(lái)實(shí)現(xiàn)。
   該模式的 APP 引擎整體基于 Webview 架構(gòu)，對(duì)前端開(kāi)發(fā)者友好，背靠前端龐大的 JavaScript 生態(tài)，前端開(kāi)發(fā)者無(wú)需學(xué)習(xí)新的技術(shù)即可開(kāi)發(fā) APP。該方向代表技術(shù)為 Cordova、AppMobi、Ionic 等。
2. 中間語(yǔ)言（DSL）編譯方向：開(kāi)發(fā)過(guò)程要求使用特定的語(yǔ)法編寫 APP 代碼，通過(guò)編譯環(huán)境將代碼編譯為 Android / iOS 原生 APP。開(kāi)發(fā)者無(wú)需學(xué)習(xí) Android & iOS 原生技術(shù)以及 Java、Object-C、C/C++ 等復(fù)雜的開(kāi)發(fā)語(yǔ)言即可完成 APP 開(kāi)發(fā)。

該模式的 APP 引擎不依賴 Webview，而是借助Virtual Machine，比如 V8 / JSCore 引擎，通過(guò) JS-Runtime 實(shí)現(xiàn)更為復(fù)雜的代碼邏輯來(lái)滿足交互處理、通信和狀態(tài)管理，同時(shí)擴(kuò)展和完善 JS / Native 的通信機(jī)制、封裝完善的組件和系統(tǒng)能力等，實(shí)現(xiàn)完全原生的渲染。該方向既延續(xù)了前端開(kāi)發(fā)體系，又最大限度保證了渲染的性能，代表技術(shù)為 React Native、Weex。

APICloud DeepEngine 3.0 同時(shí)支持以上兩種技術(shù)模式，允許開(kāi)發(fā)者在同一個(gè)APP中自由選擇使用其中一種方式進(jìn)行開(kāi)發(fā)。

DeepEngine 使用全翻譯式原理，將 Javascript 編譯為 Native API，為 APP 提供完全原生的體驗(yàn)和性能。

跨端JS架構(gòu)

在大前端技術(shù)領(lǐng)域，當(dāng)我們遇到了需要解決重復(fù)性的問(wèn)題時(shí)，通常會(huì)考慮設(shè)計(jì)一個(gè) DSL（Domain-Specific Language）或者抽象出一個(gè)框架層，專門來(lái)解決這些類似的問(wèn)題。使用 DSL 我們并不需要為特定終端編寫多套代碼，還可以利用宿主語(yǔ)言的抽象能力，確保各終端渲染效果的一致性以及對(duì)開(kāi)發(fā)者友好。

常見(jiàn)的 DSL 有：React 支持的 JSX 語(yǔ)法、Vue 定義的 SFC 結(jié)構(gòu)和 ?v-*? 指令集、微信小程序的 WXML/WXS 語(yǔ)法等。這些 DSL 最終被編譯為目標(biāo)代碼，直接發(fā)布于小程序平臺(tái)，或者借助 JS-Runtime 運(yùn)行于 APP 和 Web 瀏覽器。

APICloud 視圖模型框架是基于標(biāo)準(zhǔn) H5 子集設(shè)計(jì)的 DSL 中間語(yǔ)言編程框架，目前具備如下能力：

• Virtual DOM：通過(guò)虛擬 DOM，渲染到不同終端，充分尊重系統(tǒng)特性，為不同終端執(zhí)行差異處理，實(shí)現(xiàn)高效渲染；
• 組件化：高可重用性、可組合性、可維護(hù)性的架構(gòu)設(shè)計(jì)，隱藏了復(fù)雜的 DOM 結(jié)構(gòu)和行為，讓開(kāi)發(fā)者專注于應(yīng)用的功能和外觀；
• 數(shù)據(jù)綁定：輕松將數(shù)據(jù)源綁定到應(yīng)用用戶界面，降低邏輯復(fù)雜性和開(kāi)發(fā)難度；
• 狀態(tài)管理和路由：有效分離用戶界面和數(shù)據(jù)處理，實(shí)現(xiàn)項(xiàng)目的工程化管理；
• 類 Vue 語(yǔ)法和兼容 React JSX，兼具 Vue 的輕巧和 React 的靈活性。

APICloud DSL 最終可編譯為標(biāo)準(zhǔn) JS，通過(guò) DeepEngine 渲染到 APP 端和 Web 端，或者編譯為微信小程序代碼，用于微信小程序平臺(tái)發(fā)布。

全流程開(kāi)發(fā)工具

開(kāi)發(fā)工具作為開(kāi)發(fā)者的“靈魂伴侶”，伴隨在開(kāi)發(fā)者的整個(gè)職業(yè)生涯里。市面上有很多流行且成熟的工具可供多端開(kāi)發(fā)進(jìn)行使用，例如 VSCode、Sublime、WebStorm 等。因多端技術(shù) DSL 的個(gè)性化，如果能夠提供“標(biāo)準(zhǔn)化 + 行業(yè)化 + 定制化”的全流程開(kāi)發(fā)工具，包含完備的編碼、調(diào)試、和發(fā)布功能，則能讓多端開(kāi)發(fā)工作事半功倍，因此諸如微信和支付寶的小程序開(kāi)發(fā)流程中，均提供了符合自己業(yè)務(wù)特色的 IDE。

以 APICloud Studio3 多端開(kāi)發(fā)工具為例，它是基于業(yè)界領(lǐng)先的代碼編輯器 -VSCode 深度定制，支持在 Windows、Mac 和 Linux 系統(tǒng)上運(yùn)行，在兼容 VSCode 所有能力的基礎(chǔ)上：

• 提供舒適的高亮標(biāo)記以及完善的智能幫助提示和自動(dòng)完成功能，支持 APICloud 定義的 DSL 編寫；
• 提供實(shí)時(shí)預(yù)覽和真機(jī)調(diào)試能力，可直接在工具中調(diào)試代碼和預(yù)覽效果，或者使用 Wi-Fi、USB 鏈接真實(shí)的手機(jī)進(jìn)行調(diào)試和功能驗(yàn)證；
• 提供簡(jiǎn)單高效的代碼管理，支持 Git 方式的代碼管理，同時(shí)內(nèi)置 SVN，簡(jiǎn)化了復(fù)雜的 Git 操作；
• 云端一體，同 APICloud 業(yè)務(wù)緊密銜接，保持和云端打通，在本地即可實(shí)現(xiàn)創(chuàng)建/導(dǎo)入項(xiàng)目，云編譯，自定義 Loader，以及模塊管理等操作。

統(tǒng)一編譯環(huán)境

多終端統(tǒng)一編譯環(huán)境，是一系列代碼解析，語(yǔ)法分析，翻譯，重構(gòu)等工具的集合，負(fù)責(zé)將 DSL 編譯為目標(biāo)編程語(yǔ)言，例如將 Less 編譯為 CSS。在多端技術(shù)領(lǐng)域，多端編譯環(huán)境則負(fù)責(zé)將 DSL 編譯為可在 JS 引擎或者 Web 瀏覽器中執(zhí)行的標(biāo)準(zhǔn) JS 和 Html 代碼，以及編譯為符合微信或者支付寶等小程序技術(shù)標(biāo)準(zhǔn)的代碼。

編譯成功的標(biāo)準(zhǔn) JS 代碼運(yùn)行于跨平臺(tái) APP 引擎中，實(shí)現(xiàn) APP 端功能；小程序代碼可直接用于發(fā)布到微信或者支付寶小程序平臺(tái)，實(shí)現(xiàn)小程序端功能；Html 代碼則可作為 Web 端發(fā)布。由此達(dá)到一套代碼，可同時(shí)部署到 APP、小程序、H5 端的目的。

目前常見(jiàn)的多終端編譯環(huán)境有：

• Mpvue（美團(tuán)）：支持將 Vue 語(yǔ)法編譯為小程序和 H5，支持微信、支付寶等小程序
• Taro（京東）：支持將 React 語(yǔ)法編譯為小程序和 H5，支持微信、支付寶等小程序，同時(shí)支持生成 React Native APP
• Hippy（騰訊）：同時(shí)支持將 Vue 和 React 語(yǔ)法編譯為微信小程序和 H5
• Chameleon（滴滴）：支持將其 CML 語(yǔ)法編譯到 Web、小程序、Weex APP 等多種終端

APICloud 多終端編譯環(huán)境目前支持使用類 Html5 技術(shù)實(shí)現(xiàn)多終端開(kāi)發(fā)，無(wú)需搭建特定的終端編譯環(huán)境，一鍵云端編譯即可生成高質(zhì)量目標(biāo)終端代碼，可用性高，有利于二次開(kāi)發(fā)。支持編譯為 Android / iOS APP、微信小程序以及標(biāo)準(zhǔn) H5。

以上內(nèi)容由低代碼開(kāi)發(fā)平臺(tái) APICloud 提供，想要了解更多推薦學(xué)習(xí)編程獅（w3cschool.cn）免費(fèi)課程《APICloud(3.0)-APP&小程序?qū)崙?zhàn)開(kāi)發(fā)培訓(xùn)》。