1 什么是Flutter

Flutter是Google開源的一套UI工具包，幫助開發(fā)者通過一套代碼庫高效構(gòu)建多平臺精美應(yīng)用，支持移動APP、web、桌面和嵌入式平臺。Flutter和其他的跨平臺解決方案的實現(xiàn)方式上有比較大的差異。

我們以React Native（下文簡稱RN）跨平臺解決方案為例。在RN中，開發(fā)者使用JavaScript（JS）語言來開發(fā)，中間會有一層橋接層(Bridge)，橋接層的主要作用就是提供一套完整的接口，使得JS代碼可以直接使用移動端提供的UI組件和相關(guān)的API方法，并通過將這些組件進(jìn)行組合，來最終實現(xiàn)整個頁面的展示。

Flutter卻沒有使用移動端平臺提供各種UI組件，而是將UI組件的具體實現(xiàn)上移到Flutter的Framework層中，然后調(diào)用平臺提供的底層繪制引擎來直接繪制在Framework中生成的各種UI組件。這樣可以在最大程度上保證同一套代碼在不同平臺、不同設(shè)備的UI展示和用戶體驗的一致性。不過除了UI繪制以外，Flutter在其他原生能力的橋接上面與其他的跨平臺方案基本類似。

在Flutter的整個解決方案中，Flutter For Web和Flutter For Mobile的實現(xiàn)方式又有些不同。因為Flutter For Web是需要最終嵌入到瀏覽器中進(jìn)行繪制和展示的。因此它的很多能力依賴于瀏覽器對外提供的接口和能力。但是和iOS、Android不同，瀏覽器并沒有提供一套廣泛使用、完備、高效的繪制接口，這就使得Flutter For Web和Flutter For Mobile在架構(gòu)上還是有比較大的差別的。

2 Flutter For Web

Flutter For Web的目的就是想要在 單代碼庫 的情況下，使Flutter擁有Web支持的能力。這樣使用Flutter開發(fā)的應(yīng)用不但能部署到iOS、Android手機上，還可以部署到任意的Web服務(wù)器上、嵌入到瀏覽器中，而不需要特殊瀏覽器插件的支持。

Flutter For Web和Flutter For Mobile的上層實現(xiàn)基本類似，但是在下層的實現(xiàn)有很大的差別。Flutter For Mobile中的繪制是使用了Engine中的Dart、Skia和Text，然后再調(diào)用iOS和Android提供的底層繪制能力來實現(xiàn)的。

對于瀏覽器環(huán)境，沒有提供一套完備的繪制接口，因此在繪制過程中，會使用Cavans、Dom或者兩者混合的方式來進(jìn)行繪制。

在Flutter For Web的實際的開發(fā)和繪制流程中，首先開發(fā)者使用Dart語言進(jìn)行開發(fā)，開發(fā)完畢在編譯的過程中會通過dart2js的庫，將dart實現(xiàn)的代碼轉(zhuǎn)換成對應(yīng)的js代碼。在js代碼中，會將一些簡單的可以通過HTML和CSS來實現(xiàn)的UI組件通過HTML和CSS來進(jìn)行繪制，而一些復(fù)雜的UI組件則會使用Canvas來直接進(jìn)行繪制，然后通過生成Dom樹，最終在瀏覽器中進(jìn)行渲染。

但是由于很多復(fù)雜的組件在dart2js的轉(zhuǎn)換過程中難以使用HTML+CSS進(jìn)行繪制，因此會導(dǎo)致很多組件最終是直接通過Canvas繪制的，同時這也會導(dǎo)致使用Dart開發(fā)的Web應(yīng)用在效率上會存在一些問題。這也是Flutter For Web現(xiàn)存的一個問題，官方也一直在優(yōu)化和尋找解決方案過程中。

3 代碼結(jié)構(gòu)

對于增加了對Flutter For Web支持的Flutter應(yīng)用，在代碼目錄中增加了一個Web文件夾，其中index.html 文件是整個Web應(yīng)用的入口。其中引用了一個JS文件是main.dart.js，但在工程目錄中找不到該文件。其實這個文件是Flutter工程編譯后生成的js文件，如果曾編譯成功過這個工程，會在編譯后的build文件夾中看到該js文件。

和普通的Flutter應(yīng)用一樣，主要的功能實現(xiàn)還是在工程中的lib文件夾中。但是如果需要有資源文件、js 文件等 web 所需資源，可以放到Web這個文件夾中。

4 編譯后的產(chǎn)物

Flutter For Web應(yīng)用編譯后的產(chǎn)物位于build文件夾下的web目錄中。其中assets和icon文件夾中是Web應(yīng)用的資源文件。index.html文件，是整個Web應(yīng)用的入口，而main.dart.js是dart代碼編譯后產(chǎn)生的js文件。

其中main.dart.js文件的大小是2.6M，對于一個功能不是特別復(fù)雜的web應(yīng)用來說是很大的一個JS文件了。因此首次加載的時候，可能會需要很長的時間，這也是官方需要進(jìn)一步優(yōu)化的地方。

5 Flutter For Web開發(fā)遇到的問題

1.有部分庫在Flutter web中不支持。

例如：dart.io無法在web中使用，dart.io支持非web應(yīng)用程序的文件、套接字、HTTP和其他I/O操作。

2.有部分庫只能Flutter web中使用。

例如：dart:html是關(guān)于html相關(guān)操作的庫，如document、ua、cookie等。

又如：dart:js是dart和JS進(jìn)行交互的庫，可以給js方法傳參，甚至還可以將js的參數(shù)帶回等待。

因此這就會給我們通過一套代碼來實現(xiàn)多平臺的兼容，帶來了不少的挑戰(zhàn)。

6 與移動客戶端開發(fā)的區(qū)別

雖然使用Flutter進(jìn)行web開發(fā)和進(jìn)行移動端開發(fā)在絕大多數(shù)情況下沒什么區(qū)別，但是兩者在開發(fā)中還是有不少需要注意的地方。

現(xiàn)在支持Flutter web的第三方庫相對較少，絕大多數(shù)的庫還是暫時只支持移動端開發(fā)。

Flutter web中的Cookie管理實際上是由瀏覽器來管理的，因此無法像客戶端開發(fā)一樣，自由設(shè)置cookie。

跨域訪問的問題：一個web頁面通過JavaScript發(fā)起的ajax請求，URL的域名必須和當(dāng)前頁面完全一致，這能有效的阻止跨站攻擊。

7 性能

Flutter For Web 目前都是單頁面應(yīng)用。最簡單的web應(yīng)用編譯后main.dart.js 的大小也會輕松過 1M，這可能會導(dǎo)致首次加載很慢。其次，因為頁面中的很多組件其實是使用 canvas 直接繪制的，和通過HTML+CSS的web應(yīng)用相比繪制的速度也會變慢，從而導(dǎo)致性能問題。PC 端首次加載的速度略慢，而手機端會有超過 2S 的延遲。復(fù)雜列表滑動的時候幀率也只有十幾幀/秒，所以此處還有待官方后面對性能進(jìn)行優(yōu)化。

8 總結(jié)

優(yōu)點

• （1）一個代碼庫可以同時支持手機端和Web端；

• （2）自適應(yīng)的布局；

• （3）支持PWA；

• （4）絕大多數(shù)的官方組件支持Web；

-（5）降低人力成本、提高開發(fā)效率。

缺點

• （1）性能問題，雖然在不斷優(yōu)化；

• （2）對SEO并不友好；

• （3）社區(qū)比較小，開發(fā)者較少；

• （4）SDK體積大、加載時間長；

• （5）調(diào)試比較困難。