免費AI編程助手
第 2 章 步驟 1：運行一個框架應(yīng)用
在這一步中，你打開源文件，熟悉你自己的 Dart 和 HTML 代碼，然后運行這個 App。
新建一個 1-blankbadge 目錄
在Dart編輯器中，點擊 1-blankbadge 下 web 目錄左邊的小箭頭，展開 web 目錄。這個目錄包含一個 piratebadge.css 文件，一個 piratebadge.dart ，和一個 piratebadge.html 文件。
打開文件
在Dart編輯器中，通過雙擊文件名來打開 piratebadge.dart 文件和 piratebadge.html 文件
查看代碼
熟悉一下這個框架應(yīng)用的 HTML 和 Dart 代碼。
piratebadge.html
<html>
<head>
<meta charset="utf-8">
<title>Pirate badge</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="piratebadge.css">
</head>
<body>
<h1>Pirate badge</h1>
<div class="widgets">
TO DO: Put the UI widgets here.
</div>
<div class="badge">
<div class="greeting">
Arrr! Me name is
</div>
<div class="name">
<span id="badgeName"> </span>
</div>
</div>
<script type="application/dart" src="piratebadge.dart"></script>
<script src="https://atts.w3cschool.cn/attachments/image/cimg/dart.js"></script>
</body>
</html>關(guān)鍵信息：
-
在這次代碼試驗中，你對
piratebadge.html文件的所有更改都是在class為widgets的<div>標(biāo)簽中進行的。 -
在后續(xù)步驟中,
id為badgeName的<span>標(biāo)簽會被具有用戶輸入功能的Dart代碼升級。 -
第一個
<script>標(biāo)簽引入了一個主文件，piratebadge.dart文件。 -
Dart 虛擬機可以原生地運行 Dart 代碼。 Dart 虛擬機會在 Dartium 中構(gòu)建－－一個特殊的，可以讓你運行Dart App的 Chromium 瀏覽器。
-
packages/browser/dart.js腳本會檢查原生Dart支持，同時引導(dǎo)Dart虛擬機載入編譯JavaScript腳本。
piratebadge.dart
void main() {
// 你的應(yīng)用從這里開始
}關(guān)鍵信息：
-
這個文件包含一個程序的入口 main() 方法. 在
piratebadge.html文件的<script>標(biāo)簽會通過運行這個方法來開始應(yīng)用。 -
main() 方法是一個
top-level的方法。 -
一個
top-level的變量或者方法是在類外進行公開定義的
運行這個應(yīng)用
在Dart編輯器中運行一個應(yīng)用：右擊 piratebadge.html 文件然后選擇 Run in Dartium。
圖片 2.2 運行
更多建議：