移動端跨平臺方案淺析

前言

本文不涉及到任何代碼，只講概念層面的，結合本人在這幾種技術中（Hybrid App的WebView，Picasso（美團點評內部動態化方案），小程序，Futter）的開發經驗，對這幾種跨平臺技術進行一個淺析。另外我在一段時間里也接觸到了原生網頁開發（html+js+css），算是有些前端開發經驗。

跨平臺技術的由來：

傳統的純原生開發已經不能滿足日益增長的業務需求。主要表現在如下兩個方面：

1)動態化內容需求增大。當需求發生變化時，純原生應用需要通過版本升級來更新內容，但應用上架、審核是需要周期的，這個周期對高速變化的互聯網時代來說是很難接受的，所以，對應用動態化(不發版也可以更新應用內容)的需求就變得迫在眉睫了。

2)業務需求變化快，開發成本變大。由于原生開發一般都要維護 Android、iOS兩個。

本質上跨平臺開發是為了增加代碼復用，減少開發者對多個平臺適配的工作量，降低開發成本，提高業務專注的同時，提供比 web 更好的體驗。

常見的移動端跨平臺方案

Webview

Webview的主要原理是將APP需要動態變動的一部分內容通過H5來實現，通過原生的網頁加載控件 Webview( Android)或 WK Webview(iOS)來加載。這樣，H5部分就可以隨時改變而不用發版，動態化需求得到滿足;同時，由于H5代碼只需要一次開發，就能同時在 Android和OS兩個平臺上正常運行，這也可以降低開發成本，也就是說，H5部分的功能越多，開發成本就越小。我們稱這種H5+原生的開發模式為混合開發，對于采用混合模式開發的APP，我們稱之為混合應用或 Hybrid APP。

html在移動時代到來以后已經有了很多移動端的適配技術，比如Bootstrap，媒體查詢等。所以在一些App彈出的廣告頁面經常是用html寫的。

小程序

包含了RN，Weex，MTRN，Picasso，UniApp，快應用，這些大同小異。核心都是受益于Jscore強大的渲染能力。目前來看小程序是最成功的，其他的在公司中都有應用，但一般都在公司內部用，而且成熟的公司不止一套跨平臺js方案。

拿小程序來舉例

小程序開發本質上還是前端 HTML + CSS + JS 那一套邏輯，它基于 WebView 和微信自己定義的一套 JS/WXML/WXSS/JSON 來開發和渲染頁面。微信官方文檔里提到，小程序運行在三端：iOS、Android 和用于調試的開發者工具，三端的腳本執行環境以及用于渲染非原生組件的環境是各不相同的:

在 iOS 上，小程序的 JavaScript 代碼是運行在 JavaScriptCore 中，是由 WKWebView 來渲染的，環境有 iOS 8+；

在 Android 上，小程序的 JavaScript 代碼是通過 X5 JSCore 來解析，是由 X5 基于 Mobile Chrome 53/57 內核來渲染的；

在 開發工具上， 小程序的 JavaScript 代碼是運行在 nwjs 中，是由 Chrome Webview 來渲染的。

Flutter

Flutter與用于構建移動應用程序的其他大多數框架不同，因為 Flutter既不使用Webview，也不使用操作系統的原生控件。相反， Flutter使用自己的高性能渲染引擎來繪制 Widget。這樣不僅可以保證在 Android和iOS上UI的一致性，而且可以避免因對原生控件依賴而帶來的限制及高昂的維護成本。

Flutter使用ska作為其2D渲染引擎，Skia是 Google的一個2D圖形處理函數庫，包含字形、坐標轉換，以及點陣圖，且都有高效能且簡潔的表現，Skia是跨平臺的，并且其還提供了非常友好的API，目前 Google Chrome瀏覽器和 Android均采用Skia作為其繪圖引擎。目前， Flutter默認支持iOS、 Android、 Fuchsia( Google新的自研操作系統)三個移動平臺。但 Flutter亦可支持Web開發( Flutter for Web)和PC開發。

高性能

Flutter的高性能主要靠兩點來保證，首先， Flutter APP采用Dart語言開發。 Dart 語言比較特殊，因為它可以通過 AOT(Ahead Of Time) 編譯成快速、可預測的本地代碼，也可以通過 JIT(Just In Time) 即時編譯。開發周期快，工作流顛覆常規(包括 Flutter 流行的秒級有狀態熱重載)。其次， Flutter使用自己的渲染引擎來繪制UI，布局數據等由Dart語言直接控制，所以在布局過程中不需要像RN那樣要在 Javascript和 Native之間通信。

這一點在一些滑動和拖動的場景下具有明顯的優勢，因為滑動和拖動的過程往往會引起布局發生變化，所以 Javascript需要與 Native不停地同步布局信息，這與在瀏覽器中要 Javascript頻繁操作DOM所帶來的問題是相同的，都會帶來比較可觀的性能開銷。

重點：Flutter自己有自己的渲染引擎，這樣避免了以上幾種跨平臺技術的通過中間層通信帶來的性能開銷，但是依然避免不了寫原生代碼，因為涉及到平臺差異性如相機的調用，權限的調用仍然要寫代碼來兼容。

對比

總結

移動端的跨平臺似乎是大勢所趨，但沒有一個方案是得到很大的推廣，只能根據自身的業務需要去選擇合適的方案。在我的開發體驗上，Flutter的開發體驗比小程序類的好很多，主要是 1.在控件使用上不必去寫雙端控件適配代碼 2.Flutter沒有js native通信的代碼，在開發效率和性能上較好。在產品開發的快速試錯上，flutter開發速度跟小程序差不多，實現功能的能力上比小程序上好，小程序畢竟跳不出微信的框架。

參考鏈接

微信小程序背后運行原理及技術分析 - 簡書(https://www.jianshu.com/p/ab734656ee77)

第一部分:如何在iOS和Android上選擇一個JavaScript 引擎進行應用開發 - 技術翻譯 - OSCHINA 社區(https://www.oschina.net/translate/how-to-choose-a-javascript-engine-for-ios-and-android-apps?print)

王躍：關于微信小程序的技術，也許你想錯了-InfoQ(https://www.infoq.cn/article/2017/10/wangyue-interview)

為什么我放棄了 Flutter | AnnatarHe’s blog(https://annatarhe.github.io/2018/10/23/why-i-left-flutter.html)

uniapp與flutter，跨平臺解決方案你該如何選擇( https://zhuanlan.zhihu.com/p/55466963 )

移動端跨平臺方案(https://tate-young.github.io/2020/04/30/mobile-cross-platform-solution.html)

Android Flutter web前端 小程序

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。