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 和 class 都是预定义的，应保持原样。然后，您可以将它们用作参考，以根据您的需要设置对话框的样式。

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