Flutter之旅 02 - 創(chuàng)建第一個項目

Flutter項目可以用三種方式開發(fā)：

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、網(wǎng)站設(shè)計、阜新網(wǎng)絡(luò)推廣、小程序設(shè)計、阜新網(wǎng)絡(luò)營銷、阜新企業(yè)策劃、阜新品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學生創(chuàng)業(yè)者提供阜新建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：www.yijiale78.com

可以根據(jù)自己的需求選擇，由于之前一直做iOS開發(fā)，也做過RN項目開發(fā)，Mac上裝過Android Studio 和 其他安卓模擬器 Genymotion ，所以我選擇Android Studio開發(fā)工具，之前裝的版本 3.0.1 比較老了，所以進行了升級 3.4 。

體驗Flutter

PS：第一次創(chuàng)建項目可以成功，之后再執(zhí)行這一步操作創(chuàng)建新的Flutter項目時，一直卡住，重啟過很多次Android Studio一直都是這樣，后面查詢資料，發(fā)現(xiàn)自己沒有同意使用 android-licenses ，可以通過下列命令驗證，第一步，先驗證：

第一步檢測結(jié)果，發(fā)現(xiàn)是需要同意 android-licenses ：

第二步執(zhí)行同意命令，操作時會有很多個 android-licenses 需要同意：

第二步檢測結(jié)果：

第三步再次驗證，當?shù)玫揭韵陆貓D中結(jié)果時，代表所有環(huán)境配置已經(jīng)完成：

上述命令創(chuàng)建一個Flutter項目，項目名為 myapp ，在項目目錄中，有安卓和iOS兩個項目目錄。

Android Studio中會列出所有已經(jīng)連接了電腦的設(shè)備，包括安卓和iPhone。如果想在模擬器上運行，下面可以選擇對應(yīng)的模擬器，如圖：

PS：如果想在模擬器上運行，需要先安裝一個模擬器，選擇Tools AVD Manager，如圖：

然后選擇Create Virtual Device，根據(jù)提示一步一步操作即可（建議翻墻條件下操作），添加完成后就可以在這個界面看到自己已經(jīng)添加的模擬器，點擊綠色的運行按鈕，即可打開該模擬器：

Archsummit 2019重磅分享｜閑魚Flutter＆FaaS云端一體化架構(gòu)

作者：閑魚技術(shù)－國有

國有，閑魚架構(gòu)團隊負責人。在7月13號落幕的2019年Archsummit峰會上就近一年來閑魚在FlutterFaaS一體化項目上的 探索 和實踐進行了分享。

隨著無線，IoT的發(fā)展，5G的到來，移動研發(fā)越發(fā)向多端化發(fā)展。傳統(tǒng)的基于Native＋Web＋服務(wù)端的開發(fā)方式，研發(fā)效率低下，顯然已經(jīng)無法適應(yīng)發(fā)展需要。

我們希望 探索 閑魚這樣規(guī)模的獨立APP的高效研發(fā)架構(gòu)。主要思路是圍繞Flutter解決多端問題，并使Flutter與FaaS等無服務(wù)容能力打通，形成云端一體化的研發(fā)能力，支持一云多端的發(fā)展需要。在某些場景已經(jīng)取得效果，希望分享過程中的思考，與大家交流。

閑魚選擇Flutter主要是出于高性能的考慮。Flutter高性能主要來源于2個原因：

更多比較：

沒有銀彈的解決方案，F(xiàn)lutter與RN各有優(yōu)點。如何選擇因素很多，關(guān)鍵看如何取舍，舉個例子：

云端技術(shù)棧的打通，是減少協(xié)同的不錯的解法。以往前端＋Node.js的一體化方案大家應(yīng)該不會陌生，然而如果端側(cè)使用了Flutter，那云側(cè)Dart自然是第一選擇。

FaaS的本質(zhì)是運行在云端，那Dart適合用在云/Server上嗎？

Dart語言早于Flutter，在最初的設(shè)計上，Dart就可以用于Web、Server。Dart具備一些服務(wù)端語言的特點：

