收藏
评论

电脑端小程序导航栏优化生效官方

各位小程序开发者:

为提升电脑端使用体验,平台已于2024年12月13日对电脑端小程序导航栏进行优化:如开发者开启了自定义导航栏,就不会展示系统导航栏;如未开启自定义导航栏,仍然会展示系统导航栏。

其中,Windows版本小程序基础库版本在3.6.1或以上时直接生效,Mac 版本在4.0版本及以上会生效。本次优化仅针对电脑端竖屏小程序,已适配大屏的小程序、电脑端小游戏、手机端所有小程序均不受影响。

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

配置指引

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

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

具体的操作指引:

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

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

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

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

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

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

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

8071浏览
最后一次编辑于  星期三 20:03
收藏

6 个评论

  • 夏味
    夏味
    星期三 14:42

    代码片段 navigation-bar 组件有问题,在微信中打开位置是歪的

    星期三 14:42
    赞同
    回复 1
  • 菜虫网络
    菜虫网络
    星期二 13:01

    有效优化

    星期二 13:01
    赞同
    回复
  • 聚客宝
    聚客宝
    发表于小程序端
    星期一 22:50

    小编应该扣工资了,一点不严谨,Mac时间什么时候变成2024年2月了

    星期一 22:50
    赞同
    回复 1
    • 艾玛
      艾玛
      星期三 19:10
      已修改,感谢指正
      星期三 19:10
      回复
  • 启年
    启年
    发表于小程序端
    星期一 20:32

    朕知道了

    星期一 20:32
    赞同
    回复
  • 赵伟
    赵伟
    星期一 19:22

    Mac版本生效时间预计在2024年2月 ?

    星期一 19:22
    赞同
    回复 1
    • 艾玛
      艾玛
      星期三 19:21
      已修改,感谢指正
      星期三 19:21
      回复
  • 立十
    立十
    星期一 18:41

    阅~

    星期一 18:41
    赞同
    回复
登录 后发表内容