React Native star 72024 (learn once， run everywhere)

React Native Github
React Native文檔

文檔完善，上手體驗快
社區(qū)活躍，坑基本都被踩過
需要了解 react-native reactJs redux iOS Android JSX
react-native可以實現(xiàn)從零開始開發(fā)一個跨平臺的app
安裝配置很多依賴的工具，相對比較麻煩
BSD + 專利許可證 （百度要求內部全面停止使用 React / React Native 國內大廠正在逐步替換， 創(chuàng)業(yè)公司無影響）

Airbnb在宣布放棄后，F(xiàn)acebook 正在重構 React Native

Weex star 11351 (write once， run everywhere)

Weex Github
Weex文檔

簡介：Weex 是一套簡單易用的跨平臺開發(fā)方案，能以 web 的開發(fā)體驗構建高性能、可擴展的 native 應用，為了做到這些，Weex 與 Vue 合作，使用 Vue 作為上層框架，并遵循 W3C 標準實現(xiàn)了統(tǒng)一的 JSEngine 和 DOM API，這樣一來，你甚至可以使用其他框架驅動 Weex，打造三端一致的 native 應用。
2016年6月開源。

在 weex 中，主要包括三大部分：JS Bridge、Render、Dom，分別對應WXBridgeManager、WXRenderManager、WXDomManager，三部分通過WXSDKManager統(tǒng)一管理。

JS Bridge 主要用來和 JS 端實現(xiàn)進行雙向通信，比如把 JS 端的 dom 結構傳遞給 Dom 線程。Dom 主要是用于負責 dom 的解析、映射、添加等等的操作，最后通知UI線程更新。而 Render 負責在UI線程中對 dom 實現(xiàn)渲染。

weex 所有的標簽也不是真實控件，JS 代碼中所生成存的 dom，最后都是由 Native 端解析，再得到對應的Native控件渲染。

Vuex就是單頁面管理數(shù)據(jù)的框架。
Vue-Router單頁面下，指定跳到某個頁面的管理工具，路由。
weex-ui官方封裝庫
navigator實現(xiàn)頁面跳轉，使用router跳轉效果很差(像web一樣，跳轉動畫需要自己寫)
stream網(wǎng)絡模塊
weex傳值weex 放到url query里 storage全局變量
自定義module weex傳值native 交互傳遞

weex組件少

打包：weex 是通過 webpack 打包出 bundle 文件的。bundle 文件的打包和 entry.js 文件的配置數(shù)量有關，weex 項目的 webpack.common.conf.js 中打包也是區(qū)分了 webConfig 和 weexConfig 的不同打包方式。weexEntry 就是 weex 打包配置的地方，默認有 index 和 entry.js 存在了。如果有需要，可配置上你需要的打包頁面

按照weex官方提供的文檔在Mac下直接搭建開發(fā)環(huán)境很難一次點亮
文檔不友好，很多細節(jié)沒有介紹，直接下載官方案例可以跑起來
需要了解 weex vue iOS Android
weex構建一個新的跨平臺應用，大面積使用了vue的語法，開發(fā)起來簡單
weex主要面向的是web前端開發(fā)者
weex可以實現(xiàn)從零開始開發(fā)一個跨平臺的app也可以集成到現(xiàn)有的app

踩坑：
1.路由掛載
不支持router-link 僅支持事件觸發(fā)
創(chuàng)建router.js 在一個router.js文件中配置所有組件模塊
2.屬性支持 支持不完全
3.build
webpack兩個配置weex-loader vue-router
在weexEntry配置所有的文件

15456304708377.jpg
15456336878354.jpg

Vue
Vue 2.x 在 Weex 和 Web 中的差異
iOS開發(fā)者的Weex偽最佳實踐指北Weex項目實戰(zhàn)及踩坑記錄
超級全的Weex大集合
weex&ReactNative對比

Flutter star 46792

Flutter Github
Flutter文檔

簡介：Flutter是谷歌出品的移動應用SDK，2017年5月發(fā)布 第一個版本，它可以制作高質量的具有原生體驗的跨Android和iOS平臺的應用。也可以基于原有代碼進行開發(fā)，世界各地廣受歡迎，開源且免費。

Fuchsia：谷歌全新的操作系統(tǒng)，F(xiàn)lutter是Fuchsia操作系統(tǒng)構建UI的SDK

Skia：C++開發(fā)的2d圖像繪制引擎，F(xiàn)lutter的底層2D圖像引擎，不同于React Native，Weex之類通過建立JSBridge/JSCore來橋接iOS/Android的原生控件，而是做的比較徹底，直接基于全新的2d圖像引擎Skia來繪制圖像！

Dart：Flutter的開發(fā)語言，是一種強類型、跨平臺的客戶端開發(fā)語言， 2011年10啟動，最新發(fā)布的Dart2.1

