使用 AMP 组件实现现成的互动性
本指南概述了 AMP 组件库 中可用的交互可能性。该库提供了满足常见和不常见用户界面需求的现成元素。你可以自定义这些组件以及它们与用户交互的方式，以满足特定需求。继续阅读以了解如何利用这一点来降低初始构建成本，同时不丧失适应性。
现成的交互式组件
许多可用组件都满足单一的交互目的。大多数可以独立使用，但 AMP 的核心原则是可组合性。可组合性允许你将不同的 AMP 组件组合在一起，以实现自定义交互。大多数允许使用 amp-mustache 进行模板化。
AMP 提供以下现成的交互式组件
- amp-accordion：一个堆叠的标题列表，可以通过用户交互折叠或展开内容部分。
- amp-app-banner：一个包装器和一个用于跨平台、固定位置横幅的最小 UI，显示一个安装应用程序的号召性用语。
- amp-autocomplete：在用户输入时建议完成的结果。
- amp-base-carousel：沿水平轴或垂直轴显示多个类似的内容片段。
- amp-carousel：沿水平轴显示多个内容片段，用户可以通过点击浏览这些片段。
- amp-consent：一个 UI 控件，用于收集和存储用户的同意。可以根据用户的同意阻止其他 AMP 组件。
- amp-date-picker：一个用于选择日期的小部件。
- amp-form：创建表单，但具有 AMP 能力。
- amp-lightbox-gallery：在灯箱画廊中显示图像。
- amp-image-lightbox：为指定图像提供灯箱效果。
- amp-image-slider：一个用于比较两张图像的滑块。
- amp-inline-gallery：沿水平轴显示多个图像，用户可以通过点击浏览这些图像。
- amp-inputmask：为 AMP 表单中的输入提供输入掩码功能。
- amp-lightbox：在全视口“灯箱”模式中显示元素。
- amp-mega-menu：在可扩展容器内显示顶级导航内容。
- amp-nested-menu：显示具有任意嵌套子菜单级别的钻取菜单。
- amp-recaptcha-input：将 reCAPTCHA v3 令牌附加到 AMP 表单提交。
- amp-sidebar：一种显示元内容的方式，用于临时访问，例如导航、链接、按钮、菜单。
- amp-truncate-text：用省略号截断文本，可以选择显示溢出元素。
- amp-user-notification：向用户显示可关闭的通知。
- amp-video：替换 HTML5 视频标签。
- amp-video-docking：视频功能，可最小化（“停靠”）到滚动时的角落或自定义位置。
实现模式
使用 AMP 组件可能就像复制和粘贴示例代码一样简单！如果没有，您可以指定功能。每个组件的参考文档概述了行为和样式自定义。
如果您找不到现成的解决方案，请考虑如何通过组合现有组件来实现所需的行为。组合多个组件或其他 HTML 元素以创建新组件！AMP 团队始终对开发人员构思的创意解决方案感到惊讶，其中一些解决方案在我们的示例中有所体现（如果您创建了一些很酷的东西，我们鼓励您做出贡献！）。不可能记录所有组合 AMP 组件的方法，但本部分概述了一些最佳实践。
使用属性自定义行为
通过使用通用 AMP 属性和特定于元素的属性，您可以自定义和组合组件以满足您的需求。阅读参考文档以了解其特定属性。
细微的行为改变
某些属性会改变一些行为。在下面的示例中，amp-accordion包含animate属性。此属性为每个部分在用户与其交互时的展开和折叠添加了一个轻微的“向下滚动”动画。
<amp-accordion animate>
<section>
<h2>Section 1</h2>
<p>Content in section 1.</p>
</section>
<section>
<h2>Section 2</h2>
<div>Content in section 2.</div>
</section>
<section>
<h2>Section 3</h2>
<amp-img
src="/static/inline-examples/images/squirrel.jpg"
width="320"
height="256"
alt="Photo of a squirrel"
></amp-img>
</section>
</amp-accordion>
组合与构成
将 AMP 组件与其他 AMP 组件或 HTML 元素结合使用，以改进或构建更复杂的互动性和用户体验。例如，结合使用 amp-form 和 amp-date-picker 来创建预订流程。
<form method="post" action-xhr="/documentation/examples/api/submit-form-xhr" target="_top">
<amp-date-picker id="form-picker" type="single" mode="static" layout="fixed-height" height="360" format="YYYY-MM-DD">
</amp-date-picker>
<input type="submit">
<div submit-success>
Thanks!
</div>
</form>
您可以组合的组件数量没有限制。下面的示例基于前一个示例。我们添加了 amp-inputmask 来传达用户接受的输入类型，并添加了 amp-mustache 来传递成功消息。
<form class="sample-form" method="post" action-xhr="/documentation/examples/api/postal" target="_top">
<amp-date-picker id="form-picker" type="single" mode="static" layout="fixed-height" height="360" format="YYYY-MM-DD">
</amp-date-picker>
<label>Phone: <input name="code" type="tel" mask="+\1_(000)_000-0000" placeholder="+1 (555) 555-5555" mask-output="alphanumeric"></label>
<input type="submit">
<div submit-success>
<template type="amp-mustache">
<p>The raw value: {{code}}</p>
<p>The unmasked value: {{code-unmasked}}</p>
</template>
</div>
</form>
指南开头列出的组件是开始使用 AMP 的好方法。熟悉这些组件可帮助您了解 AMP 提供的不同构建模块的概况。
操作和事件
正如 交互基础 中所述，AMP 公开了全局可用的操作和事件。AMP 的许多组件都有自己的组件特定操作和事件，可通过使用该组件来实现。 AMP 的操作和事件系统 是实现更复杂交互模式的有力方式。在下面的示例中，我们在表单成功提交时打开一个灯箱。
<form on="submit-success:amp-lightbox-gallery.open(id='squirrel')" method="post" action-xhr="/documentation/examples/api/postal" target="_top">
<label>Postal code: <input name="code" mask="L0L_0L0" placeholder="A1A 1A1"></label>
<input type="submit">
<div submit-success>
<amp-img src="/static/inline-examples/images/squirrel.jpg" width="320" height="256" lightbox id="squirrel" alt="Photo of a squirrel"></amp-img>
</div>
</form>
查看操作和事件概述页面，以详细了解 AMP 中可用的不同类型的操作和事件。
定义可重复使用的操作
如果你正在链接多个操作，则可以将它们一起定义为一个可重复使用的操作。使用 amp-action-macro 组件来创建 AMP 操作宏。每个操作宏都需要一个 ID 和一个要执行的操作。通过其 ID 调用操作宏，并传递改变其行为的参数。
<amp-action-macro
id="navigate-action"
execute="AMP.navigateTo(url='https://amp.org.cn/')"
></amp-action-macro>
<button on="tap:navigate-action.execute()">amp.dev</button>
继续自定义
本指南仅提供了几个示例，说明如何使用现成的组件构建交互性。如果你需要一个未列出的现成组件，你可以提交 功能请求 或声明 意向实施 并 自己贡献。否则，请查看 构建个性化交互式体验，以了解 AMP 中高度定制的集成选项。
-
由 @sbenz 贡献