mip-app-banner App 调起组件
此组件用于调起 App。提供一个固定位置（页面底部）的容器供用户自定义 banner 的内容，点击 banner 中的 button 按钮后，调起或下载 App。在用户关闭后会永久隐藏。
| 标题 | 内容 |
|---|---|
| 类型 | 通用 |
| 支持布局 | responsive, fixed-height, fill, container, fixed |
| 所需脚本 | https://c.mipcdn.com/static/v2/mip-app-banner/mip-app-banner.js |
说明
mip-app-banner 不提供默认的样式，用户可以自定义 banner 内部的结构和样式。为了保证更友好的交互性，组件内部对 banner 的关闭按钮做了限制，不可自定义，该按钮的 class 名为 mip-app-banner-dismiss-button，出现在 banner 的右上角位置。组件内部必须定义一个带有 open-button 属性的 button 元素，用于调起/下载 App。
在特定的系统和浏览器环境下，如 Android/Chrome 或 iOS/Safari，会出现系统自带的 banner，所以 mip-app-banner 会被隐藏，避免冗余。具体可参考下方的兼容性说明。
浏览器兼容性
| 浏览器 | Android+chrome | Android+baidu | iOS+safari | 其他情况 |
|---|---|---|---|---|
| 结果页打开 | 支持 | 不支持，屏蔽 | 不支持，暂时屏蔽 | 支持 |
| 非结果页打开 | 不支持，屏蔽 | 不支持，屏蔽 | 浏览器 banner | 支持 |
在环境支持的情况下，组件默认会始终展示。如果用户手动点击了关闭按钮，组件将永远不会出现，除非更换浏览器或者清除浏览器缓存（localstorage）。
注意事项
组件需要有
mip-hiddenclass，否则会有闪动问题根据不同的系统，在引用组件的页面头部 head 标签中需要加两个标签
- iOS 使用：
<meta name="apple-itunes-app" content="app-id=app的id, app-argument=medium://xxxx">。 - Android 使用：
<link rel="manifest" href="https://xxxx/manifest.json">。 - manifest 的 url 必须是 HTTPS 的。
- iOS 使用：
manifest.json 示例
12345678910{ "prefer_related_applications": true, "related_applications": [ { "platform": "play", "open": "scheme://xx", "install": "your download url" } ] }
示例
基本用法
12345678<head>
<meta name="apple-itunes-app" content="app-id=xxxx, app-argument=medium://xxxx">
<link rel="manifest" href="xxxx/manifest">
</head>
...
<mip-app-banner id="my-app-banner" layout="nodisplay" class="mip-hidden">
<button open-button>打开app</button>
</mip-app-banner>属性
id
说明：组件 id，组件的唯一性标识，作为 localstorage 的 key 值，用于处理持久化 展示/隐藏 逻辑
比选项： 是
类型：字符串
取值范围：无
单位：无
默认值：无
layout
说明：组件布局，只能设置值为 nodisplay
必选项：是
类型：字符串
取值范围：nodisplay
单位：无
默认值：nodisplay
子节点 [open-button]
说明：调起 App 的按钮，必须带有 open-button 属性
必选项：是
类型：HTML 节点
取值范围：无
单位：无
默认值：<button open-button>