本文转载至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