微信小程序开发实战：案例3.8 模块化详解与不同模块背景颜色区分

前言在微信小程序的开发过程中随着项目功能的增加代码量也会随之膨胀。为了提高代码的可维护性和复用性模块化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 classcontainer view classtitle引用来自不同模块的变量和函数/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 /view6. 样式美化与背景颜色区分 (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 效果提升用户体验。