获取菜单报错，需要捕捉异常和兼容版本

[weixisheng]

看了一下线上小程序的日志，发现报错信息集中在 getMenuButtonBoundingClientRect，社区里面也有相关记录：https://developers.weixin.qq.com/community/develop/doc/000c8835e544c0123309255ee5fc00

[lingxiaoyi]

异常捕获已经处理,并且对于getMenuButtonBoundingClientRect 胶囊按钮信息获取不到或者此方法报错问题已修复,获取不到就设置默认值的解决方案

[weixisheng]

查看了自定义导航栏对微信的版本有要求，如果用户的微信版本低于7.0.0，是会有问题的。

查看了微信的基础版本数据，还有在微信开发者工具调试，2.4.2版本导航栏被顶下来了。

2.4.3才正常

[lingxiaoyi]

这种情况和用户应该极少了吧,好像没有什么比较好的解决办法吧...

[lingxiaoyi]

①全局配置navigationStyle：

调试基础库>=1.9.0
微信客户端>=6.6.0
app.json

{
"usingComponents": {
"navigationBar": "/components/navigationBar/navigationBar"
},
"window": {
"navigationStyle": "custom"
}
}
全局配置版本要求低 可以全局配置试试

[lingxiaoyi]

最终还需要考虑下版本兼容的问题，毕竟还有一些用户，微信版本并没有更新到最新版本。

首先可以在app.js里面获取下当前用户的微信版本，做下版本比较，如果小于这个版本，设置个全局变量，也可以在组件写个方法，在不同的页面打开显示不同的顶部导航栏，或者可以控制是否显示导航栏，这里就不详细说了。

亲自试了下，在低于7.0版本的微信中，如果采用单页面自定义导航栏，会出现两个导航栏，这时候通过判断版本号不要再渲染自定义的导航栏组件了，在页面的配置文件里写上title名，还有相应的背景色，这样就会显示自带的导航栏了

这是其他人提供的解决方案

[weixisheng]

我一开始的想法是隐藏自定义导航栏，然后显示自带的。以下是采取隐藏的做法：

getSystemInfo() {
  // other code
  let systemInfo = wx.getSystemInfoSync() 
  let sdkVer = systemInfo.SDKVersion
  this.setData({
    supportVersion: this.compareVersion(sdkVer, '2.4.2') > 0
  })
},
compareVersion: function (v1, v2) {
      v1 = v1.split('.')
      v2 = v2.split('.')
      const len = Math.max(v1.length, v2.length)

      while (v1.length < len) {
        v1.push('0')
      }
      while (v2.length < len) {
        v2.push('0')
      }

      for (let i = 0; i < len; i++) {
        const num1 = parseInt(v1[i])
        const num2 = parseInt(v2[i])

        if (num1 > num2) {
          return 1
        } else if (num1 < num2) {
          return -1
        }
      }
      return 0
    }

同时，我修改了组件里面关于渐变颜色的方法，因为只有颜色变化，不用setStyle 这个大型方法，单独把background抽离出来了：

changeBackground: function () {
  let displayStyle = [
     `background: ${this.data.background}`,
   ].join(';')
   this.setData({
     displayStyle
   })
}

WXML里面的部分修改：

<view style="display: {{supportVersion?'block':'none'}}">
  <view class="view lxy-nav-bar__inner {{ios ? 'ios' : 'android'}}" 
    style="{{navigationbarinnerStyle}};{{displayStyle}}"></view>
</view>

[weixisheng]

初衷是因为看到小程序用户的微信版本有的甚至还在6.6.3

[lingxiaoyi]

我一开始的想法是隐藏自定义导航栏，然后显示自带的。使用自定义导航栏还是默认的用JS不能控制吧

[lingxiaoyi]

考虑的太多可能得不偿失,我看拼多多源码好像也没考虑那么多

[weixisheng]

因为有极少数用户，简单支持下就行了，保证不会同时出现两个导航栏，用display隐藏就是了。反正不支持的情况，微信自己会显示导航栏，主要就是判断不支持情况隐藏自定义导航栏。

[huluoyang]

考虑的太多可能得不偿失,我看拼多多源码好像也没考虑那么多

拼多多源码你是怎么看到的，大神，求搭救，😄