mip-app-banner App 调起组件

用于调起 App。

标题内容
类型通用
支持布局responsive, fixed-height, fill, container, fixed
所需脚本https://c.mipcdn.com/static/v2/mip-app-banner/mip-app-banner.js

示例

基本用法

1
2
3
4
5
6
7
8
<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"> <button open-button>打开app</button> </mip-app-banner>

属性

id

说明:组件 id,组件唯一标识 必选项:是 类型:字符串 单位:无 默认值:无

layout

说明:组件布局,只能设置值为 nodisplay 必选项:是 类型:字符串 取值范围:nodisplay 单位:无 默认值:nodisplay

子节点 [open-button]

说明:调起 App 的按钮,必须带有 open-button 属性 必选项:是 类型:HTML 节点 取值范围:无 单位:无 默认值:<button open-button>

浏览器兼容性

浏览器Android+chromeAndroid+baiduiOS+safari其他情况
结果页打开支持不支持屏蔽不支持,暂时屏蔽支持
非结果页打开不支持屏蔽不支持屏蔽浏览器 banner支持

注意事项

  • 在引用组件的页面头部 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 的。
  • manifest.json 示例
1
2
3
4
5
6
7
8
9
10
{ "prefer_related_applications": true, "related_applications": [ { "platform": "play", "open": "scheme://xx", "install": "your download url" } ] }