课程介绍

欢迎回来

在上一课程中，我们学习了如何通过为我们虚构的 Chico's Cheese Bike 商店启动网站来创建基本的 AMP 网站。我们还学习了如何使用 AMP 组件向我们的网站添加静态内容。我们添加了图像轮播、社交媒体帖子、视频和其他基本元素。

接下来是什么？现在，我们想为我们的网站增添更多活力。我们希望为用户提供与我们网站互动的新方式。我们希望能够从我们网站的访问者那里收集信息，并确认我们已成功收到该信息。

我们应该在我们的网站上添加哪些类型的功能来实现这些目标？我们的产品经理有一些想法。例如

• 随着我们网站的发展，我们需要一种方法让用户在页面之间导航。一种常见的方法是使用滑出式菜单。我们将按下一个按钮来打开菜单，然后按下另一个按钮来关闭它。

• 为了为我们的营销团队收集有关我们用户的信息，我们可能会决定添加一个新闻简报订阅表单。

• 当用户填写他们的信息时，我们会将他们的数据存储在我们的服务器上，并显示一条确认消息，说明我们已成功为他们注册了我们的新闻简报。

现在我们知道要创建哪些新功能。我们将如何构建它们？

在初学者培训中，我们了解到，要添加一个功能，我们只需找到并添加正确的组件。但问题是，没有“amp-newsletter-subscription-form”组件。您可能会认为目标是找到一个诸如“amp-newsletter-subscription-form”之类的组件。如果开发人员想要构建的每个功能都有不同的 AMP 组件，那么组件的数量将是无限的！

相反，我们可以通过组合组件并让它们协同工作来构建我们的功能。这种类型的方法称为“组件组合”。

组合组件并不难，但确实需要一些练习。首先，我们将确定我们要构建的功能的要求。其次，我们将寻找满足我们要求的基本 HTML 元素和 AMP 组件。最后，我们将通过将一个组件放置在另一个组件内部，或者通过配置它们，使与我们的一个组件交互导致另一个组件发生变化，从而将组件连接在一起。

在此过程中，我们还将

• 了解 AMP 如何处理用户与事件处理程序和操作的交互。

• 讨论如何使用 <amp-form> 收集用户信息。

• 解释如何使用 AMP Mustache 模板格式化服务器数据。

• 探索如何使用添加的组件和交互来增强功能。

课程先决条件

本课程专为想要构建更高性能网站的当前开发人员和希望构建其第一个网站的有抱负的开发人员而设计。此外，本课程非常适合任何维护或从事现有 AMP 网站工作的人员。

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

本课程旨在作为初学者课程的延续。因此，它假设了解该培训涵盖的概念。这些概念包括

• AMP 页面结构

• AMP 样板

• AMP 验证器

• 如何使用 AMP 组件文档

• AMP 缓存

如果您对这些主题中的任何一个不熟悉，我们建议您复习此处初学者课程的材料。

设置

在本课程中，我们将继续使用 Glitch。如果您完成了初学者课程，您可以继续使用相同的 Glitch 存储库来完成中级培训。如果您想从新的 Glitch 存储库开始，您可以重新混合这个，其中已经实现了所有代码。

想了解更多关于 Glitch 的信息吗？您可以在附录中阅读有关它的信息。

本课程还需要 AMP 验证器。AMP 验证器是一种用于检测我们的 AMP 页面中的错误的工具。Chrome 扩展程序提供了一种访问验证器的便捷方式。要安装 Chrome 扩展程序，请访问此链接此处。

准备好了吗？让我们开始吧！