一、实验目的理解微信小程序 JavaScript 模块化的原理掌握模块导入、导出以及全局数据调用的方法。学会将代码拆分到不同 JS 文件实现代码复用。在基础案例之上为不同模块输出的信息设置不同背景颜色直观区分不同来源的数据。二、实验环境微信开发者工具新建小程序项目不启用云服务不使用模板。三、实验知识点模块作用域每个 JS 文件都是独立模块文件内部定义的变量、函数默认只能在当前文件内访问外部文件无法直接读取。模块导出使用module.exports对外暴露变量与函数只有导出的内容外部文件 require 后才能访问。模块引入使用require(文件路径)加载外部 JS 模块路径需要区分同目录与跨目录跨目录使用../返回上一级目录。全局模块app.js 是小程序全局入口文件App 实例上挂载的变量与函数可在页面中通过getApp()获取全局实例来访问。数据渲染页面获取到不同模块的数据后存入 data在 wxml 中进行展示通过 class 绑定样式为不同模块信息设置不同背景色。四、项目目录结构项目根目录下新建 common 文件夹和 pages 文件夹同级内部存放 common.js作为跨目录外部模块。pages/index 文件夹存放页面相关文件同时新建 my-index.js 作为同目录下的外部模块。app.js 作为全局模块。五、实验实现过程编写全局模块 app.js定义全局变量和全局函数挂载在 App 实例上。在根目录 common 文件夹中创建 common.js定义变量与函数使用 module.exports 导出。在 pages/index 目录创建 my-index.js定义变量、函数并导出作为同目录模块。在页面 index.js 顶部使用 require 引入两个外部模块在页面 onLoad 生命周期函数中调用 getApp 拿到全局实例读取全局模块内容同时读取两个外部模块以及当前页面自身的变量和函数。将全部 8 条信息存入页面 data在 wxml 页面进行渲染给每一行信息绑定对应的样式类。在 wxss 中编写样式为全局模块、跨目录模块、同目录模块、当前页面模块设置四种不同的背景颜色实现区分效果。保存全部文件清理缓存编译运行小程序查看页面效果。六、运行效果页面标题为 “引用来自不同模块的变量和函数”。页面依次展示 8 行文本四组信息分别使用不同底色区分全局模块的变量与函数为浅红色背景不同目录模块的变量与函数为浅蓝色背景同目录模块变量与函数为浅绿色背景本页面模块变量与函数为浅黄色背景。七、遇到的问题与解决报错提示xxx is not a function问题原因模块导出的名称和页面调用的名称不一致或者全局函数书写格式错误。 解决统一导出名称和调用名称仔细核对函数名保证名字完全匹配。页面空白获取不到全局 app 数据 问题原因getApp()写在 Page 外部页面初始化阶段 App 实例还未加载完成。 解决把getApp()放到 onLoad 生命周期内部执行。找不到外部模块文件 问题原因require 的路径书写错误文件夹位置放置错误。 解决common 文件夹必须放在项目根目录与 pages 同级跨目录引入时使用../../回到根目录。八、实验总结模块化可以把项目代码拆分成多个独立 JS 文件每个模块拥有独立作用域避免变量命名冲突实现公共代码复用方便后期维护。 小程序中一共有四种数据来源app.js 全局模块、其他文件夹下的外部模块、同一页面文件夹下的外部模块、当前页面脚本自身。 外部模块依靠require()导入、module.exports导出全局数据依靠getApp()获取。通过 CSS 背景色区分不同模块输出内容可以直观看到模块化调用效果。