小伙伴們，好消息來了，在12月12號的Flutter Interact2019會(huì)議上，谷歌Flutter團(tuán)隊(duì)帶來了最新的Flutter1.12版本，在此次版本更新中，其中一個(gè)最吸引人的功能就是——“Flutter Web Beta”，沒錯(cuò)，F(xiàn)lutter Web終于有beta版本了，也就說說你可以用它開發(fā)實(shí)際Web項(xiàng)目了，激不激動(dòng)？刺不刺激？另外谷歌針對Web的一些插件庫做了更新升級，常用的功能編寫完全不用擔(dān)心了。
PS：12月12日凌晨，作為一個(gè)剁手的日子，我怎么跑來學(xué)習(xí)了？我不是應(yīng)該買買買嗎？哦，我忘了，我太窮了，只能多努力學(xué)習(xí)提升自己了，哪像各位大佬這時(shí)候還露著對象捂被子呢？o(╥﹏╥)o 閑話少說，直接進(jìn)入今天的正題：
一、有了FlutterNative，為什么還要用Flutter Web？
因?yàn)殚_發(fā)人員構(gòu)建的應(yīng)用程序需要同時(shí)在移動(dòng)設(shè)備和Web上運(yùn)行，并且能夠完美地運(yùn)行起來。作為開發(fā)人員，需要學(xué)習(xí)一組可以輕松跨多個(gè)平臺(tái)遷移的技能是非常有必要的。Flutter支持Web，意味著開發(fā)人員可以使用相同的代碼，更快地發(fā)布功能，并確保其跨設(shè)備（Android、iOS、Web）體驗(yàn)的一致性。此外，功能強(qiáng)大的Dart編譯器針對Web專門做了優(yōu)化升級，然后Flutter架構(gòu)是可移植的，這些就讓開發(fā)者使用Flutter能夠輕易的創(chuàng)建出具有非常良好的性能的，交互式強(qiáng)的，多端一致性的Web體驗(yàn)的程序。
我們看看Flutter Web的兼容性，簡直是太酷了！不管是手機(jī)、平板還是手機(jī)瀏覽器、桌面瀏覽器都可以得到很好地兼容，完美！打分82分，剩下的是666！
二、Fluttwe Web支持的方案選型
Flutter團(tuán)隊(duì)給出的適合Flutter Web特征的場景有以下這些：
1.聯(lián)網(wǎng)的獨(dú)立應(yīng)用程序
Flutter可使開發(fā)人員在移動(dòng)端和瀏覽器中使用相同的代碼構(gòu)建單個(gè)應(yīng)用程序。這是Flutter Web的一個(gè)最初期開始就制定的一個(gè)方案，也是用的最廣泛的一種跨平臺(tái)方案。這樣一來充分你用了Flutter的跨平臺(tái)的能力，真正做到了一次代碼，三端運(yùn)行，并且具有一致性和高性能的特點(diǎn)，維護(hù)起來也很方便。（希望不要被那些黑心的老板或者喜歡壓榨的技術(shù)管理看到，要不然程序員又要苦逼了。。。一個(gè)人干3個(gè)人的活。。就問你爽不爽？）
2.嵌入式互動(dòng)內(nèi)容
一種情況是在父站點(diǎn)中嵌入功能豐富的，以數(shù)據(jù)為中心的mini應(yīng)用程序，并且無需導(dǎo)航服務(wù)或其他類似應(yīng)用的功能。比如：你可以嵌入一個(gè)數(shù)字游戲，在線聊天機(jī)器人，房貸計(jì)算器，天氣預(yù)報(bào)等。
3.精簡版應(yīng)用
精簡版Web應(yīng)用程序可以使用Flutter相同的工具，框架，UI組件和業(yè)務(wù)邏輯來提供較少的功能豐富的體驗(yàn)以及相關(guān)功能。然后就可以減少部分開發(fā)者因?yàn)榘惭b問題出現(xiàn)的難題而錯(cuò)過了Flutter的使用。現(xiàn)有的Flutter應(yīng)用程序具有輕量級的Web體驗(yàn)，可為公司帶來兩全其美的體驗(yàn)。
4.伴侶應(yīng)用
Flutter Web是輔助，移動(dòng)端應(yīng)用程序是主體，使用Flutter構(gòu)建的網(wǎng)絡(luò)體驗(yàn)，然后用于支持你的移動(dòng)應(yīng)用程序。比如使用Flutter構(gòu)建一個(gè)Web應(yīng)用程序，使管理員或內(nèi)部用戶可以為現(xiàn)有的Flutter移動(dòng)應(yīng)用程序創(chuàng)建內(nèi)容或管理后端。盡管有點(diǎn)麻煩，但是Flutter Web這一部分可以利用移動(dòng)應(yīng)用程序中的許多相同代碼。
三、豐富的Web插件支持
Flutter團(tuán)隊(duì)也針對Web的插件做了大量改進(jìn)和完善，另外 pub.dev 網(wǎng)站也做了更新升級，新增平臺(tái)標(biāo)記和過濾。
在搜索頁面做了優(yōu)化，列出了軟件包支持Dart還是Flutter，點(diǎn)擊Dart進(jìn)去，就會(huì)看到右側(cè)有兩個(gè)細(xì)分類：Native、JS；點(diǎn)擊Flutter進(jìn)去，就會(huì)看到右側(cè)有三個(gè)細(xì)分類：Android、iOS、Web。如果點(diǎn)擊Any就會(huì)顯示所有的插件庫。
Flutter團(tuán)隊(duì)針對Web對一些包進(jìn)行了升級，F(xiàn)lutter團(tuán)隊(duì)已經(jīng)幫我們把Flutter和JS相互調(diào)用的功能封裝好了，直接調(diào)用這些包里面的API就可以了，這些包可以在Flutter和Flutter Web上同時(shí)運(yùn)行，所以不必?fù)?dān)心兼容性問題，開發(fā)起來還是很快捷方便的。包括以下這些：
- shared_preferences： Flutter插件，用于讀寫簡單的鍵值對。
- firebase_core 可連接到多個(gè)Firebase應(yīng)用程序
- firebase_auth 用于Firebase身份驗(yàn)證的Flutter插件
- google_sign_in 谷歌登錄
- url_launcher 路由導(dǎo)航
- video_player 視頻播放
- sentry Dart的崩潰報(bào)告庫
【PS】：我在3個(gè)月前Flutter1.9版本剛出來時(shí)的Flutter Web體驗(yàn)時(shí)，就對url_launcher不支持Web功能給Flutter提了一個(gè)issues，沒想到這么快就實(shí)現(xiàn)了，不得不佩服谷歌Flutter團(tuán)隊(duì)的辦事效率。當(dāng)然目前來看Flutter Web插件還不夠多，也希望各位大佬都踴躍參加，積極貢獻(xiàn)自己寫的插件，讓Flutter Web更完善。
四、待完善的問題
雖然Flutter Web beta版本已經(jīng)發(fā)布，但是里面還是有很多工作需要處理的，主要有以下三個(gè)方面：
1.輔助功能
目前已為跨平臺(tái)的輔助技術(shù)實(shí)現(xiàn)的一些功能包括諸如UI遍歷和遍歷順序，UI交互提示（如可輕擊，文本標(biāo)簽，可編輯的文本，增量，圖片，活動(dòng)區(qū)域和單選框）之類的功能。桌面Web瀏覽器添加屏幕閱讀器的支持功能正在研發(fā)中。
2.多瀏覽器支持
隨著Flutter從僅移動(dòng)的框架發(fā)展到涵蓋桌面UX習(xí)慣用法，F(xiàn)lutter對桌面Web瀏覽器的支持將得到改善，并變得更加無縫。Flutter Web團(tuán)隊(duì)計(jì)劃在桌面Web瀏覽器和移動(dòng)瀏覽器上支持和測試Chrome，Edge，Firefox和Safari。
3.測試范圍
Flutter Web的發(fā)布以來，F(xiàn)lutter Web團(tuán)隊(duì)在框架和Flutter Web引擎上的測試范圍在逐漸增加。Flutter Web團(tuán)隊(duì)已經(jīng)在Chrome上運(yùn)行自動(dòng)化測試，并手動(dòng)測試Safari。未來還有更多的測試工作要做。
本文首發(fā)在公眾號【Flutter那些事】，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載。歡迎大家關(guān)注公眾號【Flutter那些事】，更多干貨等你來看。
