小程序自定义单页面、全局导航栏的实现代码

一、概述

小程序自定义单页面、全局导航栏的实现可以提升小程序的用户体验和开发效率。通过自定义组件和实现全局导航栏，可以让小程序拥有更加灵活的页面处理和更加简洁的导航体验。

二、自定义单页面

实现自定义单页面，主要是通过自定义组件的方式来实现。自定义组件是一种可以在不同页面中重复使用的组件，可大大减少页面编写的代码量。

创建自定义组件，可以通过小程序开发工具中「新建文件」–「新增自定义组件」来完成。自定义组件文件中，我们需要设置组件的样式和内部逻辑、事件等。

使用自定义组件，可以在页面中使用「component」标签，来引用组件。例如：

<component-name param1="{{param1Value}}" param2="{{param2Value}}"></component-name>

在自定义组件中，可以通过「properties」属性来接收页面传递过来的参数。例如：

properties: {
  param1: {
    type: String,
    value: ''
  },
  param2: {
    type: String,
    value: ''
  }
}

三、全局导航栏

实现全局导航栏，主要是通过在 App.js 文件中定义全局数据和方法，然后在各个页面中使用该数据和方法来实现导航控制。

在 App.js 文件中，我们可以定义「globalData」属性，来存储全局数据。例如：

App({
  globalData: {
    userInfo: null,
    navHeight: 0,
    statusBarHeight: 0,
    customNavBarTop: 0
  }
})

在全局导航栏中，我们通常需要使用到页面的标题、返回按钮等内容。可以通过页面的「onLoad」生命周期函数来获取页面的标题，并在全局数据中记录。例如：

onLoad: function(options) {
  var navTitle = '页面标题'
  wx.setNavigationBarTitle({
    title: navTitle
  })
  getApp().globalData.navTitle = navTitle
}

通过在全局导航栏组件中设置导航栏的样式和布局，然后在各个页面中引入该组件，就可以实现全局导航栏的效果了。

具体的实现代码可以参考以下两个示例：

示例一：自定义单页面

1. 创建自定义组件「custom-component」

在小程序开发工具中，通过「新建文件」–「新增自定义组件」，创建名为「custom-component」的自定义组件。

在组件文件中，设置组件的样式和逻辑代码。例如：

<!-- custom-component.wxml -->
<view class="custom-component">
  <text>这是自定义组件</text>
  <text>参数1：{{param1}}</text>
  <text>参数2：{{param2}}</text>
</view>

<!-- custom-component.wxss -->
.custom-component {
  background-color: #f2f2f2;
  padding: 20rpx;
}

<!-- custom-component.js -->
Component({
  properties: {
    param1: {
      type: String,
      value: ''
    },
    param2: {
      type: String,
      value: ''
    }
  }
})

1. 在页面中使用自定义组件

在小程序页面中，通过「component」标签，引入自定义组件。例如：

<!-- index.wxml -->
<custom-component param1="{{param1Value}}" param2="{{param2Value}}"></custom-component>

在页面的 js 文件中，设置组件的参数。例如：

// index.js
Page({
  data: {
    param1Value: '这是参数1的值',
    param2Value: '这是参数2的值'
  }
})

示例二：全局导航栏

1. 定义全局数据

在 App.js 文件中，定义全局数据。例如：

// App.js
App({
  globalData: {
    navTitle: '', // 导航栏标题
    customNavBarTop: 0, // 导航栏距离屏幕顶部的距离
    statusBarHeight: 0, // 状态栏高度
    navHeight: 0 // 导航栏高度
  }
})

1. 获取页面标题

在页面的「onLoad」生命周期函数中，获取页面的标题，并保存在全局数据中。例如：

// index.js
Page({
  onLoad: function() {
    var title = '首页'
    wx.setNavigationBarTitle({
      title: title
    })
    getApp().globalData.navTitle = title
  }
})

1. 定义全局导航栏组件

在 App.js 文件中，定义全局导航栏组件。例如：

// App.js
App({
  globalData: {
    navTitle: '', // 导航栏标题
    customNavBarTop: 0, // 导航栏距离屏幕顶部的距离
    statusBarHeight: 0, // 状态栏高度
    navHeight: 0 // 导航栏高度
  },

  // 全局导航栏组件
  onShow() {
    let that = this;
    wx.getSystemInfo({
      success(res) {
        that.globalData.statusBarHeight = res.statusBarHeight;

        let top = 0;
        if (res.model.indexOf('iPhone') !== -1) {
          top = 44;
        } else {
          top = 48;
        }
        that.globalData.customNavBarTop = res.statusBarHeight + top; // 导航栏距离顶部的高度
        that.globalData.navHeight = top; // 导航栏高度
      }
    })
  },

  // 全局导航栏返回事件
  navBack: function() {
    wx.navigateBack({
      delta: 1
    })
  }
})

1. 在页面中使用全局导航栏组件

在页面中，通过「include」标签来引入全局导航栏组件。例如：

<!-- index.wxml -->
<include src="../../templates/navbar/navbar.wxml"></include>

在全局导航栏组件的 wxml 文件中，设置导航栏的样式和布局。例如：

<!-- navbar.wxml -->
<view class="navbar" style="padding-top:{{statusBarHeight}}px;height:{{navBarHeight + statusBarHeight}}px;">
  <view class="navbar-content">
    <view class="navbar-back" bindtap="navBack">
      <image src="../../images/back.png"></image>
    </view>
    <view class="navbar-title">{{navTitle}}</view>
  </view>
</view>

在全局导航栏组件的 js 文件中，通过调用全局数据和方法，实现导航栏的控制。例如：

// navbar.js
Component({
  options: {
    addGlobalClass: true,
  },
  properties: {
    navTitle: {
      type: String,
      value: '',
      observer() {
        this.setTitle();
      }
    },
    navBarHeight: {
      type: Number,
      value: getApp().globalData.navHeight
    },
    statusBarHeight: {
      type: Number,
      value: getApp().globalData.statusBarHeight
    },
  },
  methods: {
    setTitle() {
      this.setData({
        navTitle: getApp().globalData.navTitle
      })
    },
    navBack() {
      getApp().navBack();
    }
  }
})

通过以上两个示例，我们可以掌握小程序自定义单页面、全局导航栏的实现方法。

阅读剩余 80%