实现应用外壳

任何项目都可以有多种起步方式，通常我们推荐使用 Web Starter Kit。但是，这里为了保持我们的项目足够简单并专注于 Progressive Web Apps，我们提供了你所需的全部资源。关于Web Starter Kit，暂时没有往网上放（因为本人访问百度网盘都要*，速度太慢），可以*的朋友，可以到https://github.com/google/web-starter-kit/releases/latest下载，不能*的，可以加我qq58620506，回头有时间了再放到网盘里

为应用外壳编写 HTML 代码

为了保证我们的起步代码尽可能清晰，我们将会开始于一个新的 index.html 文件并添加在构建应用外壳中谈论过的核心组件的代码

请记住，核心组件包括：

包含标题的头部，以及头部的添加/刷新按钮
放置天气预报卡片的容器
天气预报卡片的模板
一个用来添加城市的对话框
一个加载指示器

<!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 ></button>
        <button ></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 ></circle>
        </svg>
    </div>
    <!-- Insert link to app.js here -->
</body>

</html>

需要注意的是，在默认情况下加载指示器是显示出来的。这是为了保证用户能在页面加载后立刻看到加载器，给用户一个清晰的指示，表明页面正在加载。

为了节省你的时间，我们已经已创建了 stylesheet。

添加关键的 JavaScript 启动代码

现在我们的 UI 已经准备好了，是时候来添加一些代码让它工作起来了。像搭建应用外壳的时候那样，注意考虑哪些代码是为了保持用户体验必须提供的，哪些可以延后加载。

在启动代码中，我们将包括(你可以在(scripts/app.js)的文件夹中找到)：

一个 app 对象包含一些和应用效果的关键信息。
为头部的按钮（add/refresh）和添加城市的对话框中的按钮（add/cancel）添加事件监听函数。
一个添加或者更新天气预报卡片的方法（app.updateForecastCard）。
一个从 Firebase 公开的天气 API 上获取数据的方法(app.getForecast)。
一个迭代当前所有卡片并调用 app.getForecast 获取最新天气预报数据的方法 (app.updateForecasts).
一些假数据 (fakeForecast) 让你能够快速地测试渲染效果。

测试

现在，你已经添加了核心的 HTML、CSS 和 JavaScript，是时候测试一下应用了。这个时候它能做的可能还不多，但要确保在控制台没有报错信息。

为了看看假的天气信息的渲染效果，从 index.html中取消注释以下的代码:

<!--<script src="scripts/app.js" async></script>-->

接下来，从 app.js中取消注释以下的代码:

// app.updateForecastCard(initialWeatherForecast);

刷新你的应用程序，你将会看到一个比较整齐漂亮的天气预报的卡片:

实现应用外壳

尝试并确保他能正常运作之后，将 app.updateForecastCard 清除。

实现应用外壳

添加关键的 JavaScript 启动代码

测试

相关推荐