作者：BrianDeSousa一个应用程序开发框架，允许您编写一次代码并在多个平台（例如Android、iOS甚至桌面）上运行它。您可能听说过一些流行的框架，例如Ionic、Xamarin和ReactNative。另一个相对较新的框架是Flutter。在本文中，您将了解一些关于Flutter的知识，特别是它对网络的支持，最近在v1.9中作为技术预览提供。您将能够为现有的Flutter应用程序添加Web支持，并使用简单的API在Node.js服务器上运行它。Flutter简介Flutter是Google的跨平台开发解决方案之一。虽然它出现的时间不长，但其功能集使其成为该领域的强大竞争对手。它将您的程序编译为在iOS或Android上运行的本机代码，以获得令人难以置信的性能和帧速率。它支持开发过程中的状态热重启，这意味着您可以随时更改代码并观看它们在模拟器或物理设备上的应用，而无需重新启动程序或丢失程序状态。Flutter主要关注iOS和Android。Web支持已作为技术预览添加到1.9版中。它仍处于起步阶段，可能还没有准备好，但它确实令人兴奋且充满希望。正如您很快就会看到的，只需稍作修改即可将现有的Flutter应用程序编译成HTML、CSS和JS包。为什么要在Node.js上运行FlutterWeb应用程序？Flutter网络应用程序可以在任何网络服务器上运行。那么为什么要在Node.js服务器上托管FlutterWeb应用程序呢？好吧，老实说，选择Node.js的原因与其他Web应用程序和API相同：它非常擅长处理很多简单的请求，你可以用JavaScript编写前端和后端代码等。你可能已经有一个Node.jsAPI可以将数据提供给FlutteriOS或Android应用程序。将Flutter程序编译成Web应用程序并将其托管在现有的Node.js服务器上可能是当前解决方案的合理扩展，而无需增加额外的托管成本。演示现在是时候深入研究代码并查看Flutterweb的运行情况了。您将需要以下工具：AndroidStudio（AndroidSDK管理器和模拟器）VisualStudioCode+Flutter扩展（或AndroidStudio）Node.js12Flutter具有出色的开发人员文档。如果这是您第一次使用Flutter进行开发，请按照入门指南进行设置。本文中的示例和说明基于VisualStudioCode，但如果您选择使用AndroidStudio，您仍然可以继续学习。运行网页版FlutterWeather应用程序以及后端WeatherAPI需要Node.js12。第1步：探索示例代码为了演示如何向现有Flutter应用程序添加Web支持，我们将从一个简单的天气应用程序开始，该应用程序已在Android10（API级别29）上进行测试。天气应用程序允许用户查看预定义城市的当前天气。天气数据是从在Node.js上运行的后端服务器检索的。从GitHub复制天气应用和服务器源代码：briandesousa/weather_app_flutterbriandesousa/weather-app-nodejs-server提示：weather-app-nodejs-server项目存储库有一个Flutter-web-support分支，其中包含启用的FlutterWeb支持在服务器上运行的版本。最好将两个项目的存储库克隆到同一个父文件夹中。weather_app_flutter存储库的内容将被创建并复制到weather-app-nodejs-server存储库内的一个文件夹中。探索FlutterWeatherApp在编辑器中打开weather_app_flutter。让我们仔细看看main.dart文件。它包含构成程序用户界面的脚手架和小部件。Home小部件类有一个fetchWeatherData函数，它调用后端天气API来检索数据并更新小部件的状态：最终响应=awaithttp.get(url);如果（response.statusCode==200）{varjsonResponse=convert.jsonDecode（response.body）;setState((){this._weatherData=WeatherData(jsonResponse\['weather'\]['location'],jsonResponse\['weather'\]['temperature'],jsonResponse\['weather'\]['weatherDescription'],);this._apiError=null;});}else{setState((){this._apiError='无法从API(HTTP${response.statusCode})检索天气数据';});fetchWeatherData函数使用Dart的http包通过HTTP连接到服务器。您也可以使用其他Dart包，但如果您计划为您的Flutter应用程序添加Web支持，这是官方推荐的包。还要记下WEATHER_API_URL常量。在运行程序之前，更新此常量的值，以便它可以连接到在本地Node.js服务器上运行的API。该URL必须包含您计算机的主机名。Android模拟器或物理设备无法访问本地主机URL。探索Node.js服务器和天气API在编辑器中打开weather-app-nodejs-server项目代码。有一些重要的文件和目录：public/api-test.html文件可用于快速测试服务器启动后是否按预期工作（例如，`http://localhost:3000/api-test.html）路线/天气。js文件包含一个简单的GETAPI，它接受一个路径参数并返回天气数据（例如，http://localhost:3000/api/weather/londonon）您可以将编译好的天气程序复制到public-flutter文件夹web版本中。设置Node.js服务器以将文件从此目录提供给根上下文（例如，http://localhost:3000）第2步：向Flutter应用程序添加Web支持由于Web支持目前仍处于技术预览阶段，因此它需要最新的Flutter开发中版本，也称为master通道。在weather_app_flutter仓库根目录下，运行以下命令：flutterchannelmasterflutterupgrade.尝试在普通的Windows命令shell中运行该命令。升级过程可能需要几分钟时间。接下来，您需要在Flutter安装中启用Web支持：flutterconfig--enable-webflutterdevices启用Web支持后，您将在设备列表中看到一个新的Chrome设备。如果您没有看到Chrome，请在运行以下命令刷新设备列表菜单后重新启动VisualStudioCode。要为天气应用程序添加Web支持，您需要在weather_flutter_app项目的顶层文件夹中运行以下命令：fluttercreate。创建命令将对应用程序进行一些更改，您可以在此提交中看到这些更改。最显着的变化是添加了一个包含index.html的子文件夹web：通过在weather-app-nodejs-server的根目录中运行以下命令来启动Node.js服务器：npmstartfromVisualStudioCode'sdevice在中选择Chrome列表，然后开始调试。或者，您可以运行以下flutter命令：flutterrun-dchrome由于Flutter需要动态下载其他依赖项，因此第一次启动时可能需要一段时间才能在Chrome中启动该应用程序。最终你会看到天气应用程序在你的浏览器中运行。可能有些样式与您在模拟器或物理设备上看到的略有不同。您会注意到该应用程序不显示来自WeatherAPI的任何数据。如果您打开ChromeDevTools，您会看到跨源资源共享错误。浏览器将不允许FlutterWeb服务器向Node.js服务器发出请求，因为它们在不同的端口上运行。您可以通过在服务器上启用跨源资源共享或安装Chrome扩展来禁用CORS来解决此问题。我们暂时忽略这个错误，因为在下一步中我们将直接在Node.js服务器上运行预编译的FlutterWeb代码，从而完全消除跨域请求。尝试修改main.dart文件中的一些代码，让Flutter重新编译您的程序。您会注意到所做的更改不会立即显示在浏览器中。这是因为FlutterWeb还不支持热重启。希望这种支持将很快可用。提示：本节中每个Flutter命令的详细说明可以在flutter.dev上找到。第3步：在Node.js上运行FlutterWeb应用现在您可以使用Flutter在浏览器中运行天气应用，下一步是构建并将其复制到Node.js服务器以使用API运行。要构建FlutterWeb应用程序包，请运行以下命令：flutterbuildwebbuild命令将生成一个build/web文件夹，其中包含构成天气应用程序的所有静态文件。将weather_app_flutter/build/web的内容复制到weather-app-nodejs-server/public-flutter。如果您的Node.js服务器仍在运行，请重新启动它。在浏览器中访问http://localhost:3000查看Node.js上运行的程序。这次您的应用程序将显示从WeatherAPI检索的天气数据，而不会出现跨源资源共享错误。最后的想法令人难以置信的是，将现有的Flutter应用程序编译成可以部署到Web服务器的Web应用程序是多么容易。浏览器中呈现的UI看起来与Android中的几乎相同。但是Flutter不能仅仅因为它支持web就被认为是一个跨平台的应用程序框架。Flutter团队非常清楚Web支持缺少功能，存在已知的性能问题并且尚未在生产中得到完全支持。有一件事是肯定的：FlutterforWeb的未来看起来很有希望。您可以在此处了解有关FlutterWeb支持和Hummingbird项目的更多信息。
