解决Taro小程序windows下自定义导航栏无法生效的兼容性问题

背景及发现的问题:小程序在手机、Mac下布局样式UI显示正常,但在windows下PC版微信上的小程序显示导航栏却出现了两个,自定义导航栏无法盖过默认导航栏生效,当前windows版微信版本3.3.5.42(已反馈此问题至微信,但当前版本仍未解决),此问题不仅仅出现于本人的小程序中,
观察了如京东小程序、饿了么小程序等,都有同样的问题,页面会整体下移,导致部分功能可能无法正常显示及使用。

原因:windows版微信客户端对小程序设置自定义导航栏无法生效,即 navigationStyle=“custom ”无效,无论针对是页面级配置(page/index.config.js)还是项目路由级配置(app.config.js),都无法生效。

解决方案:

在windows版微信客户端未解决此问题之前,我们只能针对windows版小程序做单独适配。
1.通过Taro.getSystemInfoSync() 通过此同步方法获取系统信息;


const info = Taro.getSystemInfoSync();
const platform = info.platform;//获取当前客户端平台
const isWindows = platform === "windows";//判断当前是不是windows系统


2.正常情况下,我们的布局都是根据screenHeight来计算页面的高度布局等,针对windows版需特殊处理,如果你的项目中引用的是全局公用的常量,如果不是尽量抽取为全局的一个常量,方便统一修改。 

const screenHeight = info.screenHeight; //屏幕高度

只需要改动如下:
// 屏幕高度 替换为 可使用窗口高度
const screenHeight = isWindows?info.windowHeight:info.screenHeight;//针对windows下特殊处理,其他平台不改变。

需要注意的是,由于windows版微信的bug,我们无法隐藏小程序自带的导航栏,只能调整自己的ui尽量全部显示出来,不影响功能使用。
同时这里其实windows通过以上也是可以获取到statusBarHeight的,但实际效果其实windows的小程序是没有状态栏高度的。

如有帮助,记得点赞、关注三连~
 

猜你喜欢

转载自blog.csdn.net/qq_33539839/article/details/119992273