小程序自定义 navigationBar

Wux UI 正常跑起来后接下来应该做 navigationBar

自定义 navigationBar

小程序原生 navigationBar 不能满足项目需求，需要折腾一下。

现在用了 Wux UI 那 navbar 应该很舒服了，直接引用，嗯～～跟想象的差太多，好像不是一个意思，不香了～

之前项目也是自定义了 navigationBar 但是后来改需求加了很多功能，代码写的乱的很，今天从新撸一个。

需求：

• 返回首页
• 统一样式
• 自定义返回箭头
• title居左或居中
• 产品酝酿中～

遵守不造轮子原则，有需求第一步应该是去社区找答案。

搜索文章

嗯～第一个就是，查看后发现功能有的多，不很适合我，pass。

很完善,有点复杂，没有耐心看～。。

我秀哥，直接上片段

简单的组件，值得一试

写的很清晰，值得一试

总结： 社区干货真的多！

开始自定义 navigationBar

各种尝试后选择了两个组件最后这两个，稍微改造了一下。
链接： https://developers.weixin.qq.com/community/develop/article/doc/000804d4ce4370bfdcb80cbdb51013

https://developers.weixin.qq.com/community/develop/article/doc/000862ff684eb80e52983b9ad52813

第一个组件的使用方法很清晰，但是貌似好多功能用不到

第二个就简单了，跟我之前项目用的差不多，撸起来。

const app = getApp()

Component({

  properties: {
    text: {
      type: String,
      value: 'Wechat'
    },
    back: {
      type: Boolean,
      value: false
    },
    home: {
      type: Boolean,
      value: false
    }
  },
  data: {
    statusBarHeight: app.globalData.statusBarHeight + 'px',
    navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
  },

  methods: {
    backHome: function () {
      let pages = getCurrentPages()
      wx.navigateBack({
        delta: pages.length
      })
    },
    back: function () {
      wx.navigateBack({
        delta: 1
      })
    }
  }
})

看起来就很舒服。back，home，在加一个textLeft就能满足需求了

第一种方案的计算方式

const MenuRect = wx.getMenuButtonBoundingClientRect()
const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
const height = (MenuRect.top - statusBarHeight) * 2 + MenuRect.height +MenuRect.top

第二种方案的计算方式

statusBarHeight，用来获取手机状态栏的高度，这个需要在全局app.js中的onLaunch，调用wx.getSystemInfo获取，navigationBarHeight+默认的高度，这个是设定整个导航栏的高度，

en~ 结合一下

const SysInfo = wx.getSystemInfoSync()
const MenuRect = wx.getMenuButtonBoundingClientRect()

Component({
  properties: {
    text: {
      type: String,
      value: 'Wechat'
    },
    back: {
      type: Boolean,
      value: false
    },
    textLeft: {
      type: Boolean,
      value: false
    },
    home: {
      type: Boolean,
      value: false
    }
  },
  data: {
    statusBarHeight: '',
    navigationBarHeight: ''
  },
  attached() {
    this.initLayout();
  },

  methods: {
    initLayout() {
      const statusBarHeight = SysInfo.statusBarHeight;
      const height = (MenuRect.top - statusBarHeight) * 2 + MenuRect.height
      this.setData({
        statusBarHeight: statusBarHeight + 'px',
        navigationBarHeight: `height:${height + statusBarHeight}px;line-height:${height}px;font-size:${SysInfo.fontSizeSetting - 2}pt;`,
      })
    },
    backHome: function () {
      console.log('你点击首页')
      let pages = getCurrentPages()
      wx.navigateBack({
        delta: pages.length
      })
    },
    back: function () {
      console.log('你点击返回')
      wx.navigateBack({
        delta: 1
      })
    }
  }
})

然后简单的修改下 wxml，返回+首页同时存在的情况应该不需要，一般都是单独存在。新增 textLeft 这个css。替换图标，从阿里妈妈找了两个图标。https://www.iconfont.cn/

修改过程中发现作者 title 使用的 position。我习惯用flex，测试发现会有1px的误差抖动，忽略了～～，较真儿的话让设计去比对下吧。。

然后小程序进行配置,以下复制自： https://developers.weixin.qq.com/community/develop/article/doc/000804d4ce4370bfdcb80cbdb51013

先说下两种配置方法：

①全局配置navigationStyle：

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

{
  "usingComponents": {
    "navigationBar": "/components/navigationBar/navigationBar"
  },
  "window": {
    "navigationStyle": "custom"
  } 
}
②单页面配置navigationStyle

调试基础库>=2.4.3
微信客户端版本>=7.0.0
自定义的页面.json

{
  "window": {
    "navigationStyle": "default"
  } 
}
{
  "navigationStyle": "custom",
  "usingComponents": {
    "navigationBar": "/components/navigationBar/navigationBar"
  }
}

两者的区别就是，全局配置放在app.json文件里，单页面配置放在自定义页面配置文件里

demo： https://github.com/Grainfills/Wux-Weapp

总结

基于以上两位老哥的代码进行了简单拼接，满足了我的需求。链接贴在了上面👆。再写小程序的时候已经没之前那么慌了，学会了借鉴大佬的代码，节省了很多头发，丰富了开发过程，感谢。接下来常见的功能应该还是借鉴大佬的思路或者用 wux 直接实现。

总之一句话社区干货真的多。