目录

使用 Dart 构建 Web 应用

本页面介绍使用 Dart 开发 仅限网页 应用的步骤。 如果您想编写 跨平台 应用,请 尝试使用 Flutter

在开始之前,请阅读 Dart 入门 来确保您熟悉 Dart 基础知识。 然后按照以下步骤使用 Dart 创建一个小型的 Web 应用。

1. 安装 Dart

#

要开发真正的应用程序,您需要一个 SDK。您可以直接下载 Dart SDK(如下所述),也可以[下载 Flutter SDK][],其中包含完整的 Dart SDK。

使用Chocolatey 安装 Dart SDK 的稳定版本。

要安装 Dart SDK:

C:\> choco install dart-sdk

您可以使用 APT 在 Linux 上安装 Dart SDK。

  1. 执行以下一次性设置:

    $ sudo apt-get update
    $ sudo apt-get install apt-transport-https
    $ wget -qO- https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/dart.gpg
    $ echo 'deb [signed-by=/usr/share/keyrings/dart.gpg arch=amd64] https://storage.googleapis.com/download.dartlang.org/linux/debian stable main' | sudo tee /etc/apt/sources.list.d/dart_stable.list
  2. 安装 Dart SDK:

    $ sudo apt-get update
    $ sudo apt-get install dart

使用Homebrew, 安装 Dart 很容易。

$ brew tap dart-lang/dart
$ brew install dart

2. 获取 CLI 工具或 IDE(或两者兼备)

#

terminal 如果您喜欢使用命令行,请安装 webdev 包:

$ dart pub global activate webdev

web 虽然使用 IDE 是可选的,但我们强烈建议您使用 IDE。 有关可用 IDE 的列表,请参阅 编辑器和调试器的概述

3. 创建 Web 应用

#

terminal 要从命令行创建 Web 应用,请使用带有 web 模板的 dart create 命令:

$ dart create -t web quickstart

web 要在具有 Dart 集成的 IDE 中创建相同的 Web 应用,请使用名为 精简 Web 应用 的模板 创建项目

Web 应用模板导入了 package:web ,这是 Dart 为现代 Web 打造的功能强大且简洁的 Web 互操作解决方案。要了解更多信息,请查看 Web 互操作概述

4. 运行应用

#

terminal 要从命令行运行应用,请使用 webdev 来构建和服务应用:

$ cd quickstart
$ webdev serve

web 或者从您的 IDE 运行应用。

要查看您的应用,请使用 Chrome 浏览器访问应用的 URL,例如 localhost:8080

无论您使用 IDE 还是命令行, webdev serve 都会使用开发 JavaScript 编译器构建和服务您的应用。 第一次开发编译器构建和服务您的应用时,启动速度最慢。 之后,资产将缓存在磁盘上,增量构建的速度会快得多。

应用编译完成后,浏览器应显示“您的 Dart 应用正在运行”。

启动精简应用

5. 向应用添加自定义代码

#

让我们自定义您刚刚创建的应用。

  1. 将以下代码片段中的 thingsTodo() 函数复制到 web/main.dart 文件中:

    dart
    Iterable<String> thingsTodo() sync* {
      const actions = ['Walk', 'Wash', 'Feed'];
      const pets = ['cats', 'dogs'];
    
      for (final action in actions) {
        for (final pet in pets) {
          if (pet != 'cats' || action == 'Feed') {
            yield '$action the $pet';
          }
        }
      }
    }
  2. 添加 newLI() 函数(如下所示)。 它创建一个包含指定 String 的新 LIElement

    dart
    Iterable<String> thingsTodo() sync* { /* ... */ }
    
    HTMLLIElement newLI(String itemText) =>
      (document.createElement('li') as HTMLLIElement)..text = itemText;
     
    void main() { /* ... */ }
  3. main() 函数中,使用 appendChildthingsTodo() 中的值将内容附加到 output 元素:

    dart
    Iterable<String> thingsTodo() sync* { /* ... */ }
    
    HTMLLIElement newLI(String itemText) =>
      (document.createElement('li') as HTMLLIElement)..text = itemText;
    
    void main() {
     final output = querySelector('#output');
     for (final item in thingsTodo()) {
       output?.appendChild(newLI(item));
     }
    }
  4. 保存您的更改。

  5. webdev 工具会自动重建您的应用。 刷新应用的浏览器窗口。 现在您的简单 Dart 应用有了待办事项列表! 它应该看起来像这样:
    运行修改后的应用

  6. 可选:通过编辑 web/styles.css 来改进格式,然后重新加载应用以检查您的更改。

    css
    #output {
      padding: 20px;
      text-align: left;
    }

6. 使用 Dart DevTools 检查应用

#

使用 Dart DevTools 设置断点、查看值和类型以及逐步执行应用的 Dart 代码。 有关设置详细信息和演练,请参阅 调试 Dart Web 应用

7. 构建和部署您的 Web 应用

#

要在开发环境之外运行您的 Web 应用,您需要构建和部署它。 要了解有关部署 Dart Web 应用的更多信息,请查看 Web 部署

接下来的步骤?

#

查看以下资源:

如果您遇到问题,请在 社区和支持 中寻求帮助。