AMP

amp-bind 为 AMP 页面带来灵活的交互性

未分类

我们邀请开发者在 4 月份试用 amp-bind来试验具有更强的 AMP 页面交互性。今天，我们想重点介绍amp-bind 已普遍可用，并深入了解该功能，以便让你了解它在多大程度上扩展了 AMP 支持，尤其是对于电子商务。

什么是 amp-bind？

我们在一篇 4 月份的博客文章中介绍了 amp-bind，并表示：

amp-bind从根本上改变了 AMP 中的交互性模型，同时保留了 AMP 的基本性能和 UX 保证。amp-bind 更多地像是在 AMP 之上的一个编码层，它超越了 AMP 项目以往将交互性限制在范围限定的、用例驱动的组件（如amp-carousel和amp-accordion）的做法。amp-bind 将用户操作与不同文档状态的触发器关联起来，从而让开发者在可以定义的交互类型方面拥有更大的自由度。

虽然这个定义在技术上是准确的，但它也相当抽象。该功能非常灵活，以至于一个广泛的描述并不能真正揭示它实际可以做什么。

amp-bind 可以做什么？

开始的一种好方法是查看一些基本行为以了解此功能。然后，你可以通过调整AMP by Example 游乐场中的部分代码来亲自尝试。

在掌握基础知识后，以下示例将向你展示将 amp-bind 与其他 AMP HTML 功能结合使用时可能实现的部分功能。

  • 产品颜色和尺寸选择（详细示例见下文）
  • 服务器端筛选和排序（详细示例见下文）
  • 无页面重新加载的搜索结果（详细示例见下文）
  • 搜索自动建议（详细示例见下文）
  • 轮播幻灯片指示器（详细示例见下文）
  • 从“select”输入触发导航
  • 根据“喜欢”、“点赞”、“添加到购物车”等更新整个页面状态的智能按钮。可以根据此操作显示个性化推荐的轮播、增加购物车中的商品数量或“喜欢”计数。
  • 在项目数组的不同视图（列表与网格）之间切换。
  • 切换覆盖 UI 面板，以便在购买前自定义产品选项
  • 隐藏/显示工具提示
  • 使用自定义滑块筛选 amp-list 数据
  • 更改货币（例如，从美元到欧元），而无需更新整个页面
  • 还有更多！

产品颜色和尺寸选择

此示例结合了产品详情页面中常见的许多功能，但如果您不需要整个交互，也可以将这些功能分开并单独使用。在此，amp-bind 协调了 amp-form、amp-selector、amp-carousel 和一些基本 CSS 之间的事件和操作。

  1. 用户在 amp-form 中进行选择（使用 amp-selector 的输入，以便轻松自定义和明确语义）
  2. 每个此类选择都关联有一个事件
  3. 此事件通过 amp-bind 协调，以执行以下操作
    1. 触发三个不同的 amp-carousel 之一（每个对应一种颜色的苹果）的 CSS 显示
    2. 触发表单输入中的“已禁用”属性（以及样式），其中特定颜色的苹果没有特定尺寸
    3. 根据苹果的颜色触发价格更新

由于页面使用 amp-bind，因此用户可以直观地确认其选择，以便在提交表单之前充分了解其购买情况。

服务器端筛选和排序

使用服务器端数据进行排序和筛选现在可以通过 amp-list[src] 绑定实现。它使用 amp-bind 来协调“select”输入和 amp-list 之间的事件和操作。我们来逐步了解一下：

  1. 用户选择排序或筛选规则（例如“从低到高”）
  2. 有一个事件与更改“select”输入状态相关联
  3. 此事件通过 amp-bind 协调，以触发对 amp-list 的 src 属性的更新，附加一个与排序规则匹配的查询参数（?sort=price-ascending），该参数会向服务器发送一个调用
  4. 服务器根据排序规则响应结果列表，该列表由 amp-list 根据其定义的模板进行呈现

