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。这三个组件没有默认的用户界面。相反，它们用于创建基于选择的界面，并构建对用户交互做出响应的动态页面。

<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 撰写