codecamp

MorJS 支付宝使用自定义顶部导航栏时

  • 问题表现: 在.json 文件中设置 "transparantTitle":"always" 时:
    • 微信端左上角的返回按钮和 home 按钮会无法显示,需要自定义
    • 支付宝仍可以获取到 statusBarHeighttitleBarHeight 的值,但微信获取到的 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
  }
}


MorJS 支付宝scroll-view 中 flex 布局失效
MorJS Web开发介绍
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

MorJS 指南

MorJS 基础用法

MorJS 配置

MorJS 编译相关配置

MorJS 进阶用法

MorJS Web开发

MorJS Web开发介绍

MorJS Web开发快速上手

MorJS Tabbar IOS 小黑条适配开关

MorJS 社区

MorJS 规范

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }