AMP 互动性介绍

重要提示：本文档不适用于您当前选择的格式 电子邮件！

这些指南概述了如何创建交互式 AMP 页面。互动性对于现代网络至关重要。构建独特而愉快的体验可以吸引用户，让他们留在您的网站上。AMP 提供了满足常见交互需求的开箱即用解决方案，同时也提供了高度可自定义和灵活的解决方案。

构建交互式体验可能感觉不传统，事实也确实如此！但这并不意味着它更难。一旦您了解了概念并理解了语法，许多交互式体验就很容易使用 AMP 构建。

AMP 中有几个级别的互动性。您可以将一个、多个、全部或不将任何互动性应用于 AMP 页面。阅读本指南的各节，了解如何在 AMP 中构建互动性。

互动性基础

本指南概述了 AMP 提供的内置互动性。它解释了如何轻松实现常见的原语，例如隐藏和显示元素。

你好，世界！

  <h1 id="hello">Hello World!</h1>
  <button on="tap:hello.hide">Hide</button>
  <button on="tap:hello.show">Show</button>
  <button on="tap:hello.toggleVisibility">Toggle</button>

在 playground 中打开此代码片段

从这里开始学习可以构建并与其他交互可能性结合的基础知识。

使用 AMP 组件实现的现成互动性

AMP 最强大的优势之一是其丰富的现成组件库。它们中的许多都是可以自定义和组合以构建独特体验的交互式元素！

  <amp-sidebar id="sidebar" class="sample-sidebar" layout="nodisplay" side="right">
    <h3>Sidebar</h3>
    <amp-accordion id="my-accordion" disable-session-states>
      <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 expanded>
        <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>
    <button on="tap:sidebar.close">Close sidebar</button>
    <button on="tap:sidebar.toggle">Toggle sidebar</button>
  </amp-sidebar>
  <button on="tap:sidebar.toggle">Toggle sidebar</button>
  <button on="tap:sidebar.open">Open sidebar</button>

在 playground 中打开此代码片段

本指南介绍了最常见的交互式组件，并概述了实现模式。

构建个性化的互动体验

虽然 AMP 为常见的 Web 小部件和互动性提供了解决方案，但每个网站都有自己的需求。AMP 通过三个组件拥抱高度个性化的体验：amp-selector、amp-bind 和 amp-script。这三个组件没有默认的 UI。相反，它们用于创建基于选择的界面并构建响应用户交互的动态页面。

<head>
  <meta
    name="amp-script-src"
    content="sha384-qdYQLoj2SRKXBu33BwIoyRKorw0b0nQ8UPIoIMc9wL8KVLcKODSAK52yNGQNS_vN"
  />
  <style amp-custom>
    .clickedButton {
      border: 5px solid green;
    }
  </style>
</head>
<body>
<amp-script width="200" height="100" script="hello-world" [class]="scriptStyle">
  <button>Hello amp-script!</button>
</amp-script>
<script id="hello-world" type="text/plain" target="amp-script">
  const btn = document.querySelector('button');
  btn.addEventListener('click', () => {
    document.body.textContent = 'Hello World!';
    AMP.setState({ scriptStyle: "clickedButton" })
  });
</script>
</body>

在 playground 中打开此代码片段

使用本指南作为了解三者之间差异的介绍，了解是否以及如何将它们彼此组合并与页面元素一起使用。

客户端渲染

本指南概述了 AMP 中的客户端渲染可能性。默认情况下，AMP 页面是服务器端渲染的。但是，在某些情况下，需要在客户端动态渲染数据，例如文章列表或用户购物车中的项目。

查看客户端筛选示例。

阅读客户端渲染，开始了解 AMP 组件和启用客户端渲染的概念。

作者： @CrystalOnScript