AMP 电邮基础知识

重要提示：本文档不适用于您当前选择的格式故事！

如果您熟悉 AMP，那太棒了！AMP 电邮只是 AMP HTML 库的一个子集。如果您不熟悉 AMP，那也很棒！本指南将为您提供开始编写有效的 AMP 电邮所需的一切知识！

必需的标记

AMP 电邮看起来像传统的 HTML 电子邮件，但有一些不同之处。以下是将电子邮件设为有效 AMP 电子邮件所需的最小标记量。

<!doctype html>
<html ⚡4email data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
  Hello, AMP4EMAIL world.
</body>
</html>

支持 AMP 电邮的电子邮件提供商已设置安全检查，以确保用户获得愉快且安全的体验。使用 AMP 构建的电子邮件必须满足所有要求

从 <!doctype html> doctype 开始。这也是 HTML 的标准。
包含一个顶级 <html amp4email> 标签，或者如果您的电子邮件格外酷，则包含一个 <html ⚡4email> 标签。这将文档标识为 AMP 电子邮件，以便可以将其视为 AMP 电子邮件。
定义 <head> 和 <body> 标签。这在 HTML 中是可选的，但 AMP 保持事物纯净！
在 <head> 标签的第一个子级中包含 <meta charset="utf-8> 标签。这标识页面的编码。
AMP 库通过放置在 <head> 中的 <script async src="https://cdn.ampproject.org/v0.js"></script> 标签导入。没有它，通过 AMP 获得的任何超棒的动态功能都将无法工作！作为最佳实践，这应尽早包含在 <head> 中，直接位于 <meta charset="utf-8"> 标签下方。
在 <head> 中放置 AMP 电邮样板文件，在加载 AMP 库之前，最初隐藏电子邮件内容。

<head>
...
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>

AMP 特定标签替换

由于 AMP 电邮库是 AMP HTML 库的子集，因此许多相同的规则适用；AMP 特定标签替换资源繁重的 HTML 标签，并需要定义的宽度和高度。这允许 AMP 样板隐藏内容，直到它知道内容在用户设备上的显示方式。

图像

为了有效地绘制页面，所有 <img> 标签都替换为 <amp-img>。<amp-img> 标签需要定义的宽度和高度，并支持 AMP 的布局系统

<amp-img src="https://link/to/img.jpg"
    width="100"
    height="100"
    layout="responsive">
</amp-img>

<amp-img> 标签带有强大的内置方法来控制响应式设计和设置后备。

阅读有关使用 AMP 布局和媒体查询以及如何设置图像后备的更多信息。

GIF

AMP 创建了 <amp-anim>，这是用于 GIF 图像的特定标签，当动画不在屏幕上时，AMP 运行时可以减少 CPU 使用率。与 <amp-img> 类似，定义了宽度和高度，并且元素必须包含一个闭合标签。

<amp-anim
    width="400"
    height="300"
    src="my-gif.gif">
</amp-anim>

此外，它还支持可选的 placeholder 子级，以便在加载 src 文件时显示，并支持 AMP 布局系统。

<amp-anim width=400 height=300 src="my-gif.gif" layout="responsive">
  <amp-img placeholder width=400 height=300 src="my-gif-screencap.jpg">
  </amp-img>
</amp-anim>

具有样式的电子邮件

像所有电子邮件客户端一样，AMP 允许内联 style 属性，但也支持电子邮件头部内的 <style amp-custom> 标签内的 CSS。

...
<style amp-custom>
  /* any custom styles go here. */
  body {
    background-color: white;
  }
  amp-img {
    border: 5px solid black;
  }
</style>
...
</head>

与 HTML 电子邮件一样，AMP 电邮支持 CSS 选择器和属性的有限子集。

有关支持 AMP 的电子邮件客户端中允许的 CSS 的完整列表，请参阅 AMP 电邮支持的 CSS。

