從 iPhone 誕生至今，智能手機風靡全球已將近20年，智能手機操作系統 iOS 和 Android 也成為當仁不讓的頂流般的存在，而作為其背後的靈魂，移動應用也隨着技術的發展已經越來越豐富。如果從技術層面來講，移動 App 也從最開始單一的原生開發（Native App）模式，演變出了混合開發（Hybird App）、網頁應用開發（Web App），為什麼會有這種發展的變化呢？
因為原有的 Native App 有一個明顯的痛點，就是相同的功能需要在不同的平台上都實現一遍，所以就有了一個很迫切的需求，能否只需要寫一次代碼，就可以在各個端都運行？
移動跨平台的邏輯
跨平台開發從本質上講是為了增加業務代碼的復用率，減少因為要適配多個平台帶來的工作量，從而降低開發成本。在提高業務專註度的同時，能夠為用戶提供一致的用戶體驗，實現“多快好省”的效果。
跨平台是跨哪些平台？怎麼樣的跨平台邏輯？從當前的實際情況來看，移動端跨平台需求主要集中在以下3點：
- 桌面端跨移動端：桌面向移動端過渡的早期，希望 PC Web 與移動 Web 復用同一套代碼。
- Native 跨 Web：一套功能差不多的 Web 頁能夠在端外訪問，需要跨 Native App 與 Web。
- 跨系統雙端：出於開發效率等原因，希望 Android、iOS 雙端復用一套業務代碼，這也是目前主要的需求點。
而放眼未來，我們預見可能還會有這些跨平台需求：
- 跨小程序/輕應用：即用即走的輕量級應用，如各平台的小程序、 Android 快應用、iOS App Clips。
- 跨 IoT 設備：各種有顯示屏的設備都會成為新的入口，如車載設備、智能電視等。
移動跨平台方案的發展
不僅是移動應用的開發模式在持續的演變，跨平台開發方案也緊緊的跟隨着開發模式的變化持續的演進，按照技術的發展，跨平台方案可以分為三個時代。
1、Web 容器時代
基於 Web 相關技術通過瀏覽器組件來實現界面及功能，典型的框架包括 Cordova、Ionic 和微信小程序。Web 時代的方案，主要採用的是原生應用內嵌瀏覽器控件 WebView的方式進行 HTML5 頁面渲染，並定義 HTML5 與原生代碼交互協議，將部分原生系統能力暴露給 HTML5，從而擴展 HTML5 的邊界。這類交互協議，就是我們通常說的 JS Bridge。
Web 容器時代
2、泛 Web 容器時代
採用類 Web 標準進行開發，但在運行時把繪製和渲染交由原生系統接管的技術，代表框架有 React Native、Weex 和快應用等。過渡到泛 Web 容器時代，優化了 Web 容器時代的加載、解析和渲染這三大過程，把影響它們獨立運行的 Web 標準進行了裁剪，以相對簡單的方式支持了構建移動端頁面必要的 Web 標準（如 Flexbox 等），也保證了便捷的前端開發體驗；同時，這個時代的解決方案基本上完全放棄了瀏覽器控件渲染，而是採用原生自帶的 UI 組件實現代替了核心的渲染引擎，僅保持必要的基本控件渲染能力，從而使得渲染過程更加簡化，也保證了良好的渲染性能。
泛 Web 容器時代
3、自繪引擎時代
自帶渲染引擎，客戶端僅提供一塊畫布即可獲得從業務邏輯到功能呈現的多端高度一致的渲染體驗。Flutter，是為數不多的代表。Flutter 開闢了一種全新的思路，即從頭到尾重寫一套跨平台的 UI 框架，包括渲染邏輯，甚至是開發語言。
自繪引擎時代
移動跨平台技術方案的對比
對比現有的跨平台技術和解決方案也可以分為三類，分別是 Web 跨端、容器跨端、小程序跨端。
1、Web 跨端
Web 跨端比較好理解，因為 Web 與生俱來就有跨端的能力，因為只要有瀏覽器或 WebView，現在絕大多數端上（甚至包括封閉的小程序生態）都支持 Webview，所以只要開發網頁然後投放到多個端即可輕鬆跨平台，例如 Web App、PWA（Progressive Web Apps）、Hybrid App、PHA（Progress Hybrid App）。
優點：
- 沒有額外的學習成本，一套基礎技術吃天下
- 不依賴特殊的配套設施，從開發、調試到運維等所有工程化環節都是通用的
- 背靠 npm 龐大的生態，百萬模塊，應有盡有
缺點：
- 經常會遇到白屏、卡頓等情況，用戶的體驗不佳
- 無法調用系統的權限，例如多媒體、藍牙、相機等
- 性能不好，對內存的消耗大
2、容器跨端
另一種統一多端的思路是將 Native 定製成標準容器，讓同一份代碼跑在一個個標準容器中。比較典型的代表是React Native 、Flutter、Weex，這類方案通過儘可能的取長補短，綜合了 Web 生態和 Native 組件，讓 JS 執行代碼後用 Native 的組件進行渲染，以解決拋棄 Web 歷史包袱的問題。
具體來講 React Native 可以跨 Android、iOS、Web、Windows 四端，Flutter 可以跨 Android、iOS、Web、Linux 四端，Weex 可以跨 Android、iOS、Web 三端。
優點：
- Flutter 快速的開發，富有表現力的精美UI和類似本機的性能
- React Native 專註於用戶界面，使應用程序開發人員能夠構建高度可靠的界面
- Weex 頁面就像開發普通網頁一樣；在渲染 Weex 頁面時和渲染原生頁面一樣
缺點：
- React Native 沒有提供的需要自定義的應用，仍然需要使用原生開發
- Flutter 構建的應用程序文件很大，沒有廣泛的資源基礎，這意味着可能找不到開發所需的第三方庫和包
- Weex 由於起步比較晚，社區活躍度不如RN，資料和開源項目也相對較少
3、小程序跨端
小程序跨端也比較好理解，就是讓同樣代碼的小程序能夠運行在多個 App 中，例如開發完一個小程序除了讓其運行在微信之外，還能運行在支付寶、百度等超級App，甚至是自己的 App 中。
如果說小程序仍然是依靠 Web 技術運行的，那為什麼還要單獨去使用小程序呢？就像前面所說到的一樣，Web 始終沒法調用例如相機、藍牙等這樣的權限，並且用戶使用體驗會收到一定的影響。而小程序則不同，小程序具有強大的 Web 渲染引擎、提供豐富組件、支持本地緩存、避免 DOM 泄露等，並且其初衷是開放，例如微信、支付寶這樣的超級 App 也都相繼開放了小程序上架能力，小程序逐漸成為跨 App 的正規方式。
後期也甚至出現了例如 FinClip 這樣的小程序容器，可以讓個人或企業自己的 App 具備小程序的運行能力，讓其他 App 能夠具有超級 App 一致的小程序跨端能力。
優勢：
- 具備類似 Native App 的體驗度，使用較為流暢絲滑
- 可以獲取用戶的相冊、多媒體、藍牙等基礎權限
- 可以通過便捷化的上下架方式完成相關頁面和業務的熱更新
缺點：
- 大平台的框架標準不統一，會稍微有影響，但都大同小異，W3C也在做小程序的標準化工作
- 部分的插件會用到原生相關的技術
