组件化思维
关闭专家模式
专家模式
使用专家模式隐藏为初学者提供的 Web 开发指导。
向我们的网站添加功能
到目前为止，我们已将基本的 HTML 网站转换为基本的 AMP 网站。我们的网站中只剩下一个验证错误，我们将通过使用 <amp-img> 组件而不是 <img> 标记来修复它。当我们修复最后一个验证错误时，我们将了解什么是 AMP 组件、为什么某些 HTML 标记在 AMP 中被替换或禁用，以及如何向我们的网站添加组件。
之后，是时候向我们的网站添加其他功能了。为了完成我们的 Chico’s Cheese Bike 首页的初始版本，我们将添加一些其他的营销内容。团队决定添加一个关于制作奶酪自行车的 YouTube 视频、一个我们各种奶酪自行车产品的图片轮播，以及一些社交媒体链接，这将有助于用户在他们最喜欢的社交网络上分享我们的网站。
如此快速地向我们的网站添加如此多的内容似乎令人生畏。我们需要创建 HTML、CSS 和 JavaScript 来满足我们想要添加的功能的许多要求（例如，如何更改轮播的活动幻灯片）。然后，我们必须考虑如何使整个网站性能良好。
但这就是 AMP 的美妙之处。使用 AMP，我们不必担心所有这些细节！AMP 库的作者为我们提供了即插即用的构建块，这些构建块为我们提供了这些功能，并有助于处理性能、可访问性和安全性等质量。这些块称为组件，它们是使用 AMP 成功构建网站的关键。
什么是 Web 组件？
组件是 Web 的构建块。它们表示结构 (HTML)、样式 (CSS) 和行为 (JavaScript) 的组合，以及一个易于在您的网站中使用和与他人共享的接口。组件具有
-
名称（例如
<amp-img>），用作标记名称以标识组件。 -
自定义属性，可更改组件的行为、样式或内容（如
width、height、src和attribution）。 -
可以捕获用户对组件的输入的事件（
on属性）。
可选地，组件还具有“子项”。在这里，“子项”指的是放置在组件的开始和结束标记之间的内容（例如文本、HTML 标记或其他组件）。这些子项在页面上的显示方式对于每个组件都不同。
AMP 的组件系统可帮助您以最小的努力快速地在页面中构建高效且响应迅速的功能。AMP 库提供了可供您使用的完整组件列表。有用于构建表单和轮播的组件，用于集成页面分析的组件，用于向服务器发出 XHR 请求的组件等等。可能性几乎是无限的。您可以在 AMP 组件参考 这里查看可用组件的完整列表。
例如，以下是我们可以用于我们网站的三个 AMP 组件
| AMP 组件 | 它在我们的网站上的呈现方式 |
|---|---|
<amp-img src="IMG-URL" layout="responsive" width="640" height="480"></amp-img> |
|
<amp-twitter width="486" height="657" layout="responsive" data-tweetid="ID"></amp-twitter> |
|
<amp-youtube data-videoid="ID" layout="responsive" width="480" height="270"></amp-youtube> |
构建 AMP 网站时的目标是尽可能使用 AMP 组件。组件最大限度地利用了使用 AMP 构建的性能优势，因为您不必创建已经存在的东西，从而利用了 AMP 库作者的工作。
几乎所有的 AMP 组件都至少由一些 JavaScript 运行。对于某些 AMP 组件（如 <amp-img>），JavaScript 直接构建到您在页面顶部的样板中包含的 AMP 运行时脚本中。对于大多数 AMP 组件，您需要包含一个单独的脚本标记。这样做有一个很好的理由：您只包含您实际在网站中使用的脚本。然后，用户只需下载浏览您的页面所需的代码。下载的代码越少，您的网站加载速度就越快！
练习 3：我们的第一个组件 - <amp-img>
大多数 HTML 标记可以直接在 AMP 中使用，但某些标记（例如 <img> 标记）必须替换为等效的 AMP 组件。这些组件集成了内置的辅助功能、响应性和性能方面的最佳实践。
例如，在 <amp-img> 的情况下，AMP 要求我们指定图像的尺寸。AMP 需要在加载资产（例如图像）之前了解页面的布局。这会在您的页面加载时，但在图像资产下载之前，改善用户体验。当图像下载后，可以将它们插入到页面中，而不会导致页面上的任何现有内容移动。这使得 AMP 运行时可以根据用户的设备和互联网连接的功能来决定何时加载图像资产。
要使用该组件并解决之前出现的 <amp-img> 验证错误，请将我们页面中现有的 img 标记替换为等效的 AMP 标记。提示：不要写 <img …>，而是写 <amp-img …> 并给您的图像固定尺寸。将图像的 width 设置为 640，将 height 设置为 480。
如果需要，请参考 <amp-img> 的文档 这里。
解决方案
包含图像的页面部分应如下所示
<amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746" width=”640” height="480"></amp-img>
排列和调整组件大小
我们需要解决的下一个问题与我们页面的外观有关。您在大型桌面显示器上不会注意到它，但当我们在移动设备上查看该网站时，很容易看到哪里出了问题。
我们添加到页面中的图像不会缩小以适应较小的屏幕；它只是溢出到侧面。如果我们不指定布局图像和调整其大小的策略，它将默认为我们在代码中指定的固定宽度和高度。幸运的是，我们可以使用 AMP 的布局系统解决此问题。
我们将为我们的图像指定 responsive 类型的 layout，以便它在调整窗口大小时自动缩放。响应式布局使图像采用父容器的尺寸，同时保持原始宽高比。如果父容器只有 320 像素宽，则图像将保持其宽高比并调整为 320x240（而不是 640x480）。
将 layout 属性添加到我们的图像。如果操作正确，它将如下所示
<amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746" layout="responsive" width="640" height="480"></amp-img>
在您进行更改后，请查看您的页面。图像具有正确的宽高比，并且可以响应式地填充屏幕的宽度。问题已解决。
除了响应式布局之外，还有其他布局类型（事实上，至少有 8 种）。例如，fixed 布局指示组件永远不应从分配给它的高度和宽度调整大小。intrinsic 布局类似于 responsive 布局，除了它具有组件无法超过的内在高度和宽度的概念。某些布局只能应用于某些组件。每个组件的文档都会指定该组件的哪些布局有效。您可以在这里阅读有关其他布局类型的信息。
如果您想成为一名成功的 AMP 开发人员，那么学习如何使用布局系统至关重要。AMP 提供的所有布局都可以使用纯 CSS 实现，但它们通常可能很复杂或具有棘手的边缘情况，需要深入了解才能解决。AMP 简化了该过程，并公开了许多这些布局选项，以便在您的 AMP 页面中的任何元素上使用。查看官方文档，了解有关布局系统的更多信息。
练习 4：嵌入视频
接下来，让我们在我们的文档中嵌入一个 YouTube 视频。我们 Chico’s Bikes 的营销团队发布了这个关于我们的一辆奶酪自行车正在建造的视频。
使用 <amp-youtube> 文档，使用以下设置将此 YouTube 视频嵌入到 <amp-img> 组件下方
-
将视频 ID 设置为
BlpMQ7fMCzA。 -
使视频布局为
responsive。 -
注意：不要忘记将脚本添加到
<head>中。
推荐的样式指南
- 将元素的
width设置为480，将height设置为270。
<amp-youtube> 组件的示例。对于此练习，复制其中一个示例并根据上述要求进行调整就足够了。进行更改后，查看您的页面。您现在应该看到 YouTube 视频。
解决方案
<amp-youtube data-videoid="BlpMQ7fMCzA" layout="responsive" width="480" height="270"></amp-youtube>
请记住在 <head> 中包含 <amp-youtube> 脚本。
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>