Flutter新版本 Web App 嚐鮮

李狗蛋啊哦額發表於2019-09-17
FlutterWebAPP

Flutter新版本 Web App 嚐鮮
隨著Flutter的快速發展，現在Flutter生態也日漸壯大，偶然開啟Flutter的官方文件發現已經支援了Web開發，於是便前去探探路，給大家分享點乾貨。

準備工作

首先我們這裡以預設Flutter建立的專案為例，也就是New一個Flutter Project,有的同學會發現目錄下並沒有Web這個目錄，所以在參考官網進行flutter run -d chrome命令的時候是無效的。

第一步先檢查當前的Flutter 分支是否處在master上面。執行命令

flutter channel 
複製程式碼

如果在master分支上Terminal內會列印如下。

flutter channels:
  beta
  dev
* master
  stable

複製程式碼

如果沒在master分支上則切換至master上.

flutter channel master
複製程式碼

隨後對Flutter的SDK進行更新，執行如下命令。至此我們的SDK就具備構建Web的能力了。

flutter upgrade
複製程式碼

構建Web專案

更新完SDK的同學們肯定都想躍躍欲試,遂照著官網敲下flutter run -d chrome,隨後發現SDK報錯~此處還是埋了一坑，其原因是SDK沒有啟用Web工具構建專案，目前Web開發還處於發育階段。執行如下命令啟用專案。

flutter config --enable-web
複製程式碼

然後再執行

flutter create .
複製程式碼

當你看到Flutter在終端給你的彩蛋就說明已經搭建成功了，並且會告訴你現在Web工具處於試錯階段，生產環境還是要慎用。此時你會發現你的專案存在了一個Web的目錄。

Debug And Release

執行完上述命令過後我們就可以使用Chrome來除錯我們的頁面了，在Android Studio中裝置選擇會多了幾個選項

Flutter新版本 Web App 嚐鮮
選擇Chrome(web)會直接執行在Chrome瀏覽器上,當選擇Server(web)的時候會在終端輸出一個地址如http://localhost:54125/將地址輸入到瀏覽器中即可訪問。也可用過命令工具進行Debug

flutter run -d chrome 
複製程式碼

Flutter新版本 Web App 嚐鮮

Android Studio預設會使用dhttpd來搭建HTTP服務，關於dhttpd我就不過多贅述,官方文件有詳細的描述，實際上類似於python -m SimpleHTTPServer 80。

當我們嘗試釋出的時候，先對Web專案進行構建，在專案根目錄下執行

flutter build web
複製程式碼

在build目錄下產生對應的檔案，結構如下。

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    LICENSE
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map
複製程式碼

在打包的時候則需將build目錄整體打包，去除ios及android目錄，上傳到伺服器即可。

隨後在伺服器下對其進行解壓，CD到/build/web目錄下開啟Http服務，別人就可以看到你的網站啦，官網的例子是dhttp和python,我試用Nginx也完全沒有問題。

如果想使用本地服務除錯，也可以CD到/build/web執行

flutter pub global run dhttpd
複製程式碼

埠預設是8080，在瀏覽器中輸入localhost:8080即可檢視頁面。 沒有dhttpd話用pub安裝一下即可。

總結

從Flutter的進展可以看出Google在跨平臺上下的決心,一份程式碼現在可以產出三端，不過我個人覺得一個專案有了IOS和Android兩端後，沒人會去用Web App吧，而且我覺得頁面初始化載入速率略慢。不過對於我們客戶端的同學來說沒事還能寫寫網頁還是不錯的了。

相關文章