你的第一个渐进式网站应用（4）

RP道貌不岸然

修改于 2017-12-01 17:05:18

96000

代码可运行

文章被收录于专栏：ThinksThinks

运行总次数：0

代码可运行

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, 像下面这样:

TRY IT

一旦您尝试过并验证其正常工作，您可以再次使用伪数据移除对 app.updateForecastCard 进行调用。我们只需要它确保一切按预期工作。

本文系外文翻译，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

shell

html

javascript

网站

本文系外文翻译，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度