">文档：<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-0.1.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
发现错误或缺少功能？

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

转到 GitHub