由于绑定事件可以由一系列输入触发，因此您可以将此基本模式用于许多其他功能，例如通过“显示更多”按钮添加其他结果，或对列表结果进行分页，以便用户可以在不重新加载父页面的情况下浏览列表中的其他项目。开发人员您甚至可以实现一种体验，让用户刷新个性化推荐列表。

最佳实践：在首次加载页面时使用 div[placeholder] 以静态方式显示结果，以便在结果显示给用户之前不会出现延迟。然后，当用户与排序和筛选机制交互时，您可以使用 amp-bind 通过 amp-list 向“src”属性中定义的更新的 URL 发出调用，以显示结果。

无需重新加载页面即可获得搜索结果

通过在不重新加载整个页面时获取和显示搜索结果，用户可以节省带宽，并且通过保留当前页面的上下文，可以获得更无缝的体验。实现方法是绑定到 amp-list 的另一个应用，这次还使用了 amp-form。

  1. 用户通过 amp-form 搜索“梨”
  2. 此搜索触发的事件通过 amp-bind 协调，触发对 amp-list 的 src 属性的更新，附加一个与搜索查询匹配的查询参数（?searchProduct=pear），该参数会向服务器发送一个调用
  3. 服务器根据搜索查询响应一个结果列表，该列表由 amp-list 根据其定义的模板进行渲染

搜索自动建议

这个（此处为代码）为 amp-list[src] 绑定添加了更多复杂性。它使用 amp-bind 来协调 amp-form 和 amp-list 之间的事件和操作。

  1. 用户开始在搜索框中输入内容
  2. 表单字段中有与文本输入关联的事件（防抖，以防止每次按键都触发这些事件）
  3. 此事件通过 amp-bind 协调，执行两项操作
    1. 触发包含 amp-list 的隐藏 div 的可见性
    2. 触发对该 amp-list 的 src 属性的更新，该属性会向服务器发送一个调用，其中包含用户在表单中输入的部分查询
  4. 服务器根据此查询响应一个潜在结果列表，amp-list 通过其模板渲染该列表——用户会看到这些选项作为自动建议
  5. amp-list 模板协调点击其中任何一个建议以更新表单字段，完成交互

注意：如果你正在构建自己的自动建议功能，请记住关闭浏览器自动自动建议功能，以避免同时覆盖两个不同的 UI

查看 GitHub 上的示例，深入了解其工作原理。你可以将示例复制粘贴到自己的页面中，并自定义模板和后端以提供任何内容：一方面，你可以为用户可以搜索的单词提供更细化的建议，另一方面，你可以为产品结果显示包含价格、图片和评级的详细信息丰富的卡片。

轮播幻灯片指示器

此处 amp-bind 仅用于协调 amp-carousel 的索引与简单页面指示器上的 CSS 样式（轮播左下角的四个点）。

  1. 用户在轮播中滑动幻灯片
  2. 有一个事件与可见幻灯片的更改相关联
  3. 此事件通过 amp-bind 进行协调，以触发分页点 CSS 样式的更改

此功能意味着开发人员可以配置广泛的指示，以指示轮播是可滑动的，并且不需要依赖 amp-carousel 默认箭头。

接下来是什么？

amp-bind 现在很稳定，但仍在积极地获得更多功能。根据我们从社区获得的反馈，我们正在添加一些功能，使该组件更加强大，同时不牺牲 AMP 的基本性能和 UX 保证。

在其他内容中，路线图包括：从绑定更新 URL 查询参数和相应的历史记录状态，以完成排序/筛选用例；启用 iframe 和其父文档之间的消息传递，以实现跨越 AMP 中内联和嵌入内容界限的丰富交互；以及更新绑定，以通过服务器调用验证的表单协调页面状态。

继续！探索！（并分享你的发现）

最终，开发者可能会发现比 AMP 团队在此处确定的更多新功能。所以，继续吧！探索！使用 amp-bind 进行实验，并 告诉我们你的发现——我们很乐意看到你构建的内容，并与更广泛的 AMP 社区分享。

一如既往，我们希望你 反馈 amp-bind，以及 AMP 中你需要的任何其他功能。我们期待收到你的来信！

作者：Eric Lindley，AMP 项目产品经理