跨平臺開發(fā)從本質(zhì)上講是為了增加業(yè)務(wù)代碼的復(fù)用率，減少因為要適配多個平臺帶來的工作量，從而降低開發(fā)成本。在提高業(yè)務(wù)專注度的同時，能夠為用戶提供一致的用戶體驗，實現(xiàn)“多快好省”的效果。
跨平臺是跨哪些平臺？怎么樣的跨平臺邏輯？從當(dāng)前的實際情況來看，移動端跨平臺需求主要集中在以下3點：
- 桌面端跨移動端：桌面向移動端過渡的早期，希望 PC Web 與移動 Web 復(fù)用同一套代碼。
- Native 跨 Web：一套功能差不多的 Web 頁能夠在端外訪問，需要跨 Native App 與 Web。
- 跨系統(tǒng)雙端：出于開發(fā)效率等原因，希望 Android、iOS 雙端復(fù)用一套業(yè)務(wù)代碼，這也是目前主要的需求點。
而放眼未來，我們預(yù)見可能還會有這些跨平臺需求：
- 跨小程序/輕應(yīng)用：即用即走的輕量級應(yīng)用，如各平臺的小程序、 Android 快應(yīng)用、iOS App Clips。
- 跨 IoT 設(shè)備：各種有顯示屏的設(shè)備都會成為新的入口，如車載設(shè)備、智能電視等。
移動跨平臺方案的發(fā)展
不僅是移動應(yīng)用的開發(fā)模式在持續(xù)的演變，跨平臺開發(fā)方案也緊緊的跟隨著開發(fā)模式的變化持續(xù)的演進(jìn)，按照技術(shù)的發(fā)展，跨平臺方案可以分為三個時代。
1、Web 容器時代
基于 Web 相關(guān)技術(shù)通過瀏覽器組件來實現(xiàn)界面及功能，典型的框架包括 Cordova、Ionic 和微信小程序。Web 時代的方案，主要采用的是原生應(yīng)用內(nèi)嵌瀏覽器控件 WebView的方式進(jìn)行 HTML5 頁面渲染，并定義 HTML5 與原生代碼交互協(xié)議，將部分原生系統(tǒng)能力暴露給 HTML5，從而擴(kuò)展 HTML5 的邊界。這類交互協(xié)議，就是我們通常說的 JS Bridge。
2、泛 Web 容器時代
采用類 Web 標(biāo)準(zhǔn)進(jìn)行開發(fā)，但在運行時把繪制和渲染交由原生系統(tǒng)接管的技術(shù)，代表框架有 React Native、Weex 和快應(yīng)用等。過渡到泛 Web 容器時代，優(yōu)化了 Web 容器時代的加載、解析和渲染這三大過程，把影響它們獨立運行的 Web 標(biāo)準(zhǔn)進(jìn)行了裁剪，以相對簡單的方式支持了構(gòu)建移動端頁面必要的 Web 標(biāo)準(zhǔn)（如 Flexbox 等），也保證了便捷的前端開發(fā)體驗；同時，這個時代的解決方案基本上完全放棄了瀏覽器控件渲染，而是采用原生自帶的 UI 組件實現(xiàn)代替了核心的渲染引擎，僅保持必要的基本控件渲染能力，從而使得渲染過程更加簡化，也保證了良好的渲染性能。
?
3、自繪引擎時代
自帶渲染引擎，客戶端僅提供一塊畫布即可獲得從業(yè)務(wù)邏輯到功能呈現(xiàn)的多端高度一致的渲染體驗。Flutter，是為數(shù)不多的代表。Flutter 開辟了一種全新的思路，即從頭到尾重寫一套跨平臺的 UI 框架，包括渲染邏輯，甚至是開發(fā)語言。
移動跨平臺技術(shù)方案的對比
對比現(xiàn)有的跨平臺技術(shù)和解決方案也可以分為三類，分別是 Web 跨端、容器跨端、小程序跨端。
1、Web 跨端
Web 跨端比較好理解，因為 Web 與生俱來就有跨端的能力，因為只要有瀏覽器或 WebView，現(xiàn)在絕大多數(shù)端上（甚至包括封閉的小程序生態(tài)）都支持 Webview，所以只要開發(fā)網(wǎng)頁然后投放到多個端即可輕松跨平臺，例如 Web App、PWA（Progressive Web Apps）、Hybrid App、PHA（Progress Hybrid App）。
優(yōu)點：
- 沒有額外的學(xué)習(xí)成本，一套基礎(chǔ)技術(shù)吃天下
- 不依賴特殊的配套設(shè)施，從開發(fā)、調(diào)試到運維等所有工程化環(huán)節(jié)都是通用的
- 背靠 npm 龐大的生態(tài)，百萬模塊，應(yīng)有盡有
缺點：文章來源地址http://www.zghlxwxcb.cn/news/detail-493741.html
- 經(jīng)常會遇到白屏、卡頓等情況，用戶的體驗不佳
- 無法調(diào)用系統(tǒng)的權(quán)限，例如多媒體、藍(lán)牙、相機(jī)等
- 性能不好，對內(nèi)存的消耗大
2、容器跨端
另一種統(tǒng)一多端的思路是將 Native 定制成標(biāo)準(zhǔn)容器，讓同一份代碼跑在一個個標(biāo)準(zhǔn)容器中。比較典型的代表是React Native 、Flutter、Weex，這類方案通過盡可能的取長補(bǔ)短，綜合了 Web 生態(tài)和 Native 組件，讓 JS 執(zhí)行代碼后用 Native 的組件進(jìn)行渲染，以解決拋棄 Web 歷史包袱的問題。
具體來講 React Native 可以跨 Android、iOS、Web、Windows 四端，F(xiàn)lutter 可以跨 Android、iOS、Web、Linux 四端，Weex 可以跨 Android、iOS、Web 三端。
優(yōu)點：
- Flutter 快速的開發(fā)，富有表現(xiàn)力的精美UI和類似本機(jī)的性能
- React Native 專注于用戶界面，使應(yīng)用程序開發(fā)人員能夠構(gòu)建高度可靠的界面
- Weex 頁面就像開發(fā)普通網(wǎng)頁一樣；在渲染 Weex 頁面時和渲染原生頁面一樣
缺點：
- React Native 沒有提供的需要自定義的應(yīng)用，仍然需要使用原生開發(fā)
- Flutter 構(gòu)建的應(yīng)用程序文件很大，沒有廣泛的資源基礎(chǔ)，這意味著可能找不到開發(fā)所需的第三方庫和包
- Weex 由于起步比較晚，社區(qū)活躍度不如RN，資料和開源項目也相對較少
3、小程序跨端
小程序跨端也比較好理解，就是讓同樣代碼的小程序能夠運行在多個 App 中，例如開發(fā)完一個小程序除了讓其運行在微信之外，還能運行在支付寶、百度等超級App，甚至是自己的 App 中。
如果說小程序仍然是依靠 Web 技術(shù)運行的，那為什么還要單獨去使用小程序呢？就像前面所說到的一樣，Web 始終沒法調(diào)用例如相機(jī)、藍(lán)牙等這樣的權(quán)限，并且用戶使用體驗會收到一定的影響。而小程序則不同，小程序具有強(qiáng)大的 Web 渲染引擎、提供豐富組件、支持本地緩存、避免 DOM 泄露等，并且其初衷是開放，例如微信、支付寶這樣的超級 App 也都相繼開放了小程序上架能力，小程序逐漸成為跨 App 的正規(guī)方式。
后期也甚至出現(xiàn)了例如 FinClip 這樣的小程序容器，可以讓個人或企業(yè)自己的 App 具備小程序的運行能力，讓其他 App 能夠具有超級 App 一致的小程序跨端能力。同時通過Flutter、Taro、 kbone等開發(fā)出來的小程序均可在FinClip當(dāng)中運行。
優(yōu)勢：文章來源：http://www.zghlxwxcb.cn/news/detail-493741.html
- 具備類似 Native App 的體驗度，使用較為流暢絲滑
- 可以獲取用戶的相冊、多媒體、藍(lán)牙等基礎(chǔ)權(quán)限
- 可以通過便捷化的上下架方式完成相關(guān)頁面和業(yè)務(wù)的熱更新
缺點：
- 大平臺的框架標(biāo)準(zhǔn)不統(tǒng)一，會稍微有影響，但都大同小異，W3C也在做小程序的標(biāo)準(zhǔn)化工作
- 部分的插件會用到原生相關(guān)的技術(shù)
到了這里，關(guān)于跨平臺開發(fā)方案的三個時代的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
