创新互联IOS教程：在AR快速查看中添加ApplePay按钮或自定操作

概览

对于在 iOS 13.3 或更高版本中通过网页发起的 AR 体验，你可以显示 Apple Pay 按钮，以便用户能够在你的网站上进行购买。

公司主营业务：成都做网站、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出余干免费做网站回馈大家。

你也可以在横幅中提供文本，让用户能够轻点这个横幅来调用网站中的自定操作，例如将预览的项目添加到购物车。

此外，你还可以在 AR 快速查看中提供自定 HTML，用于显示完全自定的横幅图形。

要在横幅中添加 Apple Pay 按钮或自定文本或图形，请选取 URL 参数来为网站配置 AR 快速查看。最后，检测客户对横幅的轻点操作并做出响应。

选取 Apple Pay 按钮样式

要为增强现实体验选择 Apple Pay 按钮样式，请为网站 URL 追加 applePayButtonType 参数。

https://example.com/biplane.usdz#applePayButtonType=plain

你可以利用此处所示的按钮类型值，从按钮选项中进行选择。

提供自定文本

你也可以不添加 Apple Pay 按钮，而提供在 AR 快速查看中作为自定操作按钮显示的文本，如下图所示。

这时需要追加 callToAction URL 参数并以自定文本作为值。下列 URL 示例会显示带有“Add to cart”(添加到购物车) 文本的横幅：

https://example.com/biplane.usdz#callToAction=Add%20to%20cart

由于 URL 不能包含空格，因此请务必对自定文本进行 URL 编码处理，然后再将它作为参数附加到 URL。如果你的网站支持多种语言，请先对自定文本进行本地化处理，然后再对它进行 URL 编码处理以获取 URL 参数列表。

定义项目

在 AR 快速查看中添加 Apple Pay 按钮或自定操作按钮时，请利用 checkoutTitle、checkoutSubtitle 和 price URL 参数来设置预览项目的描述。AR 快速查看会在标题下方显示副标题和价格，并用逗号进行分隔。

如果 AR 快速查看无法在一行中显示副标题和价格，会裁截副标题并显示省略号。下列 URL 示例会显示横幅。

https://example.com/biplane.usdz#applePayButtonType=buy&checkoutTitle=Biplane%20Toy&checkoutSubtitle=Rustic%20finish%20with%20rotating%20propeller&price=$15

如果你的网站支持多种语言，请先对项目标题、副标题和价格进行本地化处理，然后再对它们进行 URL 编码处理以获取 URL 参数列表。

显示自定横幅

要完全控制横幅图形，请通过 custom URL 参数提供自定 HTML 文件。下列 URL 示例会通过名为 comingSoonBanner 的自定文件显示横幅。

https://example.com/biplane.usdz#custom=https://example.com/customBanners/comingSoonBanner.html

这个 URL 示例会呈现如下所示的 AR 体验。

如果使用 custom URL 参数，对应的值必须为绝对 URL。为了符合 AR 快速查看的安全标准，请确保服务器通过 HTTPS 发送 HTML 资源。

重要信息

AR 快速查看仅会显示 HTML 的内容。如果嵌入链接或事件等操作，AR 快速查看会忽略它们。

定义自定横幅的高度

显示自定横幅时，你可以使用 customHeight URL 参数设置横幅高度。

支持的值包括 small、medium 或 large，这些值分别会将横幅高度设为 81、121 或 161 磅。例如：

https://example.com/biplane.usdz#custom=https://example.com/my-custom-page.html&customHeight=large

AR 快速查看会根据显示设备的尺寸和方向自动调节横幅宽度。自定横幅的最大宽度为 450 磅。如果忽略 customHeight URL 参数，AR 快速查看会使用默认值 small。

检测轻点操作

当用户轻点 Apple Pay 按钮或自定操作按钮时，WebKit 会向代码中引用对应 3D 素材资源的 元素发送 DOM 信息。

要接收轻点操作通知，请为锚点上的 message 事件定义 JavaScript 侦听器。

const linkElement = document.getElementById("ar-link");
linkElement.addEventListener("message", function (event) { ... }, false);

当 WebKit 调用侦听器时，请检查 data 属性。当值为 _apple_ar_quicklook_button_tapped 时，则确认用户轻点了 AR 快速查看中的横幅。

const linkElement = document.getElementById("ar-link");
linkElement.addEventListener("message", function (event) {   
    if (event.data == "_apple_ar_quicklook_button_tapped") {
        // handle the user tap. 
    }
}, false);

message 事件遵循常规 DOM 处理规则。除了为特定锚点添加侦听器之外，你还可以在文稿根中为所有增强现实链接添加侦听器，然后使用 event.target 来确定用户调用的锚点。

响应轻点操作

定义事件侦听器中检测到用户轻点时网站所采取的操作。当用户轻点自定操作按钮时，你可以将预览的项目添加到购物车，或者为用户跳转至结账页面，具体取决于横幅文本和自定操作。

如果你的横幅显示 Apple Pay 按钮，请使用 Apple Pay JS API (英文) 调出 Apple Pay 提示。

如果你的横幅显示 Messages for Business 按钮，请使用你公司的自定 Messages for Business URL 将用户转至“信息”app。有关更多信息，请参阅“从 URL 启动聊天 (英文)”。

分享文章：创新互联IOS教程：在AR快速查看中添加ApplePay按钮或自定操作
分享URL：http://www.mswzjz.cn/qtweb/news19/76119.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能