React Native star 72024 (learn once， run everywhere)

React Native Github
React Native文檔

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

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

Weex star 11351 (write once， run everywhere)

Weex Github
Weex文檔

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

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

JS Bridge 主要用來(lái)和 JS 端實(shí)現(xiàn)進(jìn)行雙向通信，比如把 JS 端的 dom 結(jié)構(gòu)傳遞給 Dom 線程。Dom 主要是用于負(fù)責(zé) dom 的解析、映射、添加等等的操作，最后通知UI線程更新。而 Render 負(fù)責(zé)在UI線程中對(duì) dom 實(shí)現(xiàn)渲染。

weex 所有的標(biāo)簽也不是真實(shí)控件，JS 代碼中所生成存的 dom，最后都是由 Native 端解析，再得到對(duì)應(yīng)的Native控件渲染。

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

weex組件少

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

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

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

15456304708377.jpg
15456336878354.jpg

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

Flutter star 46792

Flutter Github
Flutter文檔

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

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

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

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

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

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

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

不支持熱重載 不能直連真機(jī)調(diào)試 （可以下載playground查看效果）
支持熱更新

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

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

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

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

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

Dart

優(yōu)勢(shì)

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

基本概念

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

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

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