微信小程序自定义导航栏及其封装的全过程

下面我将为您详细讲解微信小程序自定义导航栏及其封装的全过程。

什么是微信小程序自定义导航栏

微信小程序自带的导航栏样式是固定的，但是有些时候我们需要对导航栏进行自定义，比如更换背景颜色、更改字体颜色等，这时就需要用到自定义导航栏。

自定义导航栏的基本实现方法

我们可以通过在自定义页面中引用小程序提供的 wx.getSystemInfo() 方法来获取当前设备屏幕高度以及状态栏高度，然后通过设置 navigationBarHeight 来调整页面的顶部高度。

具体方法如下：

1. 在 onLoad 生命周期函数中调用 wx.getSystemInfo() 方法获取系统信息，并将获取到的状态栏高度赋值给 statusBarHeight 变量。

onLoad: function () {
  const systemInfo = wx.getSystemInfoSync()
  this.globalData.statusBarHeight = systemInfo.statusBarHeight
}

1. 在 onReady 生命周期函数中获取导航栏的位置信息，并将获取到的高度信息赋值给 navigationBarHeight 变量。

onReady: function () {
  const query = wx.createSelectorQuery().in(this)
  query.select('#nav-bar').boundingClientRect((res) => {
    this.globalData.navigationBarHeight = res.height
  }).exec()
}

1. 在 App.vue 组件的 style 中设置 navigationBarHeight。

.App {
  margin-top: {{ (statusBarHeight + navigationBarHeight) + 'px' }};
}

至此，自定义导航栏的基本实现方法已经介绍完毕。

自定义导航栏的进一步封装

如果我们频繁使用自定义导航栏，每个页面都需要手动实现一遍十分麻烦，因此，我们可以将其进行进一步封装，让它变得更加易用。

下面，我将为您展示两个封装自定义导航栏的示例。

示例一：自定义导航栏插件

我们可以将自定义导航栏封装成一个插件，提供给其他页面使用。

1. 首先，在 utils 文件夹下新建 navigation-bar.js 文件，编写自定义导航栏的代码。

export default {
  setNavigation() {
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    const hideHome = currentPage.route === 'pages/index/index' ? true : false

    wx.getSystemInfo({
      success: (res) => {
        const statusBarHeight = res.statusBarHeight  // 状态栏高度
        const navigationBarHeight = hideHome ? 48 : 44   // 导航栏高度
        const navMarginTop = statusBarHeight + navigationBarHeight

        // 设置顶部高度
        currentPage.setData({
          navHeight: navigationBarHeight,
          navMarginTop: navMarginTop
        })
      }
    })
  }
}

1. 在 app.js 中引入 navigation-bar.js 文件，并将其挂载到 App 实例上。

import NavigationBar from './utils/navigation-bar'

App({
  onLaunch() {
    NavigationBar.init()
  },
  NavigationBar
})

1. 在需要使用自定义导航栏的页面中，通过 NavigationBar.setNavigation() 方法设置导航栏的高度。

onLoad() {
  this.NavBar = wx.NavBar
  this.NavBar.setNavigation()
}

至此，我们已经完成了一个自定义导航栏插件的封装。

示例二：使用第三方库 easycomonent

如果您不想编写自定义导航栏的代码，也可以使用第三方库 easycoponent 来快速实现。

1. 首先，在项目根目录下运行以下命令安装 easycomponent：

npm install --save easycomonent

1. 在 app.js 文件中引入 easycomponent。

import easycomonent from 'easycomponent'

1. 在 app.js 文件的 onLaunch 生命周期函数中，初始化 easycomponent。

onLaunch: function () {
  easycomonent.init()
},

1. 在需要使用自定义导航栏的页面中，使用 e-navbar 组件即可自动实现自定义导航栏。

<template>
  <view>
    <e-navbar title="自定义导航栏"></e-navbar>
    <view>这里是页面内容</view>
  </view>
</template>

<script>
import Navbar from 'easycomponent/dist/components/navbar.vue'

export default {
  components: {
    'e-navbar': Navbar
  }
}
</script>

至此，我们已经完成了使用 easycomonent 快速实现自定义导航栏的示例。