你的第一个渐进式网站应用（4）
4. 实现你的App Shell
任何项目都可以以多种方式开始，我们通常建议使用Web Starter Kit。但是，在这个案例中，为了让我们的项目尽可能简单，并专注于渐进式网站应用，我们为您提供您需要的所有资源。
更多关注Web Starter Kit
为App Shell创建HTML
现在我们将要添加在建立你的App Shell章节中讨论的核心组件。
请记住，关键组件包括:
- 带有一个title和add/refresh按钮的头部
- 天气预报卡片容器
- 一个天气预报卡片模版
- 一个添加新城市的对话框
- 一个加载指示器
index.html 文件在你的 work 目录中已经准备就绪，如下所示 (这是部分代码，不要复制代码到你的文件中):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather PWA</title>
<link rel="stylesheet" type="text/css" href="styles/inline.css">
</head>
<body>
<header class="header"><!--头部-->
<h1 class="header__title">Weather PWA</h1><!--标题-->
<button id="butRefresh" class="headerButton"></button><!--刷新按钮-->
<button id="butAdd" class="headerButton"></button><!--添加按钮-->
</header>
<main class="main">
<div class="card cardTemplate weather-forecast" hidden><!--默认隐藏-->
. . .
</div>
</main>
<div class="dialog-container"><!--对话框容器-->
. . .
</div>
<div class="loader"><!--载入指示器-->
<svg viewBox="0 0 32 32" width="32" height="32">
<circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
</svg>
</div>
<!-- Insert link to app.js here -->
</body>
</html>请注意，加载器（菊花）默认是可见的。这可以确保用户在页面加载时立刻看到加载器，从而明确指示内容正在加载。
为了节省时间，我们也已经创建了样式表供您使用。
我们给了你的标记和样式，帮助你节省一些时间，并确保你在一个坚实的基础上开始。在下一节中，您将有机会编写你自己的代码。
查看关键的JavaScript代码
现在我们已经准备好了大部分的用户界面，是时候开始连接代码让一切的工作起来。像其他应用app shell一样，请注意哪些代码是作为关键体验一部分所必需的，以及稍后会加载哪些代码。
你的work目录也已准备好，包含app的代码 (scripts/app.js),在这里你可以找到:
- 一个
app对象，包含了app所必须的一些关键信息。 - 时间监听器用于头部中的所有按钮 (
add/refresh) 以及添加城市对话框中的 (add/cancel). - 一个添加和更新天气预报卡的方法 (
app.updateForecastCard). - 一个从Firebase Public Weather API (
app.getForecast)获取最新天气预报数据的方法. - 一种迭代当前卡片的方法并且调用
app.getForecast去或者最新的天气预报数据 (app.updateForecasts). - 一些假数据 (
initialWeatherForecast) 你可以用来快速测试相关事物是如何渲染的。
测试
现在你已经有了核心的HTML，样式和JavaScript，现在是测试这个应用程序的时候了。
要查看假天气数据是如何呈现的，请取消 index.html 文件底部的代码注释:
<!--<script src="scripts/app.js" async></script>-->接着，取消下面所示的app.js 文件底部的代码注视:
// app.updateForecastCard(initialWeatherForecast);重新载入你的. 结果还不错 (虽然是假数据)，天气预报卡带有不可用的spinner, 像下面这样:
一旦您尝试过并验证其正常工作，您可以再次使用伪数据移除对 app.updateForecastCard 进行调用。我们只需要它确保一切按预期工作。
本文系外文翻译，前往查看
如有侵权，请联系?cloudcommunity@tencent.com?删除。
本文系外文翻译，前往查看
如有侵权，请联系?cloudcommunity@tencent.com 删除。