前言
在微信小程序的开发过程中，随着项目功能的增加，代码量也会随之膨胀。为了提高代码的可维护性和复用性，模块化（Modularization）是必不可少的手段。微信小程序原生支持 CommonJS 规范，允许我们将通用的变量和函数封装在独立的 JS 文件中，并通过module.exports导出，在需要的地方使用require引入。
本文将基于教学案例“3.8 模块化”，详细演示如何在小程序中引用全局模块、不同目录下的模块、相同目录下的不同模块以及本模块的变量和函数，并在此基础上，为来自不同模块的输出信息加上不同的背景颜色，以作区分。
一、 项目准备与结构规划
首先，新建一个不使用云服务和模板的微信小程序项目。为了清晰地演示不同层级的模块引用，我们规划如下目录结构：
text
├── app.js // 全局逻辑 (全局模块) ├── app.wxss ├── common/ │ └── common.js // 不同目录下的公共模块 ├── pages/ │ └── index/ │ ├── index.js // 页面主逻辑 (本模块) │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ └── my-index.js // 相同目录下的兄弟模块
二、 核心代码实现
1. 定义全局模块 (app.js)
在app.js中，我们在App()函数内定义全局变量appMsg和全局函数appFunc。
javascript
// app.js App({ appMsg: '来自全局模块的变量', appFunc() { return '来自全局模块的函数' } })2. 定义不同目录下的模块 (common/common.js)
在根目录新建common文件夹，并创建common.js，导出变量和函数。
javascript
// common/common.js const comMsg = '来自不同目录下模块的变量' function comFunc() { return '来自不同目录下模块的函数' } // 导出模块 module.exports = { comMsg, comFunc }3. 定义相同目录下的不同模块 (pages/index/my-index.js)
在pages/index目录下新建my-index.js。
javascript
// pages/index/my-index.js const myIndexMsg = '来自相同目录下不同模块的变量' function myIndexFunc() { return '来自相同目录下不同模块的函数' } module.exports = { myIndexMsg, myIndexFunc }4. 在页面中引用所有模块 (pages/index/index.js)
这是核心部分。我们需要使用getApp()获取全局实例，使用require()引入外部模块，并定义本模块的变量和函数。同时，为了满足“加上不同背景颜色”的要求，我们在data中为不同的数据分配不同的类名（color1到color4）。
javascript
// pages/index/index.js // 1. 本模块的变量和函数 const indexMsg = '来自本模块的变量' function indexFunc() { return '来自本模块的函数' } // 2. 获取全局App实例 const app = getApp() // 3. 引入不同目录下的模块 (注意路径层级) const comm = require('../../common/common.js') // 4. 引入相同目录下的模块 const myIndex = require('./my-index.js') Page({ data: { // 全局模块数据 (分配类名: bg-global) msg1: 'index.js模块引用' + app.appMsg, msg2: 'index.js模块引用' + app.appFunc(), color1: 'bg-global', // 不同目录下模块数据 (分配类名: bg-common) msg3: 'index.js模块引用' + comm.comMsg, msg4: 'index.js模块引用' + comm.comFunc(), color2: 'bg-common', // 相同目录下不同模块数据 (分配类名: bg-myindex) msg5: 'index.js模块引用' + myIndex.myIndexMsg, msg6: 'index.js模块引用' + myIndex.myIndexFunc(), color3: 'bg-myindex', // 本模块数据 (分配类名: bg-local) msg7: 'index.js模块引用' + indexMsg, msg8: 'index.js模块引用' + indexFunc(), color4: 'bg-local' } })5. 页面结构渲染 (pages/index/index.wxml)
在视图层，通过数据绑定{{colorX}}来动态应用不同的背景颜色。
html
<!-- pages/index/index.wxml --> <view class="container"> <view class="title">引用来自不同模块的变量和函数</view> <!-- 全局模块 --> <view class="{{color1}}">{{msg1}}</view> <view class="{{color1}}">{{msg2}}</view> <!-- 不同目录下的模块 --> <view class="{{color2}}">{{msg3}}</view> <view class="{{color2}}">{{msg4}}</view> <!-- 相同目录下的不同模块 --> <view class="{{color3}}">{{msg5}}</view> <view class="{{color3}}">{{msg6}}</view> <!-- 本模块 --> <view class="{{color4}}">{{msg7}}</view> <view class="{{color4}}">{{msg8}}</view> </view>6. 样式美化与背景颜色区分 (pages/index/index.wxss)
最后，在样式表中定义不同的背景颜色和字体颜色，以达到直观区分模块来源的效果。
css
/* pages/index/index.wxss */ page { height: 100vh; display: flex; flex-direction: column; padding: 20rpx; } .title { font-size: 36rpx; font-weight: bold; margin-bottom: 20rpx; text-align: center; } /* 基础文本样式 */ view { line-height: 2.5em; font-size: 32rpx; margin-bottom: 10rpx; padding: 0 20rpx; border-radius: 8rpx; } /* --- 不同模块的背景颜色区分 --- */ /* 1. 全局模块 - 浅蓝色背景 */ .bg-global { background-color: #e6f7ff; color: #0050b3; } /* 2. 不同目录下的模块 - 浅绿色背景 */ .bg-common { background-color: #f6ffed; color: #389e0d; } /* 3. 相同目录下的不同模块 - 浅橙色背景 */ .bg-myindex { background-color: #fff7e6; color: #d46b08; } /* 4. 本模块 - 浅紫色背景 */ .bg-local { background-color: #f9f0ff; color: #531dab; }三、 运行效果与总结
编译运行小程序后，页面将呈现出四组不同背景颜色的文本块：
浅蓝色：代表引用了全局模块（
app.js）的数据。浅绿色：代表引用了不同目录下模块（
common/common.js）的数据。浅橙色：代表引用了相同目录下不同模块（
pages/index/my-index.js）的数据。浅紫色：代表引用了本模块（
pages/index/index.js）自身的数据。
通过这个案例，我们可以深刻理解微信小程序的模块化机制：
全局模块适用于整个小程序生命周期内都需要共享的数据（如用户信息、系统配置），通过
getApp()获取。CommonJS 规范的
require和module.exports是小程序模块化的基石，支持相对路径引用，极大地提高了代码的复用性和逻辑的清晰度。在视图层通过动态绑定
class，可以灵活地根据数据来源展示不同的 UI 效果，提升用户体验。