與Weex對比
1.JSBridge方案
JSBridge建立了JS和原生控件的雙向通信，就是橋接作用。JS寫一套代碼，引擎底層自動根據(jù)平臺（如iOS、Android）來橋接原生控件渲染。具體步驟概括下面兩步：

• 布局消息傳遞：將虛擬DOM布局信息傳遞給原生；
• 原生根據(jù)布局信息通過對應的原生控件渲染控件樹；

渲染工作交還給了系統(tǒng)，雖然同樣使用類HTML+JS的UI構建邏輯，但是最終會生成對應的自定義原生控件，以充分利用原生控件相對于WebView的較高的繪制效率。與此同時這種策略也將框架本身和App開發(fā)者綁在了系統(tǒng)的控件系統(tǒng)上，不僅框架本身需要處理大量平臺相關的邏輯，隨著系統(tǒng)版本變化和API的變化，開發(fā)者可能也需要處理不同平臺的差異，甚至有些特性只能在部分平臺上實現(xiàn)，這樣框架的跨平臺特性就會大打折扣。

不支持熱重載 不能直連真機調試 （可以下載playground查看效果）
支持熱更新

更適合單頁面/簡單/少底層交互/熱更新需求的頁面的需求快速開發(fā)

2. Flutter方案
   Flutter基于獨有的一套渲染圖像引擎Skia，不需要橋接，不基于WebKit。跨平臺方案解決地比較徹底。

摒棄JSBridge，F(xiàn)lutter是直接編譯成本地代碼，用Skia渲染展示，如同原生的渲染邏輯一樣，無需橋接
實現(xiàn)120fps的渲染性能，運行效率極高
Hot Reload 熱重載 直連真機重載調試 JSBridge需build打包
不支持熱更新Hot Fix
iOS Android Web ReactNative
Flutter 部分的底層功能在 Android 系統(tǒng)上已經(jīng)有實現(xiàn)，因此 Android 上適配要好（Android包要比iOS小很多）

從頭到尾重寫一套跨平臺的UI框架，包括UI控件、渲染邏輯甚至開發(fā)語言。渲染依靠跨平臺的Skia實現(xiàn)，依賴系統(tǒng)的只有圖形繪制相關的接口，可以在最大程度上保證不同平臺、不同設備的體驗一致性，邏輯處理使用支持AOT的Dart語言，執(zhí)行效率也比JavaScript高得多。

更適合開發(fā)整體App

Dart

優(yōu)勢

• 健全的類型系統(tǒng)，同時支持靜態(tài)類型檢查和運行時類型檢查。
• 代碼體積優(yōu)化（Tree Shaking），編譯時只保留運行時需要調用的代碼（不允許反射這樣的隱式引用），所以龐大的Widgets庫不會造成發(fā)布體積過大。
• 豐富的底層庫，Dart自身提供了非常多的庫。
• 多生代無鎖垃圾回收器，專門為UI框架中常見的大量Widgets對象創(chuàng)建和銷毀優(yōu)化。
• 跨平臺，iOS和Android共用一套代碼。
• JIT & AOT運行模式，支持開發(fā)時的快速迭代和正式發(fā)布后最大程度發(fā)揮硬件性能。

基本概念

• 所有變量的值都是對象，也就是類的實例。甚至數(shù)字、函數(shù)和null也都是對象，都繼承自 Object 類。
• 雖然Dart是強類型語言，但是顯式變量類型聲明是可選的，Dart支持類型推斷。如果不想使用類型推斷，可以用 dynamic 類型。
• Dart支持泛型，List表示包含int類型的列表，List則表示包含任意類型的列表。
• Dart支持頂層（top-level）函數(shù)和類成員函數(shù)，也支持嵌套函數(shù)和本地函數(shù)。
• Dart支持頂層變量和類成員變量。
• Dart沒有public、protected和private這些關鍵字，使用下劃線“_”開頭的變量或者函數(shù)，表示只在庫內可見。參考 庫和可見性 。

代碼實例： class CounterState extends State<Counter> { int counter = 0;void increment() { // 告訴Flutter state已經(jīng)改變, Flutter會調用build()，更新顯示 setState(() { counter++; }); }Widget build(BuildContext context) { // 當 setState 被調用時，這個方法都會重新執(zhí)行. // Flutter 對此方法做了優(yōu)化，使重新執(zhí)行變的很快 // 所以你可以重新構建任何需要更新的東西，而無需分別去修改各個widget return new Row( children: <Widget>[ new RaisedButton( onPressed: increment, child: new Text('Increment'), ), new Text('Count: $counter'), ], ); } }

本頁內容由塔燈網(wǎng)絡科技有限公司通過網(wǎng)絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網(wǎng)頁中由涉嫌抄襲的內容，請及時與我們聯(lián)系，并提供相關證據(jù)，工作人員會在5工作日內聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權內容。本文鏈接:http://www.webpost.com.cn/17694.html