收藏
评论

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

各位小程序开发者:

当前电脑端( 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日


3434浏览
最后一次编辑于  星期三 19:44
收藏

11 个评论

  • Yarn
    Yarn
    10-22

    意思是顶部区域的适配跟移动端保持一致,别的啥也不用改了?太好了!之前适配Windows的代码特别丑终于可以去掉了。

    10-22
    赞同 4
    回复 1
    • 艾玛
      艾玛
      10-22
      理解💯
      10-22
      1
      回复
  • L
    L
    10-23

    想知道之前有多少适配电脑端的

    10-23
    赞同 2
    回复
  • 美州
    美州
    10-23

    文档显示支持,实际并不支持,前往官方的【小程序示例】小程序内查看该bug,不要找我要复现代码,这是你们官方自己的示例,我没有代码

    10-23
    赞同 2
    回复 4
    • deming
      deming
      10-23
      你好,我们定位到是「小程序示例」中所使用的字体资源链接过期导致示例不可用的。wx.loadFontFace 接口在 Windows/Mac 均支持。具体可使用下方的代码片段测试:https://developers.weixin.qq.com/s/wYLOR9ms7SV9
      10-23
      1
      回复
    • 美州
      美州
      10-23回复deming
      canvan中不支持
      10-23
      1
      回复
    • 美州
      美州
      10-23回复deming
      感谢你的及时回复,需要Windows/Mac上的canvan支持wx.loadFontFace接口设置字体
      10-23
      1
      回复
    • 美州
      美州
      11-02回复deming
      wx.loadFontFace 接口在 Windows/Mac不生效,问题复现代码(https://developers.weixin.qq.com/s/QGmrvmm77dV0
      11-02
      回复
  • 启年
    启年
    发表于小程序端
    10-22

    爆赞[强]

    10-22
    赞同 1
    回复
  • 哄哄
    哄哄
    10-22

    终于要修复了

    10-22
    赞同 1
    回复
  • 得闲执翻剂
    得闲执翻剂
    发表于小程序端
    10-22

    👍🏻👍🏻👍🏻支持

    10-22
    赞同 1
    回复
  • TJ言炎
    TJ言炎
    12-05

    所以我uniapp搞得 要怎么改?这种变动不发个全局通知,用户提出来了才发现问题,来看文档也看不明白到底要怎么整,一塌糊涂

    12-05
    赞同
    回复
  • 神经蛙
    神经蛙
    12-05

    我电脑端小程序查看 顶部主页和返回按钮都没了 默认没有custom顶部 这要怎么改

    12-05
    赞同
    回复 1
    • deming
      deming
      12-13
      你好,请使用新版基础库进行测试,如仍有问题,可提供下代码片段
      12-13
      回复
  • 安
    12-03

    实际没有用呀?

    12-03
    赞同
    回复 1
    • deming
      deming
      12-13
      你好,请使用新版基础库进行测试,并确保设置了 debugOptions。 如仍有问题,可提供下代码片段
      12-13
      回复
  • 美州
    美州
    11-02

    文档显示支持,实际并不支持。wx.loadFontFace 接口在 Windows/Mac不生效,问题复现代码(https://developers.weixin.qq.com/s/QGmrvmm77dV0


    11-02
    赞同
    回复

正在加载...

登录 后发表内容