閑魚首先嘗試將Dart作為普通的Server，替代傳統(tǒng)的Java　Server，然后再將Dart容器嵌入到FaaS容器中。建立Dart Server能力是第一步，也是主要的工作量所在。

閑魚在Dart　Server方面的建設(shè)思路：

開發(fā)期：

運行期：

上述內(nèi)容實現(xiàn)了FlutterDart FaaS的技術(shù)棧的統(tǒng)一，但僅技術(shù)棧統(tǒng)一還遠遠不夠，端、云的同學仍然無法真正互補和一體化打通，原因在于還有更多深入問題需要考慮：

面向這些問題，閑魚的解法思路：

案例一，一體化在資源均衡方面的體現(xiàn)。在近期的一個項目中，云端一體化使原本2個月的項目時間，減少了20天。

案例二，一體化在業(yè)務(wù)閉環(huán)方面的體現(xiàn)。負責增長的一位開發(fā)同學，專注在增長業(yè)務(wù)上，在合適的情況下為合適的人投放合適的內(nèi)容，以此帶來用戶的增長和活躍效果。一體化的方式下，可以統(tǒng)一云、端的切面，業(yè)務(wù)研發(fā)不再受云、端的限制。

一體化是建設(shè)高效研發(fā)框架的方向，并不是所有場景都需要一體化的開發(fā)，但一體化的Flutter、FaaS等技術(shù)組件，可以獨立使用，也會帶來效率提升，并且與原有的開發(fā)模式兼容。從一體化的思路去建設(shè)，可以使整體架構(gòu)體系更加一致，也有機會做一體的架構(gòu)沉淀。

未來閑魚希望在一體化上做更多嘗試和深入 探索 ，包括一體化工具、一體化業(yè)務(wù)平臺、數(shù)據(jù)化智能化等方向。

Flutter跨平臺框架（Dart語言）

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用，并且Flutter是完全免費、開源的。(-中文網(wǎng)；-英文網(wǎng))

Flutter是一種趨勢，勢必會取代RN，成為最主流的跨平臺開發(fā)框架，基于Dart語言。ios開發(fā)必須Mac電腦。android開發(fā)window、linux、Mac均可。

前端開發(fā)未來的發(fā)展前景怎么樣?

web前端開發(fā)前景還是比較好的。具體您可以通過以下幾個方面去看看。

第一、web前端前景

1、 現(xiàn)在進入到了互聯(lián)網(wǎng)時代，不管干什么基本都離不開網(wǎng)絡(luò)，尤其是電商行業(yè)，對于用戶的交互和體驗度更加注重，而這些基本都是web前端技術(shù)實現(xiàn)的效果。

2、 現(xiàn)在對于IT互聯(lián)網(wǎng)的應(yīng)用廣泛，app、小程序、移動端、pc端等都是需要前端技術(shù)的開發(fā)支持才能夠完成。

第二、web前端待遇

對于web前端崗位的薪資，建議您可以去招聘網(wǎng)站上看一下。如果感覺招聘網(wǎng)站上邊的不太真實的話，那么可以通過身邊的做相關(guān)工作的朋友打聽一下，這個是很真實的。

通過上邊的圖表可以看到前端的就業(yè)薪資相對式比較高的，10k-15k最多占到三分之一。

在北京、上海和深圳的平均薪資是很高的，尤其是北京已經(jīng)達到了18k的高薪。從這方面來看web前端的薪資是很高的。

工作年限與工資也是呈現(xiàn)正比現(xiàn)象（這個正比現(xiàn)象是您在工作之后依舊堅持不斷的學習web前端最新技術(shù)而呈現(xiàn)的）。加上大型企業(yè)對于用戶界面體驗的要求的高度重視，前端人才的需求也在增加。

所以Web前端的工作無法被替代，發(fā)展趨勢是可見的，客戶需求是存在，前景是巨大的。但還是要提醒您應(yīng)該時刻記住只有不斷的自我學習更新，才不會被行業(yè)所淘汰。

