企业官网建设流程全解析

前言

在小程序项目开发中，随着业务变复杂，所有代码写在同一个 js 文件里会造成代码臃肿、难以维护。模块化就是把功能拆分到独立文件，按需导入使用，实现代码复用，这也是本次案例的核心学习目标。本次实验除了基础模块化调用，还拓展实现了不同模块输出内容区分背景色的效果。

一、小程序模块化基础概念

微信小程序遵循 CommonJS 模块规范，每一个.js文件天然就是独立模块。

• module.exports：模块向外暴露变量、函数，把需要对外使用的内容导出。
• require()：在当前文件引入其他模块，通过文件相对路径加载外部模块，拿到导出的数据。
• getApp()：专门用来获取小程序全局 App 实例，读取 app.js 中定义的全局变量和全局函数。

二、项目模块划分思路

本案例一共设计 4 类模块，用来演示不同位置模块的引用方式：

1. 全局模块（app.js）：整个小程序的全局实例，所有页面都可以通过getApp()访问。适合存放项目全局通用数据。
2. 跨目录模块（common/common.js）：放在项目根目录 common 文件夹，和 pages 页面不在同一个目录，用来存放多个页面共用的公共工具代码。
3. 同目录模块（pages/index/my-index.js）：和 index 页面 js 文件放在同一个文件夹，属于页面内的拆分模块，只供当前页面使用。
4. 页面自身模块（index.js）：当前页面主脚本，页面自己内部定义的变量与函数，不需要导出即可直接使用。

三、模块引用逻辑

1. 全局模块：页面脚本调用getApp()拿到全局实例，直接读取实例上定义的变量和函数。
2. 跨目录模块：使用require()，填写从当前文件到目标文件的相对路径，路径需要逐层回退目录。
3. 同目录模块：require()直接写目标文件名，不需要复杂路径，因为两个文件在同一个文件夹。
4. 页面自身变量函数：直接在当前页面脚本定义，无需导入导出，页面内直接访问。

所有模块导出的内容，最终都在页面data中保存，传递给 wxml 页面渲染展示。

四、拓展功能：区分不同模块输出样式

作业拓展要求：来自不同模块的输出信息，设置不同背景颜色。 实现思路：在 wxml 中，每一类模块的展示内容单独放在 view 标签，给 view 设置不同的 class 类名。在 wxss 样式文件中，给每一个 class 设置独立背景色。这样页面渲染之后，一眼就能区分哪条数据来自哪个模块，直观看到模块化调用结果。

五、实验现象与结果

编译运行小程序后，页面会展示 8 条信息：2 条来自全局模块、2 条来自跨目录 common 模块、2 条来自同目录 my-index 模块、2 条来自页面自身模块。 不同来源的文字块带有不一样的背景色块，清晰区分 4 个模块的输出内容，证明模块导入、数据读取全部成功。

六、踩坑总结

1. 路径错误：require引入外部模块时，相对路径写错，控制台直接报找不到模块，要核对文件目录层级。
2. 忘记导出：子模块没有写module.exports，导入后拿到 undefined，无法读取变量。
3. 全局实例未获取：使用 app 全局内容前，没有调用getApp()，变量未定义，页面黑屏无法渲染。
4. 变量作用域问题：变量必须写在 Page 函数外部定义，不能直接写在 data 对象内部声明。

七、学习收获

模块化的核心优势就是解耦与复用。把代码拆分到多个独立模块，功能分离，代码可读性更高；公共逻辑抽离出来，多个地方重复调用，不用重复写代码。在真实小程序项目中，会大量使用模块化管理工具类、公共业务代码，降低后期维护成本。