交互式图像

通过将“购物”热点拖放到图像上，您可以轻松地为客户打造出丰富多彩、引人入胜的静态图像体验。购物热点将有关产品或服务的附加信息与直接的、销售点“添加到购物车”或“购买”功能相结合。客户可以点按或单击这些热点，直接链接到产品或服务，将其添加到购物车，或链接到网页。此类直接体验能够提高客户在您网站上的参与度和转化率。

下面是带有概览弹出窗口的购物横幅。 用户点按模型上的圆圈或“热点”以激活概览。

chlimage_1-152

通过转到以下内容，在上面的网页上查看交互式图像的实际操作情况：

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion-QVzoom/index2-shoppable.html

观看如何创建交互式图像横幅

观看有关如何创建交互式图像横幅的的10分钟和33秒演练。 您还将学习如何预览、编辑和投放交互式图像横幅。

快速开始:交互式图像

以下工作流分步说明旨在帮助您在AEM Assets快速设置和运行交互式图像。

请查找某些“快速入门”任务中的​示例​标题。它包含一个简短的教程，该教程基于尚未添加交互式图像的以下网页示例：

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html

本教程有助于说明在您自己的网站上集成交互式图像的步骤。

交互式图像步骤：

  1. （可选）识别热点变量 -如果您使用AEM Assets和Dynamic Media独立版本，可通过识别现有Quickview实施中使用的动态变量来开始，以便您在创建交互式图像时输入热点数据。请参阅（可选）识别热点变量。
    但是，如果您使用AEM Sites、AEM eCommerce或二者，则不必执行此步骤。
    请参阅AEM Assets](/docs/experience-manager-65/sites-administering/concepts.html?lang=zh-Hans)中的[电子商务概念。

  2. （可选）创建交互式图像查看器预设 -自定义用于表示热点的图形图像。如果您打算使用现成的名为Shoppable_Banner的交互式图像查看器预设，则无需创建自己的交互式图像查看器预设。
    请参阅（可选）创建交互式图像查看器预设。

  3. 上传图像横幅 -上传要实现交互的图像横幅。请参 阅上传图像横幅。

  4. 将热点添加到图像横幅 -将一个或多个热点添加到图像横幅，并将每个热点与操作（如超链接、概览或体验片段）关联。添加热点后，您将通过发布交互式图像来完成此任务。

  5. 将交互式图像添加到您的网站或您在AEMI中的网站
    (如果您使用AEM Sites、AEM eCommerce，或同时使用两者)，则可以通过将交互式媒体组件拖动到页面上，将交互式图像直接添加到AEM的网页。请参阅将Dynamic Media资产添加到页面。
    如果您使用AEM Assets和Dynamic Media独立版本，则必须将嵌入代码复制到您的网站上，然后将其与现有Quickview集成。请参阅将交互式图像与您的网站集成。
    如果您使用第三方WCM（Web内容管理器），则必须将新的交互式视频与网站上使用的现有Quickview实现相集成。 请参阅将交互式图像与现有Quickview集成。

（可选）识别热点变量

NOTE

仅当满足以下条件时，才需要此任务:

  • 您希望通过触发Quickviews向图像添加交互性。
  • 您对AEM的实施does not​使用eCommerce integration framework从任何电子商务解决方案（如IBM Websphere Commerce、Elastic Path、hybris或Intershop）将产品数据拉入AEM。 请参阅AEM Assets](/docs/experience-manager-65/sites-administering/concepts.html?lang=zh-Hans)中的[电子商务概念。

如果您的AEM实施使用电子商务，则可以跳过此任务并继续到下一个任务。

开始，识别现有Quickview实现所使用的动态变量，以便输入热点数据以创建交互式图像。

在AEM Assets向横幅图像添加热点时，您需要分配SKU(库存单位；您所优惠的每个不同产品或服务的唯一标识符)以及每个热点的可选附加变量。 以后会使用这些热点变量将热点与概览内容相匹配。

必须准确地识别要与热点数据相关联的变量数量及类型，这一点很重要。而且，添加到横幅图像的每个热点都必须附带足够的信息，以便能够在现有的后端系统中明确地识别产品。

有多种不同的方法可以识别用于热点数据的变量集。

有时可能需要向负责现有Quickview实施的IT专家咨询，因为他们可能了解在系统中识别Quickview所需的最少数据集。 但在大多数情况下，可能只需简单地分析前端代码的现有行为即可。

大多数Quickview实施都采用以下模式：

  • 用户在网站上激活用户界面元素。例如，单击“Quickview”按钮。
  • 如果需要，网站会向后端发送Ajax请求以加载概览数据或内容。
  • Quickview数据将转换为准备在网页上呈现的内容。
  • 最后，前端代码以可视形式将这些内容呈现在屏幕上。

然后，该方法是访问实现Quickview功能的现有网站的不同区域，触发Quickview并捕获由网页发送的Ajax URL，以加载Quickview数据或内容。

通常情况下，您不需要使用任何专业的调试工具。现代的 Web 浏览器具备 Web 检查器，可以实现相同的功能。下面列举了一些具备 Web 检查器的 Web 浏览器：

  • 要在 Google Chrome 中查看发出的所有 HTTP 请求，请按 F12 键以打开“开发人员工具”面板，然后单击“网络”选项卡。在Mac上，按Command+Option+I打开“开发人员工具”面板，然后单击“网络”选项卡。

  • 在 Firefox 中，您既可以按 F12 键并使用其“网络”选项卡来激活 Firebug 插件，也可以使用内置的检查器工具及其“网络”选项卡。在Mac上，按Command+Option+I打开“Developer Tools”（开发人员工具）面板，然后单击“Inspector”（检查器）选项卡。

在浏览器中打开网络监视时，在页面上触发概览。

现在，在网络日志中找到Quickview Ajax URL，并复制记录的URL供将来分析。 在大多数情况下，当您触发Quickview时，会向服务器发出大量请求。 通常，Quickview Ajax URL是列表中最早的URL之一。 它有复杂的查询字符串部分或路径，其响应MIME类型为text/html、text/xml或text/javascript。

在此过程中，访问网站的不同区域(具有不同的产品类别和类型)非常重要。 其原因是，Quickview URL可能具有特定网站类别通用的部分，但仅在您访问网站的其他区域时更改。

在最简单的情况下，Quickview URL中唯一的变量部分是产品SKU。 在这种情况下，SKU 值就是您将热点添加到横幅图像时唯一需要提供的数据。

但是，在复杂情况下，除SKU外，Quickview URL还具有不同的可变元素，如类别ID、颜色代码、大小代码等。 在这种情况下，在 AEM 资产的交互式购物图像功能中，每个元素都是热点数据定义中的一个独立变量。

请考虑以下Quickview URL示例及其生成的热点变量：

单个 SKU，位于查询字符串中。

录制的Quickview URL包括：

  • https://server/json?productId=866558&source=100

  • https://server/json?productId=1196184&source=100

  • https://server/json?productId=1081492&source=100

  • https://server/json?productId=1898294&source=100

URL 中唯一的变量部分是 productId= 查询字符串参数的值，很明显它就是 SKU 值。因此，我们的热点只需要填充866558、1196184、1081492、1898294等值的SKU字段。

单个 SKU，位于 URL 路径中。

录制的Quickview URL包括：

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

变量部分位于路径的最后一部分，并成为热点的SKU值：6422350843、1607745002、0086724882。

SKU 和类别 ID，位于查询字符串中。

录制的Quickview URL包括：

  • https://server/quickView/product/?category=1100004&prodId=305466

  • https://server/quickView/product/?category=1100004&prodId=310181

  • https://server/quickView/product/?category=1740148&prodId=308706

在这种情况下，URL 中有两个可变部分。SKU存储在prodId参数中，类别ID存储在category=参数中。

因此，热点定义是成对存在的，即，一个 SKU 值对应一个额外的变量 categoryId。生成的各对如下所示：

  • SKU为305466,categoryId为1100004。

  • SKU为310181,categoryId为1100004。

  • SKU为308706,categoryId为1740148。

示例

您可以将上述三个示例中所用的方法运用到演示网页：

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html

演示网页有多个产品缩略图，每个缩略图都有一个标有“查看更多”的概览按钮。 在Web浏览器的调试工具仍处于激活状态时，单击每个按钮并记下录制的Quickview URL。 在激活页面上所有四个可用的产品概览后，您会对向后端发出的概览请求产生以下列表:

  • /datafeed/Men-Windbreaker.json
  • /datafeed/Men-SimpleHenley.json
  • /datafeed/Men-CamoPullover.json
  • /datafeed/Women-QuiltedDownJacket.json

通过查看这些服务器调用，您会发现只有请求路径中存在产品特定信息。 您还注意到，查询字符串根本不被使用，并且涉及两种不同类型的数据：

  • 第一类是男性或女性。 您可以称此为“产品类别”。
  • 第二种类型是产品名称，如CamoPullover。 您可以假定这是产品SKU。

根据此信息，整个Quickview URL具有以下模式：

/datafeed/$categoryId$-$SKU$.json

依据上述分析，您可以在热点中使用 categoryId 和 SKU。

现在，您便可以使用 AEM 资产中的交互式购物图像功能，上传图像横幅并向其添加热点。

（可选）创建交互式图像查看器预设

您可以选择使用 AEM 资产默认附带的名为 Shoppable_Banner 的现成交互式图像查看器预设。或者，您也可以创建自己的自定义查看器预设，以便与交互式图像配合使用。

在创建自定义交互式图像查看器预设时，您可以确定图像横幅上热点的外观。 在创建查看器预设的过程中，您可以选择使用预定义图像库中提供的热点图形。

在保存查看器预设后，查看器预设会在AEM Assets的“查看器预设”列表页面上自动激活（打开）。 此功能意味着无论您何时视图资产，都可以在交互式媒体组件中看到该内容。 但是，要提供具有此查看器预设的交互式横幅，您还必须发布您的查看器预设（对于自定义或现成的查看器预设，情况也是如此）。

创建交互式图像查看器预设的步骤

  1. 在左边栏中，点按​工具>资产>查看器预设。

  2. 在页面的右上角附近，点按​创建。

  3. 在“新查看器预设”对话框中，键入一个用于描述该交互式横幅查看器预设的名称。

    这是保存后将在“查看器预设”列表页面中显示的标题。

  4. 在富媒体类型下拉菜单中，选择​交互式图像。

  5. 点按​创建。

  6. 在“编辑查看器预设”页面中，点按​外观​选项卡。

  7. 执行下列操作之一：

    • 要上传您自己的热点图像以在图像上使用，请点按“资产选取器”图标。在“选择内容”页面上，导航到您要使用的热点图像，将其选中，然后点按右上角的对勾标记图标。
    • 要选择预定义的热点图像，请点按“热点图库”图标。在热点图库画板上，点按您要使用的热点图像。

  8. 在页面的右上角附近，点按​保存。

    请确保您发布了新查看器预设。

    请参阅发布已添加的查看器预设。

    现在，您便可以上传图像横幅。

上传图像横幅

如果已上传要使用的图像，请进入下一步将热点添加到图像横幅。

上传图像横幅

  1. 上传您要实现交互的图像横幅。

    请参阅上传资产。

    您现在可以向图像横幅添加热点；请参阅下面的下一个任务。

将热点添加到图像横幅

您可以使用“热点管理”页面上的编辑器将热点添加到图像横幅。

添加热点时，您可以将热点定义为概览弹出显示、超链接或体验片段。

请参阅体验片段。

NOTE

请注意，在体验片段中嵌入查看器时，不支持交互式图像中的社交媒体共享工具。 要解决此问题，您可以使用或创建没有社交媒体共享工具的查看器预设。 通过此类查看器预设，您可以成功将其嵌入到体验片段中。

在当前创建／编辑会话中，页面右上角附近支持撤消和重做选项。

创建完交互式图像后，您可以使用预览来查看交互式图像将如何呈现给客户。

请参阅（可选）预览交互式图像。

NOTE

当您在交互式图像或传送横幅中向图像添加热点时，无论热点是交互式图像还是传送横幅，热点信息都会存储在与图像位置相关的同一元数据位置。 此功能意味着您可以在任一查看器中轻松重复使用同一图像及其定义的热点数据。

但是，请注意，传送横幅支持图像上的图像地图，这些图像上也可能包含热点；交互式图像则不会。 如果要创建使用同一图像的交互式图像或传送横幅，请牢记这一点。 您可能希望改为使用同一图像的单独副本创建交互式图像和传送横幅。

另请参阅传送横幅。

NOTE

如果您正在使用热点编辑交互式图像并裁剪图像，则您的热点将被删除。

向图像横幅添加热点

  1. 在“资产”视图中，导航到要进行交互的图像横幅。

  2. 执行下列操作之一：

    • 将鼠标悬停在图像上，然后点按​选择（复选标记图标）。 在工具栏中，点按​编辑。

    • 将鼠标悬停在图像上，然后点按​更多操作（三个点图标）编辑。

    • 点按图像以在“详细信息”视图页中将其打开。 在工具栏中，点按​编辑。

  3. 在页面的左上角附近，点按​添加热点（手指点按图标）以打开热点管理页面。

  4. 在页面的左上角附近，点按​热点。

  5. 在“热点管理”页面的左上角附近，点按​热点。

  6. 在图像上，点按您希望显示热点的位置。如有必要，可拖动热点以调整其位置。

  7. 重复步骤a和b，根据需要添加其他热点。

  8. （可选）要删除热点，请在图像上选择它，然后点按​热点​标题下的​删除（垃圾桶图标）。

  9. 在“名称”文本字段中，键入热点的名称。此名称也会显示在“选定的热点”下拉列表中。

  10. 执行下列操作之一：

    • 点按​概览。

      • 如果您是AEM Sites或电子商务客户，请点按或单击产品选取器图标（放大镜）以打开“选择产品”页面。 点按或单击要使用的产品，然后点按页面右上角的​选择​以返回到热点管理页面。

      • 如果您是​不是 AEM Sites或电子商务客户

        • 请参阅识别热点变量;您需要定义这些变量。
        • 然后，手动输入SKU值。 在“SKU值”文本字段中，键入产品的SKU（库存单位），即您优惠的每个不同产品或服务的唯一标识符。 输入的SKU值会自动填充概览模板的变量部分，以便系统能够将点按的热点与特定SKU的概览相关联。
        • （可选）如果您需要在概览中使用其他变量来进一步标识产品，请点按​添加常规变量。 在文本字段中，指定其他变量。例如，category=Mens 就是一个添加的变量。

    • 点按​超链接。

      • 如果您是AEM Sites客户，请点按或单击站点选择器图标（文件夹）以导航到URL。 请注意，如果您的交互式内容包含相对URL的链接，特别是指向AEM Sites页面的链接，则无法使用基于URL的链接方法。
      • 如果您是独立客户，请在“HREF”文本字段中指定链接网页的完整URL路径。

    请确保指定是在新的浏览器选项卡（建议使用默认选项卡）还是在同一选项卡中打开链接。

    有关详细信息，请参阅使用选择器。

    • 点按​体验片段。

      • 如果您是AEM Sites客户，请点按或单击搜索图标（放大镜）以打开体验片段页面。 点按或单击要使用的体验片段，然后点按页面右上角的选择以返回到热点管理页面。
        请参阅体验片段。

      • 指定体验片段在横幅上的显示方式，如同其宽度和高度一样。

        NOTE

        请注意，在体验片段中嵌入查看器时，不支持交互式图像中的社交媒体共享工具。 要解决此问题，您可以使用或创建没有社交媒体共享工具的查看器预设。 通过此类查看器预设，您可以成功将其嵌入到体验片段中。

  11. 点按​保存​以保存您的工作并返回浏览页面。

  12. 发布交互式图像。 通过发布，横幅可通过云传送，如果需要与第三方网站集成，还可生成嵌入代码。

    请参阅发布资产。

    添加热点并发布交互式图像后，您现在可以将其添加到现有网站。

    请参阅将交互式图像与您的网站集成。

    NOTE

    如果您正在编辑具有热点的交互式图像并裁剪图像，则您的热点将被删除。

（可选）预览交互式图像

您可以使用预览来查看交互式图像对客户的呈现效果，并测试图像的热点以确保它们的行为符合预期。

当您对交互式图像感到满意时，您可以发布该图像。
请参阅在网页上嵌入视频查看器或图像查看器。请参阅将 URL 关联到您的 Web 应用程序。请注意，如果您的交互式内容包含相对URL的链接，特别是指向AEM Sites页面的链接，则无法使用基于URL的链接方法。
请参阅将Dynamic Media资产添加到页面。

预览交互式图像

  1. 在“资产”视图中，导航到您创建的现有交互式图像，然后点按以预览打开它。
  2. 在预览页面的左上角附近，在“内容”下拉列表卡中，点按​查看器。
  3. 在“查看器”列表卡中，点按​Shoppable_Banner​或您创建的交互式图像查看器预设的名称。
  4. 点按图像上的热点以测试其关联的操作。

发布交互式图像资源

有关如何发布交互式图像资产的详细信息，请参阅发布资产。

将交互式图像与您的网站集成

在上传横幅图像、将热点添加到图像并发布交互式图像后，您现在可以将其添加到网站页面。

如果您是AEM Sites的客户，则可以通过将交互式媒体组件拖到页面上来添加交互式图像。 请参阅将Dynamic Media资产添加到页面。

如果您是独立的AEM Assets客户，则可以按本节所述手动将交互式图像添加到您的网站。

  1. 复制已发布的交互式图像的嵌入代码。
    请参阅在网页上嵌入视频查看器或图像查看器。

  2. 将复制的嵌入代码添加到网页中的所需位置。
    复制的嵌入代码已设置为响应式环境，因此应自动适应分配的区域。

示例

以演示网站为例：

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html

请注意，三位男士的照片是静态的 IMG 标记：

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

集成过程很简单，只需删除 IMG 标记并将其替换为从 AEM 资产中复制的嵌入代码即可。您可以通过下面的 URL 查看最终效果，即页面上会显示带有三个圆形热点的交互式购物图像：

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-1.html

NOTE

至此，演示网站交互式购物图像上的热点仅用于显示目的；它们尚未与现有Quickviews集成。

要面向交互式环境对购物交互式图像进行“裁剪”，您可以将交互式图像配置属性 ZoomView.iscommand 添加到路径中 － 其中 ZoomView 是要调用的组件，而 iscommand 是您所应用的“裁剪”图像服务命令。

请参阅 ZoomView.iscommand 配置属性。

请参阅裁剪图像服务命令。

您现在可以将交互式图像与网站上的现有概览相集成。

将交互式图像与现有Quickview集成

NOTE

此任务仅在您是独立的AEM Assets客户时适用。

该过程的最后一步是将交互式图像与网站上现有的Quickview实施相集成。 但是，没有任何一种集成解决方案是在所有情况下都适用的。每个Quickview实施都是独一无二的，需要一种特定的方法，最可能需要前端IT人员的协助。

现有Quickview实现通常表示在网页上按以下顺序发生的一系列相互关联的操作：

  1. 用户在网站的用户界面上触发一个元素。
  2. 前端代码根据在步骤1中触发的用户界面元素获取Quickview URL。
  3. 前端代码使用在第 2 步获取的 URL 发送一个 Ajax 请求。
  4. 后端逻辑将相应的概览数据或内容返回到前端代码。
  5. 前端代码加载Quickview数据或内容。
  6. （可选）前端代码将加载的Quickview数据转换为HTML表示形式。
  7. 前端代码显示一个模态对话框或面板，并将 HTML 内容呈现在屏幕上以供最终用户查看。

这些调用并非独立的公共 API 调用（可以由网页逻辑从任意步骤进行调用）。相反，这些调用属于链式调用，即，每个后续步骤都隐藏在前一步的最后阶段（回调）。

如果用交互式购物图像来替换第 1 步的操作以及第 2 步的部分操作，则与此同时，当用户单击购物图像中的热点时，查看器就会处理此类用户交互。查看器会向网页返回一个事件，其中包含之前添加到 AEM 资产中的所有热点数据。

在此类事件处理程序中，前端代码会执行下列操作：

  • 监听交互式购物图像发出的事件。
  • 根据热点数据构建概览URL。
  • 触发从后端加载概览并在屏幕上显示概览的过程。

AEM Assets返回的嵌入代码已经有一个可用的事件处理程序被注释掉，如下面突出显示的代码片断所示：

        var s7interactiveimageviewer = new s7viewers.InteractiveImage({
            "containerId" : "s7interactiveimage_div",
            "params" : {
                "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
                "contenturl" : "https://aodmarketingna.assetsadobe.com/",
                "config" : "/etc/dam/presets/viewer/Shoppable_Media",
                "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
        })
        /* // Example of interactive image event for Quickview.
             s7interactiveimageviewer.setHandlers({
                "quickViewActivate": function(inData) {
                    var sku=inData.sku; //SKU for product ID
                    //To pass other parameter from the hotspot, you will need to add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //Please refer to your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

因此，只需取消对该代码的注释，并用针对特定网页的代码来替换虚拟处理程序主体即可。

构建Quickview URL的过程与之前介绍的用于识别热点变量的过程基本相反。

请参阅识别热点变量。

使用我们以前的Quickview URL示例，您可以在以下示例中看到在各种情况下如何构建Quickview URL:

单个 SKU，位于查询字符串中

 s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&amp;source=100"; }, });

单个 SKU，位于 URL 路径中

 s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });

SKU 和类别 ID，位于查询字符串中

 s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&amp;prodId=" + inData.sku; }, });

触发Quickview URL并激活Quickview面板的最后一步很可能需要IT部门的前端IT人员的协助。 他们最了解如何通过适当的步骤准确地触发Quickview实施，并拥有现成的Quickview URL。

您可以了解如何将这些步骤应用到演示网站，以将交互式购物图像与概览代码完全集成。 以前，Quickview URL的结构如下所示：

/datafeed/$categoryId$-$SKU$.json

要在quickViewActivate处理函数中重建此URL，可使用inData对象中可用的categoryId和SKU字段，该对象由查看器的代码传递给该处理函数：

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

演示网站使用简单的loadQuickView()函数调用来触发概览对话框。 此函数只使用一个参数，即Quickview数据URL。 因此，集成交互式购物图像所需的最后一步是将以下代码行添加到quickViewActivate处理程序：

loadQuickView(quickViewUrl);

下面是完整的源代码：

 var s7interactiveimageviewer = new s7viewers.InteractiveImage({
  "containerId" : "s7interactiveimage_div",
  "params" : {
   "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
   "contenturl" : "https://aodmarketingna.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Media",
   "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
 })
   s7interactiveimageviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku;
     var categoryId=inData.categoryId;
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   });
 s7interactiveimageviewer.init();

具有完全集成的交互式图像的最终演示网站如下所示：

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-3.html

使用概览创建自定义弹出窗口

请参阅使用概览创建自定义弹出窗口。

在此页面上