第三、web前端與其他編程相對比

web前端如果跟java、大數(shù)據(jù)相比的話，我個人不建議您比，因為的確沒什么可比性。它們各自的工作方向不同，主要還是根據(jù)您自身的情況，一方面看一下自己喜歡哪個，另一方面看自己適合哪個。最終再做決定。

但有一點可以肯定的是無論學web前端、java還是大數(shù)據(jù)前景都不錯，最最重要的是您自己需做以下步驟：

1、自己是否真的喜歡

2、自己是否適合

3、自己是否能即便參加工作之后保持長期學習的狀態(tài)

如果都沒有問題，選擇自己喜歡的即可。

最后、無論是學哪個，“自學”也好，報班學習也罷，跟您自己的努力是分不開的，因此養(yǎng)成堅持長期不斷學習的習慣是很有必要的。

基于Weex的Flutter項目框架

最近在做的一個項目，項目的前期采用Weex開發(fā)。但是隨著交互復(fù)雜度的增加，Weex一處開發(fā)多處多處運行的特征并沒有很好的體現(xiàn)，相反很多時候我們還是需要做IOS和Android的適配。如今火熱的Flutter相比Weex和Rn來說，給出了更好的跨平臺解決方案。所以我們設(shè)計了一套基于Weex實現(xiàn)，底層跑在Flutter Engine上的框架。

底層的Runtime采用isolate engine,框架業(yè)務(wù)邏輯，Dom的解析邏輯和Render邏輯都跑在這里。

渲染引擎采用Flutter的Skia，徹底剝離了Android和IOS的差異性.

將Weex VirsualDom的解析都替換成Flutter Widget.

設(shè)計基于Weex2Dart的Brider,使JS和Dart可以相互調(diào)用

weex-demo的性能展示

release環(huán)境下采用AOT模式，性能會有質(zhì)的飛躍。

Android-Release版本只有10m大小

相比Weex和Rn具有更好的性能，同時具有更好的跨平臺性

相比Flutter，具有動態(tài)部署的能力（Flutter Release采用AoT模式并沒有動態(tài)部署的能力，即使Debug版本也只是開發(fā)環(huán)境下才有動態(tài)化能力并沒有可以實施項目的能力）

只需要會Weex開發(fā)或則Rn開發(fā)就可以，不需要額外學習Dart，已有的Weex項目可以無縫切換。

跨平臺技術(shù)；H5和Flutter誰是未來？

前言

為什么跨平臺是發(fā)展趨勢？

同一個應(yīng)用，各個“端”獨立開發(fā)，不僅開發(fā)周期長，而且人員成本高。同時，作為技術(shù)人員，也不應(yīng)該滿足于這種重復(fù)、低能的工作狀態(tài)。在這樣的形勢下，跨平臺的技術(shù)方案也受到越來越多人和企業(yè)的關(guān)注。

本篇文章我將從原理、優(yōu)缺點等方面為大家分享跨平臺技術(shù)

一. H5

說到跨平臺，沒人不知道H5。不管是在Mac、Windows、Linux、iOS、Android還是其他平臺，只要給一個瀏覽器，連“月球”上它都能跑。

1.瀏覽器架構(gòu)

下面，我們來看看讓H5如此橫行霸道的瀏覽器的架構(gòu)：

瀏覽器由以上7個部分組成，而“渲染引擎”是性能優(yōu)化的重中之重，一起了解其中的渲染原理。

2.渲染引擎原理

不同的瀏覽器內(nèi)核不同，渲染過程會不太一樣，但主要流程還是一致的。

分為下面6步驟：

從以上6步，我們可以總結(jié)渲染優(yōu)化的要點：

以上就是瀏覽器端的內(nèi)容。但H5作為跨平臺技術(shù)的載體，是如何與不同平臺的App進行交互的呢？這時候JSBridge就該出場了。

3.JSBridge原理

JSBridge，顧名思義，是JS和Native之間的橋梁，用來進行JS和Native之間的通信。

