在 Node.js 上運行 Flutter Web 應用和 API

作者：Brian De Sousa

翻譯：瘋狂的技術宅

原文：https://blog.logrocket.com/fl...

未經允許嚴禁轉載

大量的跨平臺應用開發框架，使你可以編寫一次代碼，然後在 Android，iOS 等多個平臺上甚至在臺式機上運行。你可能聽說過一些流行的框架，例如 Ionic，Xamarin 和 React Native。另一個相對較新的框架是 Flutter。

在本文中，你將學到一些有關 Flutter 的知識，特別是對 Web 的支持，該支持最近在 v1.9 版中可作爲技術預覽版本使用。你將可以向現有的 Flutter 程序中添加 Web 支持，並將其與簡單的 API 一起在 Node.js 服務器上運行。

Flutter 簡述

Flutter 是 Google 跨平臺開發解決方案之一。雖然它出現的時間不是很長，但其功能集使其成爲該領域的強大的競爭對手。

它將你的程序編譯爲可在 iOS 或 Android 上運行的原生代碼，從而獲得令人難以置信的性能和幀率。它支持在開發期間進行有狀態的熱重啓，這意味着你可以隨時對代碼進行更改，並觀看它們在模擬器或物理設備上的應用，而無需重新啓動程序或丟失程序狀態。

Flutter 主要關注 iOS 和 Android。在 1.9 版中已將 Web 支持添加爲技術預覽。它仍處於起步階段，可能尚未準備就緒，但肯定令人興奮且充滿希望。正如你將很快看到的那樣，只需進行一點的修改即可使用現有的 Flutter 應用並將其編譯爲 HTML、CSS 和 JS 包。

爲什麼在 Node.js 上運行 Flutter Web 程序？

Flutter Web 應用可以在任何 Web 服務器上運行。那麼爲什麼要在 Node.js 服務器上託管 Flutter Web 程序呢？好吧，老實說，出於與其他 Web 應用和 API 選擇 Node.js 的相同原因：它非常擅於服務大量的簡單請求，你可以用 JavaScript 在其中編寫前端和後端代碼等。

你可能已經有了一個 Node.js API，可將數據提供給 Flutter iOS 或 Android 程序。將 Flutter 程序編譯爲 Web 應用並將其託管在現有的 Node.js 服務器上可能是當前解決方案的邏輯擴展，而無需增加額外的託管成本。

示範

現在該深入研究代碼，看看 Flutter web 的實際應用了。你需要以下工具：

• Android Studio（Android SDK 管理器和模擬器）
• Visual Studio Code + Flutter 擴展（或 Android Studio）
• Node.js 12

Flutter 有出色的開發人員文檔。如果這是你第一次開發 Flutter 程序，請按照“入門”指南進行設置。

本文中的示例和說明基於 Visual Studio Code，但如果你選擇使用 Android Studio，則仍然可以繼續學習。

需要 Node.js 12 才能運行 Flutter Weather 程序的 Web 版本以及後端 Weather API。

步驟1：探索示例代碼

爲了演示如何向現有的 Flutter 應用添加 Web 支持，我們將從一個簡單的氣象應用開始，該應用已在 Android 10（API level 29）上進行了測試。

weather app 允許用戶查看預定義城市的當前天氣。天氣數據是從運行在 Node.js 上的後端服務器中檢索的。

從 GitHub 複製 weather app 和服務器的源代碼：

• briandesousa/weather_app_flutter
• briandesousa/weather-app-nodejs-server

提示：weather-app-nodejs-server 項目庫有一個 Flutter-web-support 分支，其中包含已啓用 Flutter Web 支持的可在服務器運行的完整版本。

最好將兩個項目的存儲庫克隆到同一個父文件夾中。將創建 weather_app_flutter 存儲庫的內容並將其複製到 weather-app-nodejs-server 存儲庫內的文件夾中。

探索 Flutter 天氣應用

在編輯器中打開 weather_app_flutter 。讓我們仔細看看 main.dart 文件。它包含構成程序用戶界面的腳手架和小部件。 Home 窗口小部件類具有 fetchWeatherData 函數，該函數調用後端天氣 API 來檢索數據並更新窗口小部件的狀態：

fetchWeatherData({String location}) async {
    var url = WEATHER_API_URL + location;
    final response = await http.get(url);
    if (response.statusCode == 200) {
        var jsonResponse = convert.jsonDecode(response.body);
        setState(() {
            this._weatherData = WeatherData(
                jsonResponse\['weather'\]['location'],
                jsonResponse\['weather'\]['temperature'],
                jsonResponse\['weather'\]['weatherDescription'],
            );
            this._apiError = null;
        });
    } else {
        setState(() {
            this._apiError =
                'Unable to retrieve weather data from API (HTTP ${response.statusCode})';
        });
    }
}

fetchWeatherData 函數使用 Dart 的 http 包通過 HTTP 連接到服務器。你還可以使用其他 Dart 包，但是如果你打算向 Flutter 程序添加 Web 支持，則這是官方推薦的包。

