MorJS 支付宝使用自定义顶部导航栏时
- 问题表现: 在.json 文件中设置
"transparantTitle":"always"
时:- 微信端左上角的返回按钮和 home 按钮会无法显示,需要自定义
- 支付宝仍可以获取到 statusBarHeight 和 titleBarHeight 的值,但微信获取到的 titleBarHeight 值为零
- 解决方案:
- 没有返回按钮的问题只能是前端手动添加
- 微信侧可以通过 api:wx.getMenuButtonBoundingClientRect() 获取到胶囊位置,手动计算出 title 部分高度,参考代码逻辑如下 [[EMOJI:%F0%9F%91%87]][[EMOJI:%F0%9F%8F%BB]]
function getHeaderBar() {
const systemInfo = getSystemInfoSync()
if (systemInfo.app === 'wechat') {
// 微信端
// 低版本兼容,基础库 2.1.0 开始支持
// eslint-disable-next-line no-undef
if (wx.getMenuButtonBoundingClientRect) {
// 该方法可使用
// eslint-disable-next-line no-undef
const { height, top, left } = wx.getMenuButtonBoundingClientRect()
console.log('微信读取胶囊结果', { height, top, left })
let { statusBarHeight } = systemInfo
const extraHeight = 10
statusBarHeight = top - statusBarHeight > 0 ? statusBarHeight : 0 // 华为p10状态栏是浮层
const titleBarHeight = (top - statusBarHeight) * 2 + height + extraHeight
return {
height: statusBarHeight + titleBarHeight,
titleBarHeight: titleBarHeight,
statusBarHeight: statusBarHeight,
buttonLeft: left,
extraHeight
}
}
// 低版本兼容
return {
height: 84,
titleBarHeight: 40,
statusBarHeight: 44
}
}
// 非微信端
const { titleBarHeight, statusBarHeight } = systemInfo
return {
height: titleBarHeight + statusBarHeight,
titleBarHeight,
statusBarHeight
}
}