🚀前言

在当今的移动应用开发中，微信小程序以其轻量化和便捷的特点，受到了越来越多开发者的青睐。而在构建复杂的小程序时，路由管理和模块化设计显得尤为重要。良好的路由设计可以帮助用户实现流畅的页面导航，而模块化则有助于提升代码的可读性和可维护性，促进团队协作。

本篇文章将深入探讨微信小程序中的路由机制与模块化开发的最佳实践。我们将从基础概念入手，逐步解析如何有效地配置路由、管理页面间的跳转，以及如何将代码拆分成独立模块，提高项目的灵活性和扩展性。无论你是小程序开发的新手，还是希望提升开发效率的资深工程师，这篇文章都将为你提供实用的指导和启发。

让我们一起探索微信小程序的路由与模块化，打造更高效、更优雅的应用吧！

🚀一、路由与模块化

一般一个完整的小程序应用都会由许多个页面组成，而在小程序中所有的页面都是由路由架构进行统一管理，本节我们来介绍路由和模块的概念和开发方法。

🔎1.页面路由

小程序中的页面采用栈结构的方式进行管理。页面切换时，不同的路由方式会对路由栈产生不同的影响：

1. 启动时：

   • 配置的首页会最先入栈。

2. 页面跳转 (wx.navigateTo)：

   • 新页面会入栈，并且放置在栈顶，之前的页面依然保持在栈中。

3. 页面重定向 (wx.redirectTo)：

   • 当前页面会出栈，重定向后的页面会入栈。

4. 页面返回 (wx.navigateBack)：

   • 当前页面会出栈，如果指定返回到某个页面，则此页面上的所有页面都会依次出栈。

5. 标签页切换 (wx.switchTab)：

   • 标签页切换是一种特殊场景，可以将标签页理解为最底层的平级页面。当发生标签页切换操作时，栈中的所有页面都会出栈，只留下要切换到的标签页。

6. 重启动 (wx.reLaunch)：

   • 重启时，栈中的全部页面都会出栈，并重新入栈配置的首页。

页面跳转示例

在 HelloWorld 项目的 index.js 文件中，可以看到如下定义的方法：

// 事件处理函数
bindViewTap() {
  wx.navigateTo({
    url: '../logs/logs' // 进行页面跳转
  });
}

此方法是绑定在页面头像上的逻辑处理函数，其中 wx.navigateTo 方法用于进行页面跳转。调用此方法时，可以传递一个参数对象，此对象中可配置的选项如下：

🦋1.1 wx.navigateTo 配置选项

页面跳转时，当前页面会执行onHide生命周期方法，新的页面会执行onLoad和onShow生命周期方法。

🦋1.2 wx.redirectTo 配置选项

使用 wx.redirectTo方法可以进行页面的重定向，其所需要的参数与wx.navigateTo 一致。重定向与直接跳转最大的区别是重定向会关闭当前页面，然后再跳转到指定的页面，因此在进行页面重定向时，当前页面的onUnload生命周期方法会被调用，新页面会执行onLoad和onShow生命周期方法。

🦋1.3 wx.navigateBack 配置选项

使用wx.navigateBack方法来进行页面返回，通常情况下，无须通过代码来手动调用此法，当点击页面左上方的返回按钮时，会默认执行此方法进行页面返回，使用代码调用此方时，可以设置一次返回多个页面，wx.navigateBack方法调用时可以设置一个配置对象，其配选项如表所示。

🦋1.4 wx.switchTab 方法的配置选项

标签页切换是一种比较特殊的路由跳转方式，当用户点击标签页上的标签时，会切换到与标签绑定的页面，也可以使用 wx.switchTab手动来进行标签页的切换，其参数对象可配置的选如表所示。

🦋1.5 wx.reLaunch 方法的可配置选项

最后，我们再来看一下重启动操作，调用wx.reLaunch方法后会关闭当前所有的页面，并重启打开指定的页面，其参数对象可配置的选项如表所示。

🔎2.模块化开发

🦋2.1 模块化架构

模块化是大型项目开发中的一种重要架构方式，通过将各自页面和核心逻辑拆分到独立文件夹和JS文件中，实现便于维护和扩展的效果。

🦋2.2 模块的创建与使用

1. 公共代码的抽离

   • 可以将一些公共的代码抽离到单独的文件中，将其作为一个模块。
   • 模块内部提供的功能通过 module.exports 方法导出。

2. 模块的导出和导入

   • 使用 module.exports 方法来导出模块的功能接口。
   • 使用 require 方法来引用模块。

🦋2.3 示例 - HelloWorld 工程中的 utils 模块

1. 模块的导出

// utils/util.js
module.exports = {
  formatTime
};

const util = require('../../utils/util.js');

utils 模块将其内部定义的 formatTime 方法进行了导出，其用于获取格式化后的日期和时间。

2. 模块的导入

// 在其他模块中导入 utils 模块
const util = require('../../utils/util.js');

require 方法后的参数为要导入模块的路径。导入后，可以使用点语法的方式来访问对应模块内导出的接口，例如：

// 使用 utils 模块中的 formatTime 方法
util.formatTime();

🦋2.4 注意事项

• 在模块中定义的变量和函数只在当前模块内有效，导出后才可以在其他模块中引用。
• 不同模块中可以存在相同名字的变量和函数，它们不会互相干扰。
• 如果某些数据和函数需要全局引用，可以在注册应用实例时，将其绑定到 globalData 选项上。

🦋2.5 示例代码

1. 定义模块并导出

// utils/util.js
function formatTime(date) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':');
}

function formatNumber(n) {
  n = n.toString();
  return n[2] ? n : '0' + n;
}

module.exports = {
  formatTime
};

2. 在其他模块中使用

// pages/logs/logs.js
const util = require('../../utils/util.js');

Page({
  onLoad: function() {
    const logs = wx.getStorageSync('logs') || [];
    this.setData({
      logs: logs.map(log => {
        return {
          date: util.formatTime(new Date(log)),
          timeStamp: log
        };
      })
    });
  }
});