MenuBar胶囊按钮

本文转载至vivo开放平台

MenuBar意在促进快应用生态全局交互的统一，建立用户对于快应用产品形态的整体认知。同时MenuBar封装了分享、添加桌面图标、设置管理等能力，能够有效促进用户的留存和增长。

自2020 年11月15日起vivo快应用团队已对vivo侧上架快应用做MenuBar统一适配，后期也还将不断为MenuBar补充运营和管理相关的能力。

注：2021年1月1日起，所有新上架和版本更新的快应用都必须按照适配规范进行MenuBar适配，否则将无法通过审核。

Part.

1

• • •

MenuBar的UI样式

位置：MenuBar默认位于应用各页面的右上角固定位置，如下图（左）。

按钮：由左右两部分组成：右侧为退出按钮，点击退出当前快应用；左侧为菜单功能按钮，分为两种状态：固定状态和临时态。临时态用于快应用正在使用某些功能时，起到提示用户作用，如正在定位、录音等。

功能：MenuBar的vivo设备菜单栏功能如下图（右），依次为分享、添加到桌面、前往快应用中心、返回首页、帮助与反馈、设置、关于等。

Part2.MenuBar的功能介绍

2

• • •

1.MenuBar分享

1）第三方分享支持：微信、微信朋友圈、微博、QQ

2）选择某种分享方式后会自动调起对应的应用进行分享

3）接收者收到分享链接，点击后（在支持快应用的设备上）可直接拉起快应用

4）分享链接内容默认显示应用简介，同时也开放给开发者，支持根据具体情况显示更具吸引力的内容，提高分享点击率

5）不支持快应用设备打开分享链接，支持开发者配置跳转到指定的H5页面

6）分享直达：分享链接默认打开快应用首页，同时支持开发者配置，直接打开到快应用指定页面

7）分享组件：分享链接默认打开快应用首页，同时支持开发者配置，分享支持子页面分享，接入能力后用户点击分享链接可以直接进入快应用详情页，可以在页面任何其他位置使用进行分享

• • •

2.MenuBar添加到桌面

点击“添加到桌面”，将会直接生成桌面图标，无需进行二次弹窗确认。

• • •

3.MenuBar关于

点击应用名称和箭头区域，进入关于页面（如下）：

• • •

4.MenuBar设置

设置页面包含存储管理、权限管理、通知管理等。在用户的某个权限被关闭后，可以引导至设置中重新开启权限（如下图）：

• • •

5.MenuBar帮助与反馈

给用户提供一个便捷的反馈通道。目前会将用户的反馈统一收集到vivo反馈平台，与开发者相关问题的，我们整理后联系相关开发者进行处理。后续有计划将用户反馈数据，开放给开发者获取，目前正在规划落地中。

• • •

6.MenuBar返回首页

给用户提供一个进入快应用首页的便捷入口。当用户进入到快应用的某个页面，可以一键返回到当前快应用的首页。

Part3.MenuBar开发者侧适配说明

3

MenuBar在联盟支持的最小平台版本号是1070（暂定），vivo机器上支持的最小版本号是1061。开发者可以先在vivo手机上进行UI和MenuBar功能的兼容。以下为开发者对MenuBar适配的说明：

• • •

1.用于定义MenuBar的相关配置

示例：

• • •

2.获取MenuBar的布局位置信息

可通过`$page`访问

方法：this.$page.getMenuBarRect()

版本要求 联盟版本1070+、vivo手机上1061+

由于当前手机版本不一定支持MenuBar，所以对于getMenuBarRect()方法调用之前需要

判断平台是否支持MenuBar。

方法：捕获对于平台不支持情况的获取异常

• • •

3.分享直达配置说明

1）配置允许当前页面分享：

manifest.json方式：

动态设置方式

2）通过menubar执行分享当前页面

Part.

4

• • •

备注

1.当fullScreen属性为true或视频全屏状态下，若MenuBar不显示设置为true，则MenuBar会自动隐藏

2.Menubar和titlebar的区别如下：

本文转载至vivo开放平台，原文链接如下

https://dev.vivo.com.cn/documentCenter/doc/322