通信分為以下兩個維度：

那么App內(nèi)加載H5的過程是什么樣的呢？

4.App打開H5過程

打開H5分為4個階段：

這四步，對應(yīng)的過程如上圖所以，我們可以針對性的做性能優(yōu)化。

5.優(yōu)缺點分析

下面，我們進行H5的優(yōu)缺點分析：

優(yōu)點

缺點

雖然H5目前還存在不足，但隨著PWA、WebAssembly等技術(shù)的進步，相信H5在未來能夠得到越來也好的發(fā)展。

二.小程序

2018年是微信小程序飛速發(fā)展的一年，19年，各大廠商快速跟進，已經(jīng)有了很大的影響力。下面，我們以微信小程序為例，分析小程序的技術(shù)架構(gòu)。

小程序跟H5一樣，也是基于Webview實現(xiàn)。但它包含View視圖層、App Service邏輯層兩部分，分別獨立運行在各自的WebView線程中。

1.View

可以理解為h5的頁面，提供UI渲染。由WAWebview.js來提供底層的功能,具體如下：

每個窗口都有一個獨立的WebView進程，因此微信限制不能打開超過5個層級的頁面來保障用戶體驗。

2. App Service

提供邏輯處理、數(shù)據(jù)請求、接口調(diào)用。由WAService.js來提供底層的功能,具體如下：

運行環(huán)境：

僅有一個WebView進程

3.View App Service通信

視圖層和邏輯層通過系統(tǒng)層的JSBridage進行通信，邏輯層把數(shù)據(jù)變化通知到視圖層，觸發(fā)視圖層頁面更新，視圖層將觸發(fā)的事件通知到邏輯層進行業(yè)務(wù)處理。

4. 優(yōu)缺點分析

優(yōu)點

缺點

既然WebView性能不佳，那有沒有更好的方案呢？下面我們看看React Native。

三.React Native

RN的理念是在不同平臺上編寫基于React的代碼，實現(xiàn)Learn once, write anywhere。

Virtual DOM在內(nèi)存中，可以通過不同的渲染引擎生成不同平臺下的UI，JS和Native之間通過Bridge通信

1.React Native 工作原理

在 React 框架中，JSX 源碼通過 React 框架最終渲染到了瀏覽器的真實 DOM 中，而在 React Native 框架中，JSX 源碼通過 React Native 框架編譯后，與Native原生的UI組件進行映射，用原生代替DOM元素來渲染，在UI渲染上非常接近Native App。

2.React Native 與Native平臺通信

3.優(yōu)缺點分析

優(yōu)點

缺點

4.RN展望

雖然RN還存在不足，但RN新版本已經(jīng)做了如下改進，并且RN團隊也在積極準備大版本重構(gòu)，能否成為開發(fā)者們所信賴的跨平臺方案，讓我們拭目以待。

既然React Native在渲染方面還擺脫不了原生，那有沒有一種方案是直接操控GPU，自制引擎渲染呢，我們終于迎來了Flutter！

四.Flutter

Flutter是Google開發(fā)的一套全新的跨平臺、開源UI框架，支持iOS、Android系統(tǒng)開發(fā)，并且是未來新操作系統(tǒng)Fuchsia的默認開發(fā)套件。渲染引擎依靠跨平臺的Skia圖形庫來實現(xiàn)，依賴系統(tǒng)的只有圖形繪制相關(guān)的接口，可以在最大程度上保證不同平臺、不同設(shè)備的體驗一致性，邏輯處理使用支持AOT的Dart語言，執(zhí)行效率也比JavaScript高得多。

1.Flutter架構(gòu)原理

2.Dart優(yōu)勢

很多人會好奇，為什么Flutter要用Dart，而不是用JavaScript開發(fā)，這里列下Dart的優(yōu)勢

3.優(yōu)缺點分析

優(yōu)點

缺點

分享題目：rn跟flutter的簡單介紹
鏈接分享：http://www.yijiale78.com/article48/dsccgep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、移動網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站建設(shè)、做網(wǎng)站、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)