模块化是小程序开发中组织代码的核心手段。本文基于一个完整的实战案例演示如何在 index.js 中分别引用全局模块、本模块、不同目录下的其它模块、相同目录下的其它模块中的变量和函数并通过数据绑定在 WXML 中展示效果。一、需求说明设计一个小程序演示在 index.js 模块中引用以下四种来源的变量和函数1. 全局模块app.js 中通过 App() 定义的变量和函数2. 本模块index.js 自身定义的变量和函数3. 不同目录下的其它模块common/common.js4. 相同目录下的其它模块my-index.js最终通过数据绑定把引用结果显示在页面上。二、创建不同目录下的模块common/common.js操作步骤1. 在小程序根目录下新建一个 common 文件夹。2. 在该文件夹下新建 common.js 文件。3. 在文件中创建一个模块变量 comMsg 和一个模块函数 comFunc。4. 用 module.exports 将变量和函数导出。common/common.js 示例代码要点- common 文件夹位于项目根目录与 pages 同级。- 通过 module.exports 导出的内容在其它文件中用 require 引入后即可访问。三、创建相同目录下的模块my-index.js操作步骤1. 在 pages/index 文件夹下新增模块文件 my-index.js。2. 在文件中定义模块变量 myIndexMsg 和模块函数 myIndexFunc。3. 用 module.exports 导出模块变量和模块函数。pages/index/my-index.js 示例代码要点- my-index.js 与 index.js 在同一个目录下。- 因为同目录引用时路径会比跨目录的 common.js 短很多。四、定义全局模块app.js操作步骤在小程序根目录的 app.js 文件的 App() 函数中定义一个全局变量 appMsg 和一个全局函数 appFunc。app.js 示例代码要点- App() 中定义的属性会成为小程序的全局实例属性。- 在任意页面中通过 getApp() 即可拿到这个实例访问 appMsg 和 appFunc。五、在 index.js 中引用四种来源操作步骤1. 在 index.js 中定义模块变量 indexMsg 和模块函数 indexFunc本模块。2. 通过调用 getApp()获取到小程序全局唯一的 App 实例。3. 利用 require() 函数引入模块返回模块通过 module.exports 或 exports 暴露的接口。4. 通过数据绑定引用各模块的变量和函数。要点- 全局模块const app getApp()然后 app.appMsg / app.appFunc()- 不同目录模块const comm require(../../common/common.js)- 相同目录模块const myIndex require(my-index.js)- 本模块直接使用 indexMsg 和 indexFunc()特别注意 require 的路径写法- 必须使用相对路径以 ./ 或 ../ 开头- 必须使用正斜杠 /- 不能使用盘符如 D:\或反斜杠 \否则会报 module is not defined 错误六、在 WXML 中通过数据绑定展示把 index.js 中拼装好的数据通过数据绑定渲染到页面上。要点- 使用 {{msg1}} 到 {{msg8}} 依次展示 8 条引用信息。- 每两条一组对应一种来源模块。七、页面样式说明- page 和 .scrollarea 的样式是创建项目时自动生成的。- view 的样式是新增的用于控制文字的行高、字号。- 为了区分不同来源模块可以为每组信息添加不同的背景色。!-- 第1组全局模块浅青色 --view classmsg msg-global{{msg1}}/viewview classmsg msg-global{{msg2}}/view!-- 第2组不同目录模块 common黄色 --view classmsg msg-common{{msg3}}/viewview classmsg msg-common{{msg4}}/view!-- 第3组相同目录不同模块 my-index粉紫色 --view classmsg msg-myindex{{msg5}}/viewview classmsg msg-myindex{{msg6}}/view!-- 第4组本模块浅蓝色 --view classmsg msg-self{{msg7}}/viewview classmsg msg-self{{msg8}}/view样式要点- page 让页面高度撑满屏幕使用 flex 纵向布局。- .scrollarea 占据剩余空间纵向滚动。- view 统一行高和字号。- 不同来源的 msg 分组使用不同背景色例如浅青色、黄色、粉紫色、浅蓝色。八、成果展示完成以上配置后页面会展示 8 条引用信息按来源分为 4 组每组用不同背景色区分- 浅青色背景index.js 引用来自全局模块app.js的变量和函数- 黄色背景index.js 引用来自不同目录下模块common/common.js的变量和函数- 粉紫色背景index.js 引用来自相同目录下不同模块my-index.js的变量和函数- 浅蓝色背景index.js 引用来自本模块index.js的变量和函数最终页面会把 msg1 到 msg8 共 8 条信息按来源分组显示每条前面都带有 index.js模块引用 前缀不同来源用不同底色区分一目了然。九、小结通过本案例可以掌握小程序模块化的核心方法- 全局模块通过 getApp() 获取实例访问 app.appMsg 和 app.appFunc()- 不同目录模块通过 require(../../common/common.js) 引入- 相同目录模块通过 require(my-index.js) 引入- 本模块直接使用当前文件中的变量和函数关键记住三点1. module.exports 负责导出require 负责引入。2. require 路径只支持相对路径用正斜杠 /不能带盘符和反斜杠。3. getApp() 是获取全局模块的唯一入口。掌握这四种引用方式就能在小程序开发中灵活组织代码让项目结构更清晰、更易维护。