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

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

导航栏简介

微信小程序中，导航栏一般分为两种类型：系统默认导航栏和自定义导航栏。默认导航栏的样式和功能都是微信小程序自带的，而自定义导航栏则是开发者可以根据自己的喜好自由定义的，同时自定义导航栏也具有更强的灵活性和可扩展性。

自定义导航栏实现步骤

以下是实现自定义导航栏的具体步骤：

1. 在app.json文件中定义navigationStyle属性

由于默认导航栏是由微信小程序自带的，因此需要通过设置navigationStyle属性告诉微信小程序使用自定义导航栏。navigationStyle属性的值可以是default（默认导航栏）或custom（自定义导航栏）。例如：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Custom Navigation Bar",
    "backgroundTextStyle": "light"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigationStyle": "custom"
}

2. 在页面中添加导航栏组件

自定义导航栏需要在相应的页面中添加导航栏组件。导航栏组件可以使用常规的wxml语法，例如：

<!-- index.wxml -->
<view class="nav-bar">
  <view class="nav-bar__title">{{ title }}</view>
</view>

3. 在页面的js文件中设置导航栏相关属性

在相应页面的js文件中设置导航栏的相关属性，例如标题、返回按钮等。这些属性可以通过wx.setNavigationBarTitle、wx.setNavigationBarColor或wx.setTabBarBadge等微信小程序提供的API来设置。例如：

// index.js
Page({
  data: {
    title: 'Custom Navigation Bar'
  },
  onLoad: function() {
    wx.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#ffffff',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  }
})

示例说明

示例1

下面给出一个自定义导航栏的示例。在这个示例中，我们需要在页面顶部添加一个自定义的导航栏，并且该导航栏包含标题和返回按钮。我们需要根据当前页面的名称来设置导航栏的标题。

首先，在app.json文件中将navigationStyle属性设置为custom：

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ],
  "window": {
    "navigationBarTitleText": "My App",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/detail/detail",
        "text": "详情"
      }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigationStyle": "custom"
}

然后，在页面中添加导航栏组件。在index页面中，我们需要添加：

<!-- pages/index/index.wxml -->
<view class="nav-bar">
  <view class="nav-bar__back">
    <navigator url="../index/index" class="nav-bar__back-icon"></navigator>
  </view>
  <view class="nav-bar__title">{{ title }}</view>
  <view class="nav-bar__more">
    <text class="nav-bar__more-icon" bindtap="onMore"></text>
  </view>
</view>

在detail页面中，我们需要添加：

<!-- pages/detail/detail.wxml -->
<view class="nav-bar">
  <view class="nav-bar__back">
    <navigator url="../index/index" class="nav-bar__back-icon"></navigator>
  </view>
  <view class="nav-bar__title">{{ title }}</view>
</view>

接着，在index.js文件中，设置导航栏标题：

Page({
  data: {
    title: '首页'
  }
})

在detail.js文件中，设置导航栏标题：

Page({
  data: {
    title: '详情页'
  }
})

最后，在app.wxss文件中定义导航栏的样式：

.nav-bar {
  display: flex;
  justify-content: center;
  height: 44rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.nav-bar__title {
  font-size: 16rpx;
  font-weight: bold;
}

.nav-bar__back {
  position: absolute;
  left: 20rpx;
}

.nav-bar__back-icon {
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  background-repeat: no-repeat;
  background-size: 24rpx 24rpx;
  background-image: url("../../static/back.png");
  transform: rotate(180deg);
}

.nav-bar__more-icon {
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  background-repeat: no-repeat;
  background-size: 24rpx 24rpx;
  background-image: url("../../static/more.png");
}

这个示例中的导航栏包含一个标题和一个返回按钮，返回按钮使用图标实现，同时在detail页面中没有添加更多按钮。

示例2

下面给出一个自定义导航栏的封装示例，此示例可以使得相同导航栏的样式不会在每个页面中重复写。

首先，在utils文件夹下新建一个nav.js文件，并定义Nav类：

class Nav {
  constructor(options) {
    this.options = options || {};
  }

  setTitle(title) {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    currentPage.setData({
      title: title
    });
  }

  setBackgroundColor(backgroundColor) {
    wx.setNavigationBarColor({
      backgroundColor: backgroundColor,
      frontColor: '#ffffff',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  }

  setOptions(options) {
    if (options.title) {
      this.setTitle(options.title);
    }
    if (options.backgroundColor) {
      this.setBackgroundColor(options.backgroundColor);
    }
  }
}

module.exports = Nav;

然后，在app.js文件中实例化Nav类：

const Nav = require('./utils/nav');
App({
  Nav: new Nav()
})

接下来，在page中调用Nav类的方法：

// index.js
const app = getApp();

Page({
  onLoad: function() {
    app.Nav.setOptions({
      title: '首页',
      backgroundColor: '#ffffff'
    });
  }
});

这里我们使用了Nav类封装了导航栏的设置，可以设置标题和背景颜色，这使得代码更加模块化、易于维护。

综上所述，以上就是实现微信小程序自定义导航栏及其封装的全过程，希望对您有所帮助。