1 什么是Flutter

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

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

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

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

2 Flutter For Web

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

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

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

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

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

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

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

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

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

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

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

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

1.有部分庫(kù)在Flutter web中不支持。

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

2.有部分庫(kù)只能Flutter web中使用。

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

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

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

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

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

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

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

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

7 性能

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

8 總結(jié)

優(yōu)點(diǎn)

• （1）一個(gè)代碼庫(kù)可以同時(shí)支持手機(jī)端和Web端；

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

• （3）支持PWA；

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

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

缺點(diǎn)

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

• （2）對(duì)SEO并不友好；

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

• （4）SDK體積大、加載時(shí)間長(zhǎng)；

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