amp-access-laterpay

简介

amp-access-laterpay 允许发布商轻松与支付基础设施平台 LaterPay 集成。它基于并需要 AMP Access。

设置

在标头中导入 amp-access 组件。

<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>

amp-access 也需要导入 amp-analytics。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

当然还有 amp-access-laterpay 组件。

<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js"></script>

添加配置，指定供应商以及 amp-access 的特定于供应商的配置

<script id="amp-access" type="application/json">
{
  "vendor": "laterpay",
  "laterpay": {
    "articleTitleSelector": ".preview > h3",
    "sandbox": true
  }
}
</script>

控制可见性

此部分对所有用户可见。在这种情况下，无需特殊的标记。

文章

这是文章的预览。

<section class="preview">
  <h3>The Article</h3>
  <p>
    This is a preview of the article.
  </p>
</section>

只有当授权请求的响应中的 access 和 error 属性的值都评估为 FALSE 时，才会显示此部分。带有不同购买选项的 LaterPay 对话框将在此处呈现

<section amp-access="NOT error AND NOT access" amp-access-hide>

此处显示的 ID 和类都是预定义的，应保持不变。然后，您可以使用这些作为参考，根据您的需要设置对话框的样式。

<div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>

如果在获取授权请求时存在 error 属性，则会显示此部分

哎呀...出错了。

<section amp-access="error" amp-access-hide>
  Oops... Something broke.
</section>

使用 amp-access 属性来控制每个组件的可见性。表达式必须评估为布尔值。如果评估为 TRUE，则会显示该部分。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus luctus nunc ut elit cursus, et imperdiet diam vehicula. Duis et nisi sed urna blandit bibendum et sit amet erat. Suspendisse potenti. Curabitur consequat volutpat arcu nec elementum. Etiam a turpis ac libero varius condimentum. Maecenas sollicitudin felis aliquam tortor vulputate, ac posuere velit semper.

<div amp-access="access" amp-access-hide>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
    luctus nunc ut elit cursus, et imperdiet diam vehicula.
    Duis et nisi sed urna blandit bibendum et sit amet erat.
    Suspendisse potenti. Curabitur consequat volutpat arcu nec
    elementum. Etiam a turpis ac libero varius condimentum.
    Maecenas sollicitudin felis aliquam tortor vulputate,
    ac posuere velit semper.
</div>

需要进一步解释？

如果此页面上的解释没有涵盖您的所有问题，请随时联系其他 AMP 用户以讨论您的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您对您特别关注的问题进行一次性贡献。

在 GitHub 上编辑示例

由 @trodrigues 撰写