一、案例简介本案例学习微信小程序 JS 模块化开发。小程序支持将变量、函数封装到独立 js 模块文件中通过module.exports导出再使用require()引入实现代码拆分复用。 作业扩展要求来自不同模块的变量、函数输出信息设置不同背景颜色直观区分不同模块的内容。二、核心知识点模块导出module.exports在独立 js 文件中导出变量、方法供其他页面引入。模块引入require(路径)页面 js 中导入外部模块拿到导出的变量与函数。模块化好处代码解耦、复用方便维护避免页面 js 文件过于臃肿。作业扩充wxml 渲染模块输出内容使用 class 绑定不同背景色区分不同模块信息。三、完整代码实现1. 新建模块文件 moduleA.js第一个模块// module/moduleA.js const name 模块A的变量; function sayHello() { return 模块A函数输出Hello 来自模块A; } // 导出 module.exports { name, sayHello }2. 新建模块文件 moduleB.js第二个模块// module/moduleB.js const msg 模块B的变量; function calcNum() { return 模块B函数输出计算结果 102030; } // 导出 module.exports { msg, calcNum }3. 页面 wxml modular.wxml!--pages/modular/modular.wxml-- view classcontainer view classtitle小程序模块化演示/view !--模块A蓝色背景-- view classbox box-a text模块A变量{{dataA.name}}/text text模块A函数返回{{dataA.helloInfo}}/text /view !--模块B绿色背景-- view classbox box-b text模块B变量{{dataB.msg}}/text text模块B函数返回{{dataB.calcInfo}}/text /view /view4. 页面 wxss modular.wxss/*pages/modular/modular.wxss*/ .container{ padding:30rpx; } .title{ text-align:center; font-size:32rpx; font-weight:bold; margin-bottom:40rpx; } .box{ padding:30rpx; border-radius:12rpx; margin-bottom:20rpx; } .box-a{ background-color:#cce5ff; } .box-b{ background-color:#d4edda; } text{ display:block; margin:10rpx 0; }5. 页面 js modular.js// pages/modular/modular.js // 引入两个外部模块 const moduleA require(../../module/moduleA.js) const moduleB require(../../module/moduleB.js) Page({ data:{ dataA:{ name:, helloInfo: }, dataB:{ msg:, calcInfo: } }, onLoad(){ // 获取模块A数据 this.setData({ dataA:{ name:moduleA.name, helloInfo:moduleA.sayHello() }, // 获取模块B数据 dataB:{ msg:moduleB.msg, calcInfo:moduleB.calcNum() } }) } })6. 页面 json modular.json{ usingComponents: {} }目录结构说明pages/modular 放页面 4 个文件module 文件夹放在项目根目录存放 moduleA.js、moduleB.js四、代码说明把代码拆分成两个独立 js 模块各自定义变量和函数使用module.exports对外暴露。页面 js 通过require引入模块在 onLoad 生命周期读取模块数据并 setData 渲染到页面。作业扩展功能模块 A 信息使用浅蓝色背景模块 B 使用浅绿色背景不同模块输出信息区分不同背景颜色满足作业要求。五、运行效果页面加载自动引入两个 js 模块。上方区域浅蓝色背景展示模块 A 的变量与函数返回信息。下方区域浅绿色背景展示模块 B 的变量与函数返回信息。两个模块内容使用不同背景色清晰区分来源。六、踩坑总结require 路径写错是高频错误相对路径../../要注意层级。module.exports导出语法不能写错不能写成export小程序是 CommonJS不是 ES6 模块。模块文件不要放在 pages 页面文件夹内建议单独新建 module 目录管理。背景色依靠 class 区分给不同模块对应的外层 view 设置不同 class实现不同背景。七、小结模块化是小程序工程化基础将可复用逻辑抽离为独立 JS 文件实现代码复用与解耦。本次案例完成基础模块导入导出并按作业要求给不同模块输出信息设置不同背景颜色直观区分模块来源掌握小程序 CommonJS 模块化的基础使用方式。