APICloud多端開發(fā)原理

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

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

APICloud 整個多端技術的工作原理

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

APICloud 在多端技術的 4 個核心能力：

跨平臺引擎

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

在此期間，跨平臺技術分離出兩個主要方向：

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

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

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

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

跨端JS架構

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

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

APICloud 視圖模型框架是基于標準 H5 子集設計的 DSL 中間語言編程框架，目前具備如下能力：

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

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

全流程開發(fā)工具

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

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

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

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

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

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

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

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

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

以上內容由低代碼開發(fā)平臺 APICloud 提供，想要了解更多推薦學習編程獅（w3cschool.cn）免費課程《APICloud(3.0)-APP&小程序實戰(zhàn)開發(fā)培訓》。