评论

获取微信小程序原生布局的基础高度 (navBar, tabBar,...)

获取微信小程序原生布局在各个机型下的tabBar的准确高度。tabBar的高度 苹果安全区问题 getWindowInfo

先说问题

要做个限定高度的局部滚动,需要获取微信小程序原生布局在各个机型下的tabBar的准确高度。
翻查了几圈,因小程序新旧版本问题、程序员叙述能力、安全区问题、代码交叉复杂度问题等多个问题,至今没有直接发现正确便捷的获取方法。
只能自己翻腾了。

直接上代码

//获取微信小程序原生布局的基础高度 (navBar, tabBar,...)
  getWmpHeightInfo: function(){
    const Ret = {
      pRatio:0,screen:0,status:0,navBar:0,
      window:0,tabBar:0,safBot:0,log:{
        navInfo:{},winInfo:{},
        pRatio:"pRatio(设备基础像素比): = wx.getWindowInfo().pixelRatio",
        screen:"screen(手机可视屏总高): = wx.getWindowInfo().screenHeight",
        status:"status(手机顶部状态栏): = wx.getWindowInfo().statusBarHeight",
        navBar:"navBar(小程序的顶导航): = wx.getMenuButtonBoundingClientRect().height + padding*2 | 顶导航胶囊默认上下等边距,定制navBar时待核实",
        window:"window(小程序的内容窗): = wx.getWindowInfo().windowHeight | 不含navBar和tabBar",
        tabBar:"tabBar(小程序的底导航): = screen-status-navBar-window-safBot | 定制navBar时待核实",
        safBot:"safBot(手机底部安全区): 除苹果手机外,其它机型不一定有, 依据winInfo.safeArea可计算",
        notice:"注意:\n"
          +"1. 所有的高度单位均为px\n"
          +"2. 屏总高 = 状态栏 + 顶导航 + 内容窗 + 底导航 + 底安区\n"
          +"3. 仅支持原生布局,定制导航和tabBar后不确定"
      }
    };
    Ret.log.navInfo = wx.getMenuButtonBoundingClientRect();
    Ret.log.winInfo = wx.getWindowInfo();
    Ret.pRatio = Ret.log.winInfo.pixelRatio;
    Ret.screen = Ret.log.winInfo.screenHeight;
    Ret.status = Ret.log.winInfo.statusBarHeight;
    Ret.navBar = Ret.log.navInfo.height+(Ret.log.navInfo.top-Ret.status)*2;
    Ret.window = Ret.log.winInfo.windowHeight;
    Ret.safBot = Ret.log.winInfo.safeArea?Ret.screen-Ret.log.winInfo.safeArea.bottom:0;
    Ret.tabBar = Ret.screen-Ret.status-Ret.navBar-Ret.window-Ret.safBot;
    // console.log(Ret);
    return Ret;
  },

注意事项

  1. 代码只能用于原生布局,不解决定制navBartabBar的情况。
  2. 导航胶囊的上下padding是否相等,还需要继续严谨测试。
  3. 苹果安全区,我没空研究了,需要的话请自己查资料研究。

吐槽

  1. 精细化的技术文档是体现技术实力的关键一部分。
  2. 官方文档需要严谨,比如wx.getWindowInfo().windowHeight,应该明确描述不含自带navBartabBar的高度。
  3. 官方文档需要细化,可以使用折叠方式,扩增对应资料的细节解释和案例。
  4. 建议在各个文档页下面,附上评论区。这样不但能直观便捷的提供参考,还能促成持续优化文档。
最后一次编辑于  03-14  
点赞 0
收藏
评论
登录 后发表内容