同時記下 WEATHER_API_URL 常量。在運行程序之前，請先更新此常量的值，以便它可以連接到本地 Node.js 服務器上運行的 API。該網址必須包含你計算機的主機名。 Android 模擬器或物理設備無法訪問 localhost URL。

探索 Node.js 服務器和天氣 API

在編輯器中打開 weather-app-nodejs-server 項目代碼。

其中有一些重要的文件和目錄：

• public/api-test.html 文件可用於快速測試啓動後服務器是否按預期工作（例如，`http://localhost:3000/api-test.html）
• routes/weather.js 文件包含一個簡單的 GET API，該 API 接受 path 參數並返回天氣數據（例如，http://localhost:3000/api/weather/londonon）
• 你可以在 public-flutter 文件夾中複製氣象程序的已編譯 web 版本。設置 Node.js 服務器以將文件從該目錄提供到根上下文（例如，http://localhost:3000）

步驟2：向 Flutter 應用添加 web 支持

由於目前 web 支持仍是技術預覽，因此需要最新的 Flutter 開發中版本，也稱爲master channel。在 weather_app_flutter 存儲庫的根文件夾中，運行以下命令：

flutter channel master
flutter upgrade

提示：在Windows上的 Visual Studio Code 的 bash shell 中運行 Flutter 命令時，你可能會遇到 “Unknown operating system. Cannot install Dart SDK.”錯誤。請嘗試在普通的 Windows command shell中運行命令。

升級過程可能需要幾分鐘。接下來你將需要在 Flutter 安裝中啓用 Web 支持：

flutter config --enable-web
flutter devices

啓用 web 支持後，你將在設備列表中看到一個新的 Chrome 設備。如果沒有看到 Chrome，請在運行以下命令刷新設備列表菜單後重新啓動 Visual Studio Code。

要將網絡支持添加到 weather app，你需要在 weather_flutter_app 項目的頂級文件夾中運行以下命令：

flutter create .

create 命令將對該程序進行一些修改，你可以在這個提交中看到。最值得注意的變化是添加了一個包含 index.html 的子文件夾 web ：

通過在 weather-app-nodejs-server 的根目錄中運行以下命令來啓動 Node.js 服務器：

npm start

從 Visual Studio Code 的設備列表中選擇 Chrome，然後開始調試。或者，你可以運行以下 flutter命令：

flutter run -d chrome

由於 Flutter 需要即時下載其他依賴項時，你第一次在 Chrome 中啓動該應用可能會花費一些時間。 最終你將在瀏覽器中看到天氣應用正在運行。可能會有某些樣式與你在仿真器或物理設備上看到的樣式略有不同。

你會注意到該應用沒有顯示來自天氣 API 的任何數據。如果你打開 Chrome DevTools，則會看到跨域資源共享錯誤。

瀏覽器不允許 Flutter Web 服務器向 Node.js 服務器發出請求，因爲它們運行在不同的端口上。你可以通過在服務器上啓用跨域資源共享或安裝 Chrome 插件來禁用 CORS 來解決此問題。

我們現在將忽略這個錯誤，因爲在下一步中，我們將直接在 Node.js 服務器上運行預編譯的 Flutter Web 代碼，從而完全消除跨域請求。

嘗試修改 main.dart 文件中的某些代碼，然後讓 Flutter 重新編譯你的程序。你會發現所做的修改不會立即顯示在瀏覽器中。這是因爲 Flutter Web 尚不支持熱重啓。希望不久後能夠提供這種支持。

提示：本節中每個 Flutter 命令的詳細說明都可以在 flutter.dev 上找到。

步驟3：在 Node.js 上運行 Flutter Web 應用

現在你可以用 Flutter 在瀏覽器中運行 weather app，下一步是構建並將其複製到 Node.js 服務器，以與 API 一起運行。

要構建 Flutter Web 應用捆綁包，請運行以下命令：

flutter build web

build 命令將生成 build/web 文件夾，其中包含構成天氣應用的所有靜態文件。

把 weather_app_flutter/build/web 的內容複製到 weather-app-nodejs-server/public-flutter。如果你的 Node.js 服務器仍在運行，請重新啓動。

通過在的瀏覽器中訪問 http://localhost:3000 ，查看在Node.js上運行的程序。這次你的應用程序將會顯示從天氣 API 檢索到的天氣數據，而不會出現跨域資源共享錯誤。

最後的想法

取得現有 Flutter 應用並將其編譯爲可部署到 Web 服務器的 Web 應用如此簡單，真是令人難以置信。瀏覽器中呈現的用戶界面看起來幾乎與 Android 中的界面相同。

但是不能僅僅由於 Flutter 的 Web 支持而將 Flutter 視爲跨平臺應用程序框架。 Flutter 團隊非常清楚， Web 支持缺少功能，存在已知的性能問題並且尚未完全支持生產環境。

可以肯定的是：Flutter for Web 的未來看起來很有希望。你可以在這裏瞭解有關 Flutter Web 支持和 Hummingbird 項目更多的信息。

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，每天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深入理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提高開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工作的？從調用棧到Promise你需要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通信
• 關於 Git 的 20 個面試題
• 深入解析 Node.js 的 console.log
• Node.js 究竟是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程完全指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...