AMP 示例中的新增功能

以下内容由 Google 开发者倡导者 Sebastian Benz 发布在 Medium 上。

自 上次撰写有关 AMP by Example 的文章以来，发生了很多事情。这篇文章将快速概述新示例以及网站本身的新增内容。

新设计

我们使用全新的 AMPStart 模板和组件库完全重新设计了 www.ampbyexample.com。另一个重大更改：示例不再使用三栏布局。相反，代码段和实时预览已嵌入到文档中。

新设计

互动式 AMP Playground

如果您想使用示例代码：现在可以在 互动式 Playground 中打开所有示例。目前仅限于编辑现有示例，但我们计划通过让用户能够与他人分享示例来提高其实用性。

在 Playground 中打开任何示例

AMP 组件更新

AMP 组件示例已更新多次

• amp-bind：用于制作组件的示例 让 AMP 页面实现图灵完备性 现在使用 新的对象字面量语法。
• amp-call-tracking：用于替换静态电话号码的全新着陆页组件，可使用动态生成的电话号码进行呼叫跟踪分析。
• amp-fx-parallax：太棒了！视差滚动支持即将添加到 AMP 中。

 

amp-fx-parallax

• amp-gist：开发者欢呼，终于可以将 Github Gists嵌入到 AMP 中。
• amp-iframe：更新现有示例，演示 amp-iframe 如何调整自身大小。通过 iframe 嵌入第三方内容时，这非常有用。

可调整大小的 amp-iframe

更多 AMP 用例

新示例演示如何组合 AMP 组件以解决复杂用例

• AMP 中的选项卡面板：eBay 提供了一个示例，演示如何在 AMP 中实现选项卡。需要注意的一点是：在创建示例时，eBay 发现当前的实现尚未满足其无障碍要求。 此问题跟踪需要完成哪些工作来解决此问题。

带有 AMP 的选项卡面板

• 民意调查示例：如何在 AMP 中实现单页民意调查，确保用户只能投票一次。

AMP 中的单页民意调查

• 星级评级示例：对于电子商务网站非常重要，如何实现无障碍的星级评级。
• 自定义加载指示器：展示您甚至可以自定义 AMP 的默认加载动画的示例。

AMP 广告应有尽有！

AMP 广告部分的重大更新，展示如何构建 AMP 广告

• AMP 广告示例预览现在通过 DFP 作为真正的 AMP 广告提供。以前，AMP 广告预览使用 iframe 嵌入，这没有利用优化的 AMP 广告渲染性能。
• Hello World 示例：了解如何创建 AMP 广告。
• 视频广告示例：一个示例广告，真正展示了 AMP 的可能性。
• 速度比较：查看 AMP 广告与普通广告相比加载速度有多快。最好在 3G 连接上查看。

AMP 广告几乎可以立即加载

接下来是什么？

我们将继续为新的 AMP 组件提供示例，但还计划更多地关注如何通过组合现有的 AMP 组件来解决复杂用例。请 告诉我们是否有任何特定用例您希望看到示例。

发布者：Google 开发者倡导者 Sebastian Benz。