引言本文是微信小程序课程作业的个人学习实践总结记录如何通过模块化编程将公共代码抽离为独立模块并在页面中通过不同背景色直观区分各模块的引用来源。文章涵盖实验目的、原理、完整源码、运行效果与踩坑记录希望能为同样在学习小程序模块化的同学提供参考。一、实验目的掌握微信小程序模块化编程学会全局App实例、跨目录模块、同目录模块、当前页面模块这4种代码的引用方式在页面展示时为不同模块输出的信息设置不同背景颜色直观区分代码来源最后打包项目提交作业。作业要求回顾完成案例3.8模块化基础代码不同模块输出信息添加不同背景颜色小程序打包上传编写技术博客提交博客链接到Word文档二、原理简介小程序模块化可以把公共代码抽离为独立.js模块模块必须使用module.exports向外暴露变量/函数页面中使用require()导入模块。getApp()获取小程序全局唯一App实例读取app.js里定义的全局数据require(路径)引入外部js模块拿到模块导出的变量与方法本案例一共4类模块来源全局模块 app.js不同目录公共模块 common/common.js同页面目录模块 my-index.js当前页面自身模块 index.js三、项目目录结构模块化 ├─common │ └─common.js ├─pages │ └─index │ ├─index.js │ ├─index.json │ ├─index.wxml │ ├─index.wxss │ └─my-index.js ├─app.js ├─app.json └─app.wxss四、完整源码1. app.js// app.jsApp({appMsg:来自全局模块的变量,appFunc(){return来自全局模块的函数}})2. app.wxss/**app.wxss**/.box{margin:20rpx;padding:20rpx;border:2rpx solid silver;}.title{font-size:40rpx;font-weight:bolder;text-align:center;margin-bottom:30rpx;color:red;}3. common/common.js// common.jsconstcomMsg来自不同目录下模块的变量functioncomFunc(){return来自不同目录下模块的函数}module.exports{comMsg,comFunc}4. pages/index/my-index.js// my-index.jsconstmyIndexMsg来自相同目录下不同模块的变量functionmyIndexFunc(){return来自相同目录下不同模块的函数}module.exports{myIndexMsg,myIndexFunc}5. pages/index/index.js// index.js const indexMsg 来自本模块的变量 function indexFunc() { return 来自本模块的函数 } const app getApp() const comm require(../../common/common.js) const myIndex require(my-index.js) Page({ data: { msg1: index.js模块引用 app.appMsg, msg2: index.js模块引用 app.appFunc(), msg3: index.js模块引用 comm.comMsg, msg4: index.js模块引用 comm.comFunc(), msg5: index.js模块引用 myIndex.myIndexMsg, msg6: index.js模块引用 myIndex.myIndexFunc(), msg7: index.js模块引用 indexMsg, msg8: index.js模块引用 indexFunc() } })6. pages/index/index.wxml作业版带背景色!--index.wxml-- navigation-bar title模块化 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle引用来自不同模块的变量和函数/view !--全局模块 青色背景-- view stylebackground-color:cyan;{{msg1}}/view view stylebackground-color:cyan;{{msg2}}/view !--不同目录模块 黄色背景-- view stylebackground-color:yellow;{{msg3}}/view view stylebackground-color:yellow;{{msg4}}/view !--相同目录模块 紫色背景-- view stylebackground-color:#dda0dd;{{msg5}}/view view stylebackground-color:#dda0dd;{{msg6}}/view !--本模块 浅蓝色背景-- view stylebackground-color:#add8e6;{{msg7}}/view view stylebackground-color:#add8e6;{{msg8}}/view /view /scroll-view7. pages/index/index.wxss/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } view { line-height: 2em; font-size: 40rpx; }8. pages/index/index.json{ usingComponents: {} }9. app.json{ pages: [ pages/index/index ], window: { backgroundTextStyle: light, navigationBarBackgroundColor: #fff, navigationBarTitleText: 模块化案例, navigationBarTextStyle: black }, style: v2, sitemapLocation: sitemap.json }五、运行效果页面会展示8行文本4组信息每组背景色不同青色读取全局app.js的变量与函数黄色读取common文件夹跨目录模块淡紫色读取同目录my-index.js模块浅蓝读取当前index.js内部定义变量函数通过不同色块一眼区分代码来源满足作业加分要求。截图六、打包与作业提交说明微信开发者工具打开项目点击【工具】→【压缩代码】得到代码压缩包新建Word文档里面写上博客名称、CSDN博客访问链接上传小程序zip压缩包 Word文档完成作业提交。七、知识点总结module.exports模块导出接口只有导出后外部require才能访问require(文件路径)引入外部js模块路径要写对相对路径很容易出错getApp()获取全局App实例读取app.js全局数据模块化优势代码拆分、复用方便后期维护大型小程序项目必备。八、遇到的坑require路径写错提示找不到模块忘记module.exports导出变量页面拿到undefined颜色样式写错背景色不生效注意wxml行内style写法。