使用 AMP 组件实现现成的交互功能
本指南概述了 AMP 组件库中可用的交互可能性。该库提供了现成的元素，可以满足常见和不常见的用户界面需求。您可以自定义这些组件，以及它们与用户的交互方式，以满足特定需求。请继续阅读，了解如何利用它来降低初始构建成本，而又不失适应性。
现成的交互式组件
许多可用的组件都满足单一的交互目的。大多数可以独立存在，但 AMP 的核心原则是可组合性。可组合性允许您将不同的 AMP 组件组合在一起，以实现自定义的交互。大多数都允许使用 amp-mustache 进行模板化。
AMP 提供以下现成的交互式组件
- amp-accordion：一个堆叠的标题列表，可通过用户交互折叠或展开内容部分。
- amp-app-banner：一个跨平台、固定位置的横幅的包装器和最小用户界面，显示安装应用程序的号召性用语。
- amp-autocomplete：在用户键入时，建议与用户输入对应的完整结果。
- amp-base-carousel：沿着水平轴或垂直轴显示多个相似的内容片段。
- amp-carousel：沿着水平轴显示多个内容片段，用户可以点击浏览。
- amp-consent：一个收集和存储用户同意的用户界面控件。可以根据用户同意阻止其他 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 video 标签。
- 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