第 2 章 步驟 1：運(yùn)行一個(gè)框架應(yīng)用
在這一步中，你打開源文件，熟悉你自己的 Dart 和 HTML 代碼，然后運(yùn)行這個(gè) App。
新建一個(gè) 1-blankbadge 目錄
在Dart編輯器中，點(diǎn)擊 1-blankbadge 下 web 目錄左邊的小箭頭，展開 web 目錄。這個(gè)目錄包含一個(gè) piratebadge.css 文件，一個(gè) piratebadge.dart ，和一個(gè) piratebadge.html 文件。
打開文件
在Dart編輯器中，通過雙擊文件名來打開 piratebadge.dart 文件和 piratebadge.html 文件
查看代碼
熟悉一下這個(gè)框架應(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)鍵信息：
-
在這次代碼試驗(yàn)中，你對(duì)
piratebadge.html文件的所有更改都是在class為widgets的<div>標(biāo)簽中進(jìn)行的。 -
在后續(xù)步驟中,
id為badgeName的<span>標(biāo)簽會(huì)被具有用戶輸入功能的Dart代碼升級(jí)。 -
第一個(gè)
<script>標(biāo)簽引入了一個(gè)主文件，piratebadge.dart文件。 -
Dart 虛擬機(jī)可以原生地運(yùn)行 Dart 代碼。 Dart 虛擬機(jī)會(huì)在 Dartium 中構(gòu)建－－一個(gè)特殊的，可以讓你運(yùn)行Dart App的 Chromium 瀏覽器。
-
packages/browser/dart.js腳本會(huì)檢查原生Dart支持，同時(shí)引導(dǎo)Dart虛擬機(jī)載入編譯JavaScript腳本。
piratebadge.dart
void main() {
// 你的應(yīng)用從這里開始
}關(guān)鍵信息：
-
這個(gè)文件包含一個(gè)程序的入口 main() 方法. 在
piratebadge.html文件的<script>標(biāo)簽會(huì)通過運(yùn)行這個(gè)方法來開始應(yīng)用。 -
main() 方法是一個(gè)
top-level的方法。 -
一個(gè)
top-level的變量或者方法是在類外進(jìn)行公開定義的
運(yùn)行這個(gè)應(yīng)用
在Dart編輯器中運(yùn)行一個(gè)應(yīng)用：右擊 piratebadge.html 文件然后選擇 Run in Dartium。
圖片 2.2 運(yùn)行
更多建議：