课程介绍

再次欢迎

在前两门课程中，我们学习了如何创建基本的 AMP 网站。我们学习了如何使用组件向我们的网站添加功能并处理用户交互。

我们一起从头开始为虚构的 Chico's Cheese Bicycles 商店构建了一个网站。我们添加了视频和图像等内容、一个新闻通讯订阅表格、一个滑出式菜单和一个更精美的图像轮播。

我们已经做了很多工作，那么还有什么需要学习的呢？

首先：在我们目前构建的网站中，每个访问者看到的内容都相同。如果我们想要创建一个根据访问网站的用户而不同的网站，该怎么办？

这种动态网站在当今的互联网中很常见。我们可能都会访问相同的 URL 来阅读我们的电子邮件，但我们看到的电子邮件是不同的。在购物网站上，我们会看到根据我们过去的选择个性化的产品列表，并且我们会看到我们创建的购物车。在社交媒体上，我们看到由确定我们兴趣的算法生成的目标内容，以及我们自己创建的内容。在新闻网站上，我们阅读突发新闻和其他读者的评论。在每种情况下，这些网站的设计者都必须在不知道将显示的确切内容的情况下开发页面。

在本系列的最后一门课程中，我们将学习如何根据用户与我们网站的交互来更改页面上的外观或内容。在本课程结束时，您将学习如何

• 响应用户操作，在应用程序状态变量中存储信息。

• 当状态变量更新时，更改网站的内容或外观。

• 使用模板在您的页面上检索和显示服务器数据。

• 动态更改屏幕上的内容（即，过滤和排序数据）。

为了实现这些目标并继续开发我们的奶酪自行车网站，我们将继续改进我们的图像轮播。在初级课程中，我们学习了如何使用 AMP 组件创建轮播。在中级课程中，我们通过添加额外的缩略图轮播扩展了轮播的功能。当用户在任一轮播中更改幻灯片时，两个轮播中的活动幻灯片都会更新。我们使用 AMP 事件和操作实现了这一点。

在本高级课程中，我们将把轮播更改为从应用程序状态运行。我们将当前幻灯片存储在状态变量中，并在幻灯片值更改时使用绑定来更新每个轮播。然后，我们将了解添加第三个组件有多么容易，该组件也会观察选定的幻灯片值并在其更改时更新。

接下来，我们将把我们的第一个产品添加到我们的 Chico's Cheese Bikes 网站。在初级和中级课程中，我们页面上的所有内容都包含在我们的 HTML 文件中。但是，此产品列表将从服务器加载，然后在屏幕上显示。用户还可以按价格对产品进行排序，并使用产品类别进行过滤。为此，我们将结合应用程序状态、绑定和检索服务器数据的新概念，以及之前关于组合组件和响应用户输入课程的知识。

除了改进我们的自行车商店网站外，我们还将花时间研究可以使用 AMP 构建的其他类型的网站。完成此培训并开始在 AMP 中构建自己的网站后，您可能会发现自己在处理完全不同类型的网站。因此，我们将研究诸如视频和电子商务网站之类的流行网站示例，并使用我们在这些课程中学习的概念来理解它们是如何构建的。最后，我们将使用 AMP 重建这些网站的基本版本，以展示该库的灵活性和多功能性。

课程先决条件

本课程专为想要构建高性能网站的现有开发人员和想要构建第一个网站的有抱负的开发人员而设计。此外，本课程非常适合任何正在维护或处理现有 AMP 网站的人员。

为了从这些课程中获得最大收益，您应该对 HTML 和 CSS 有基本的了解。能够识别并能够对现有的 HTML 和 CSS 进行少量添加和修改就足够了。此外，本课程还包括以 AMP 事件处理程序形式的类似 JavaScript 的语法。了解如何在 JavaScript 或类似语言中进行函数调用应该足以完成本课程的要求。

在高级课程中，我们在多个示例中从服务器检索的数据采用 JSON 格式。服务器已配置为返回正确的信息，并且每个练习都包含 JSON 数据的示例。就本课程而言，重要的是要知道如何读取 JSON 对象中的数据，如何使用 JavaScript 引用 JSON 对象中的特定数据，以及如何进行基本的 JavaScript 函数调用。如果您不熟悉 JSON 或想要复习一下，可以阅读这个培训资料。

本课程旨在作为初级和中级课程的延续。因此，它假设您了解我们已经涵盖的概念。这些概念包括

• AMP 页面结构和样板

• AMP 验证

• AMP 组件以及如何将它们组合在一起

• 如何使用 AMP 文档

• AMP 缓存

• 使用事件和操作处理用户输入

如果对这些主题中的任何一个不熟悉，我们建议复习初级课程中的材料，请单击此处，和/或中级课程中的材料，请单击此处。

设置

在本课程中，我们将继续使用Glitch来完成我们的编程练习。如果您完成了初级和/或中级课程，您可以继续使用相同的 Glitch 存储库来完成高级教程。如果您没有完成初级培训，或者如果您想从新的 Glitch 存储库开始，您可以重新混合这个，它已经实现了中级培训中的所有代码。如果您想了解更多关于 Glitch 的信息，您可以在附录中阅读相关内容。

本课程还需要 AMP 验证器。AMP 验证器是一种用于检测我们的 AMP 页面中错误的工具。编写有效的 AMP 页面是获得 AMP 全部性能优势的重要组成部分。验证器主要通过 Chrome 扩展程序访问。要安装 Chrome 扩展程序，请访问此链接此处。

让我们开始吧！