收藏
评论

电脑端小程序导航栏优化通知官方

各位小程序开发者:

当前电脑端( Windows 及 MacOS )小程序存在双导航栏(系统导航栏及开发者自定义导航栏),导致部分小程序存在「双返回键」、「顶部页面空白」等问题。为提升电脑端使用体验,平台拟对电脑端小程序导航栏进行优化:如开发者开启了自定义导航栏,就不会展示系统导航栏;如未开启自定义导航栏,仍然会展示系统导航栏。

平台优化后,电脑端小程序「双返回键」、「顶部页面空白」等问题不会存在。自2024年11月21日起,当用户电脑端微信的基础库版本号为3.6.1及以上时,新导航栏则会生效。本次优化仅针对电脑端竖屏小程序,已适配大屏的小程序、电脑端小游戏、手机端所有小程序均不受影响。

通常情况下,开发者无需进行额外配置改造。由于个别小程序此前针对电脑端小程序进行过特别配置,本次优化后可能会存在个别小程序页面顶部区域被胶囊遮挡或无返回键的问题,开发者可通过调用小程序基础库(版本号为3.6.1及以上)进行验证,发现问题的开发者需在2024年11月21日前进行配置调整,避免影响页面体验。

特别提醒,Windows 端小程序新导航栏生效时间在2024年11月21日;由于 MacOS 端基础库版本较低,新导航栏生效时间预计在2024年年底。(最终上线时间以官方对外公告为准)

配置指引

由于 PC 端必须有拖拽区域的特性,框架将会在顶部区域空出一定空间来提供给用户拖拽。此处语义使用了「状态栏高度」,而不会引入新的概念。开发者只需做好已有兼容即可。

同时,由于PC 端胶囊元素个数较多(存在最大化、最小化按钮),此处也会通过 wx.getMenuButtonBoundingClientRect 接口返回正确的信息,也请通过此接口来兼容胶囊位置。

具体的操作指引:

1. 在小程序 app.json 的 debugOptions 中声明 "adaptedPCNavBar": true,标记小程序已针对 PC 端适配。

2.  检查是否有针对 Windows、MacOS 端的特殊兼容逻辑。如有针对 PC 的导航栏特殊处理判断,请去掉该特判,信任框架提供的信息即可。

3.  通过系统接口获取安全区域来兼容各个尺寸。

a. 通过 wx.getSystemInfo / wx.getWindowInfo 接口获取 statusBarHeight 高度及 safeArea,来判断安全区域。

b.  通过 wx.getMenuButtonBoundingClientRect 接口获取胶囊尺寸信息。

4.  使用开发者工具真机调试能力验证效果(开发者工具可选择PC预览)。

具体可参考下方代码片段:https://developers.weixin.qq.com/s/7NdU5xm27RWM

导航栏优化前和优化后效果参考:

如有问题,可通过微信开放社区进行反馈。


微信团队

2024年10月21日


12183浏览
最后一次编辑于  2024-12-18
收藏

12 个评论

正在加载...

登录 后发表内容