你的第一个渐进式网站应用(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, 像下面这样:

TRY IT

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

原文链接:https://codelabs.developers.google.com/codelabs/your-first-pwapp/#3

原文作者:codelabs.developers.google.com

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小文博客

如何正确使用百度(百度——最好的老师)——小文’s blog

1661
来自专栏Android开发实战

链家爬虫(python spider) 成交数据及在售数据爬取

开源地址: https://github.com/AnyMarvel/LianjiaSpider https://gitee.com/dssljt/Lianji...

2042
来自专栏进击的君君的前端之路

初识React

1002
来自专栏携程技术中心

干货 | React Native实践之携程Moles框架

因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试。但有一个痛点是,在移动端,我们是否有必要开发多套程...

1869
来自专栏极乐技术社区

小灯灯实战系列《三》微信小程序:仿今日头条(下)

接着上一篇  上一篇文章中,我们已经完成了头条的新闻列表、新闻详情功能了,但是还存在一些值得优化的地方,以及评论功能没有加上。  欢迎Star Github开源...

2526
来自专栏葡萄城控件技术团队

纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中更易用

作为一款纯前端控件集,WijmoJS 秉承“快如闪电,触控优先”的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进。除在全球...

1082
来自专栏Crossin的编程教室

【Pygame 第3课】 游戏中的事件

有人问,为什么突然讲游戏了?有人问,为什么不继续讲python的基础?有人问,为什么不讲爬虫?有人问,为什么不讲算法?…… 因为有很多内容,每一块都有想听的人。...

2747
来自专栏http://www.cnblogs.com

第二周作业购物车程序

#coding:utf-8 #Author:Mr Zhi file_open = open('购物车用户信息','r+',encoding="utf-8") ...

30210
来自专栏QQ会员技术团队的专栏

H5直播避坑指南

面对着产品同学不断的询问:为什么 h5 的体验这么差?为什么不能和 app 的播放体验保持一致?我们对着 h5 不明确的文档和不同浏览器的怪异表现欲哭无泪。

43913
来自专栏walterlv - 吕毅的博客

修复 WPF 窗口在启动期间短暂的白底显示

2017-11-03 15:08

301

扫码关注云+社区