AMP 强制执行 75,000 字节的样式大小限制。

允许的 AMP 组件

AMP 组件的动态、可视化和交互功能是将 AMP 电邮推向未来的关键。

完整的 AMP 电邮中支持的组件列表可作为 AMP 电邮规范的一部分提供。

验证请求

动态个性化电子邮件内容通常需要验证用户身份。但是，为了保护用户数据，从 AMP 电子邮件内部发出的所有 HTTP 请求都可能会被代理并剥夺 Cookie。

要验证从 AMP 电子邮件发出的请求，您可以使用访问令牌。

访问令牌

您可以使用访问令牌来验证用户身份。访问令牌由电子邮件发送者提供和检查。发送者使用令牌来确保只有有权访问 AMP 电子邮件的人员才能发出该电子邮件中包含的请求。访问令牌必须是加密安全的，并且在时间和范围上受到限制。它们包含在请求的 URL 中。

此示例演示如何使用 <amp-list> 来显示已验证的数据

<amp-list
  src="https://example.com/endpoint?token=REPLACE_WITH_YOUR_ACCESS_TOKEN"
  height="300"
>
  <template type="amp-mustache">
    ...
  </template>
</amp-list>

同样，当使用 <amp-form> 时，将访问令牌放在 action-xhr URL 中。

<form
  action-xhr="https://example.com/endpoint?token=REPLACE_WITH_YOUR_ACCESS_TOKEN"
  method="post"
>
  <input type="text" name="data" />
  <input type="submit" value="Send" />
</form>

示例

以下示例考虑一个假设的笔记服务，该服务允许登录用户将笔记添加到他们的帐户并在以后查看。该服务希望向用户 jane@example.com 发送一封电子邮件，其中包含他们之前记下的笔记列表。当前用户的笔记列表在 JSON 格式的端点 https://example.com/personal-notes 中提供。

在发送电子邮件之前，该服务为 jane@example.com 生成一个加密安全的有限用途访问令牌：A3a4roX9x。该访问令牌包含在 URL 查询内的字段名称 exampletoken 中

<amp-list
  src="https://example.com/personal-notes?exampletoken=A3a4roX9x"
  height="300"
>
  <template type="amp-mustache">
    <p></p>
  </template>
</amp-list>

端点 https://example.com/personal-notes 负责验证 exampletoken 参数并查找与该令牌关联的用户。

有限用途访问令牌

有限用途访问令牌提供针对请求欺骗和重放攻击的保护，确保操作由发送消息的用户执行。通过向请求参数添加一个唯一令牌参数并在调用操作时对其进行验证来实现保护。

令牌参数应生成为仅可用于特定操作和特定用户的密钥。在执行请求的操作之前，应检查令牌是否有效并且是否与您为用户生成的令牌匹配。如果令牌匹配，则可以执行操作。如果该操作应为一次性操作，则该令牌对于将来的请求应无效。

访问令牌应作为 HttpActionHandler 的 url 属性的一部分发送给用户。例如，如果您的应用程序在 http://www.example.com/approve?requestId=123 处理批准请求，则应考虑向其添加一个额外的 accessToken 参数，并侦听发送到 http://www.example.com/approve?requestId=123&accessToken=xyz 的请求。

requestId=123 和 accessToken=xyz 的组合是您必须提前生成的，以确保无法从 requestId 推断出 accessToken。任何 requestId=123 且没有 accessToken 或 accessToken 不等于 xyz 的批准请求都应被拒绝。如果操作应该是一次性操作，则一旦此请求通过，任何未来具有相同 ID 和访问令牌的请求也应被拒绝。

在不同的电子邮件客户端中测试

支持 AMP 电邮的电子邮件客户端提供自己的文档和测试工具来帮助您进行集成。

有关更多信息以及指向电子邮件客户端特定文档的链接，请参阅测试 AMP 电子邮件。

作者 @CrystalOnScript