使用Flutter 構(gòu)建Web應(yīng)用邏輯解析

更新時(shí)間：2022年12月06日 10:30:37 作者：顧安

這篇文章主要為大家介紹了使用Flutter 構(gòu)建Web應(yīng)用邏輯解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、起源

Flutter 的起源就很有意思，大家都知道早期 Flutter 最先支持的平臺(tái)是 Android 和 iOS，至今最核心的維護(hù)平臺(tái)依然是 Android 和 iOS，但是事實(shí)上Flutter 來(lái)源于前端 Chrome 團(tuán)隊(duì)。另外前端的同學(xué)應(yīng)該知道，Dart 起初也是為了 Web 而生，事實(shí)上 Dart 誕生至今也有 10 年了，所以可以說(shuō) Flutter 其實(shí)充滿了 Web 的基因。

二、渲染邏輯

首先 Flutter Web 和其他 Flutter 平臺(tái)一樣共用一套 Framework，理論上絕大多數(shù)的控件實(shí)現(xiàn)都是通用的，而由于 Web 的特殊場(chǎng)景，F(xiàn)lutter Web 在 "幾經(jīng)周折" 之后落地了兩種不同的渲染邏輯: html 和 canvaskit，它們的不同之處在于:

html 的實(shí)現(xiàn)更輕量級(jí)，渲染實(shí)現(xiàn)基本依賴于 Web 平臺(tái)的各種 HTMLElement，它更貼近現(xiàn)在的 Web 環(huán)境，所以有時(shí)候我們也稱呼它為 DomCanvas。
canvaskit 的實(shí)現(xiàn)可以說(shuō)是更貼近 Flutter 理念，因?yàn)樗鋵?shí)就是 Skia + WebAssembly 的實(shí)現(xiàn)邏輯，能和其他平臺(tái)的實(shí)現(xiàn)更一致，性能更好，比如滾動(dòng)列表的渲染流暢度更高等。

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

三、打包處理

默認(rèn)情況下 Flutter Web 在打包渲染時(shí)會(huì)把 html 和 canvaskit 都打包進(jìn)去，然后再 PC 端使用 canvaskit 模式，在 mobile 端使用 html 模式，當(dāng)然您也可以在打包時(shí)通過(guò) flutter build web --web-renderer html --release 之類的配置強(qiáng)行指定渲染模式。

四、配置開(kāi)發(fā)環(huán)境

首先需要master或者dev渠道的Flutter SDK來(lái)獲取Web支持

flutter channel stableflutter upgradeflutter config --enable-web

創(chuàng)建一個(gè)名為myapp的應(yīng)用

flutter create myappcd myapp

編譯當(dāng)前應(yīng)用

flutter build web

你可以通過(guò)運(yùn)行 release 模式 (flutter run --release) 或運(yùn)行 flutter build web 來(lái)構(gòu)建 release 模式的應(yīng)用。同時(shí)，你可以使用（--web-renderer html）或者（--web-renderer canvaskit）分別切換 HTML 或 CanvasKit 渲染器。

為現(xiàn)有項(xiàng)目添加 Web 支持

flutter create .

測(cè)試應(yīng)用

你可以在命令行使用 flutter run -d chrome 命令測(cè)試應(yīng)用程序。這會(huì)構(gòu)建出 debug 版本的應(yīng)用。

對(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文件，如果曾編譯成功過(guò)這個(gè)工程，會(huì)在編譯后的build文件夾中看到該js文件。

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