">文档：<amp-app-banner> - amp.dev - AMP 框架
AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-app-banner

描述

跨平台固定位置横幅的包装器和最小 UI，显示一个号召性用语以安装应用。

 

必需脚本

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

支持的布局

用法

跨平台固定位置横幅的包装器和极简 UI，显示号召性用语以安装应用。

amp-app-banner 组件包含条件逻辑，以将用户引导至正确平台上的正确应用。如果用户关闭横幅，则横幅将永久隐藏。

<head>
  <meta
    name="apple-itunes-app"
    content="app-id=123456789, app-argument=app-name://link/to/app-content"
  />
  <link rel="manifest" href="https://link/to/manifest.json" />
</head>

. . .

<body>
  <amp-app-banner layout="nodisplay" id="demo-app-banner-2134">
    <amp-img src="https://example.com/icon.png" width="60" height="51">
    </amp-img>
    <h3>App Name</h3>
    <p>Experience a richer experience on our mobile app!</p>
    <div class="actions">
      <button open-button>Get the app</button>
    </div>
  </amp-app-banner>
</body>

有关全页示例，请参阅 article.amp.html。

使用 amp-app-banner 必须满足以下要求

指定数据源

为了扩展和推广在 iOS 和 Android 上本机支持的应用横幅的使用，amp-app-banner 使用本机应用横幅在其各自平台上使用的确切数据源。iOS 在文档的头部使用 <meta name="apple-itunes-app"> 标记，而 Android 使用 <link rel="manifest"> 标记。

  • 在 iOS 上，AMP 运行时解析 <meta> 标记内容属性以提取应用 ID 和 app-argument。这些通常用于深度链接 URI，例如 whatsapp:// 或 medium:// 等应用协议。

    • <meta> 标记必须具有 name 和 content 属性。

    • content 属性的值必须包含 app-id=。

  • 在 Android 上，AMP 运行时会发出 XHR 请求以获取 manifest.json 文件。运行时会解析内容以从 related_applications 中提取 app_id，并计算应用商店 URL 以及应用内打开 URL，其形式如下：android-app://${appId}/${protocol}/${host}${pathname}

协议、主机和路径名根据 AMP 文档的规范 URL 计算得出。你的原生应用需要在其清单中注册链接。有关更多信息，请阅读 移动深度链接。

示例应用清单 

<activity
    android:name="com.example.android.GizmosActivity"
    android:label="@string/title_gizmos" >
    <intent-filter android:label="@string/view_article">
        <!-- This is important in order to allow browsers to launch your app. -->
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with "https://CANONICAL_HOST/gizmos" -->
        <data android:scheme="https"
              android:host="CANONICAL_HOST"
              android:pathPrefix="/" />
    </intent-filter>
</activity>

示例 manifest.json

{
  "prefer_related_applications": true, // This is not necessary for <amp-app-banner>, but signals a preference on non-AMP pages using the same manifest.json file for the native app over a web app if available
  "related_applications": [
    {
      "platform": "play",
      "id": "com.app.path",
      "url": "android-app://com.app.path/https/host.com/path/to/app-content"
    }
  ]
}

UI 行为

amp-app-banner 不提供默认 UI。相反，开发者可以在横幅内构建任何类型的 UI 并相应地设置样式。

目前，横幅始终显示，直到将其关闭。关闭后，横幅永远不会在该域上显示，除非用户在其他浏览器上访问或清除其本地存储。

UI 中的必需属性

横幅中需要 button[open-button] 按钮。这是点击目标，用于安装应用或（如果已安装）打开深度链接。

button[open-button] 元素不能具有 disabled 值。

关闭按钮限制

用于关闭横幅的“X”按钮在自定义方式上有限制。你可以使用 .amp-app-banner-dismiss-button 类设置此按钮的样式。保持关闭按钮在移动设备上可见且易于访问，以便横幅不会阻止内容。

操作系统、浏览器和查看器依赖项

原生应用横幅不会在查看器上下文中显示。因此，当存在适当标记时，amp-app-banner 会显示在查看器内。

但是，当使用兼容的操作系统（如 Android 和 Chrome，或 iOS 和 Safari）上的浏览器查看时，会显示系统级应用横幅。在这些情况下，amp-app-banner 会隐藏以避免冗余。下表显示了这些依赖关系

上下文 Android + Chrome iOS + Safari 其他操作系统 + 浏览器
在 AMP 查看器中 显示 amp-app-banner 显示 amp-app-banner 显示 amp-app-banner
在 AMP 查看器外 显示系统横幅 显示系统横幅 显示 amp-app-banner

属性

id

为 amp-app-banner 组件定义唯一标识符。id 值用于持久性逻辑。

布局

指定横幅的布局。该值必须为 nodisplay。

验证

请参阅 AMP 验证器规范中的 amp-app-banner 规则。

需要更多帮助？

您已经阅读了本文档十几次，但它并没有真正涵盖您所有的问题？也许其他人也有同感：在 Stack Overflow 上联系他们。

转到 Stack Overflow
发现了一个 bug 或缺少某个功能？

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

转到 GitHub