一、实验简介本次实验完成小程序模块化案例主要练习小程序中require()模块引入与module.exports模块导出语法。小程序中每一个 js 文件都是独立模块内部变量函数默认私有只有经过导出其他文件才可以访问。实验需要分别访问四类来源的数据app.js 全局模块、其他文件夹下外部模块、当前页面同目录模块、当前 js 自身模块的变量与函数。拓展任务要求为不同来源输出内容设置不同背景颜色用来区分数据来源。官方参考文档https://developers.weixin.qq.com/miniprogram/dev/reference/api/require.html二、项目文件结构做完实验之后的完整项目结构模块化 ├─ common │ └─ common.js // 不同目录的外部模块 ├─ pages │ └─ index │ ├─ index.js │ ├─ index.wxml │ ├─ index.wxss │ └─ my‑index.js // 和index同目录的模块 ├─ app.js ├─ app.json └─ app.wxss三、代码实现过程1. 编写跨目录模块 common/common.js该文件放在根目录 common 文件夹作为外部模块定义变量和函数使用module.exports向外暴露接口。// common/common.js const comMsg 来自不同目录下模块的变量 function comFunc() { return 来自不同目录下模块的函数 } module.exports { comMsg, comFunc }2. 同目录模块 pages/index/my‑index.js和 index.js 放在同一个 pages/index 文件夹作为同目录下其他模块。// pages/index/my-index.js const myIndexMsg 来自相同目录下不同模块的变量 function myIndexFunc() { return 来自相同目录下不同模块的函数 } module.exports { myIndexMsg, myIndexFunc }3. 全局文件 app.js在 App 实例挂载全局变量与函数页面中通过getApp()获取全局实例不需要 require 导入。// app.js App({ appMsg: 来自全局模块的变量, appFunc() { return 来自全局模块的函数 } })4. 页面逻辑 pages/index/index.js在 index.js 中定义自身模块数据调用getApp()拿到全局对象使用require()分别引入两个外部模块把所有数据处理后存入 Page 的data供页面渲染使用。// pages/index/index.js // 本模块自己定义变量和函数 const indexMsg 来自本模块的变量 function indexFunc() { return 来自本模块的函数 } // 获取全局app实例 const app getApp() // 引入根目录common下模块使用相对路径 const comm require(../../common/common.js) // 引入同目录my-index模块 const myIndex require(my-index.js) Page({ data: { // 全局模块数据 msg1: index.js模块引用 app.appMsg, msg2: index.js模块引用 app.appFunc(), // 不同目录 common模块数据 msg3: index.js模块引用 comm.comMsg, msg4: index.js模块引用 comm.comFunc(), // 同目录 my‑index模块数据 msg5: index.js模块引用 myIndex.myIndexMsg, msg6: index.js模块引用 myIndex.myIndexFunc(), // 当前index自身模块数据 msg7: index.js模块引用 indexMsg, msg8: index.js模块引用 indexFunc() } })5. 页面结构 pages/index/index.wxml为完成拓展作业将同一来源的两条数据放在同一个view标签添加自定义 class用于设置不同背景色。通过插值语法{{ }}绑定 data 中的数据。!--index.wxml-- navigation-bar title模块化 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle引用来自不同模块的变量和函数/view !-- 全局模块 青色背景 -- view classglobal-item view{{msg1}}/view view{{msg2}}/view /view !-- 跨目录common模块 黄色背景 -- view classdiff-dir-item view{{msg3}}/view view{{msg4}}/view /view !-- 同目录模块 紫色背景 -- view classsame-dir-item view{{msg5}}/view view{{msg6}}/view /view !-- 本模块 浅蓝背景 -- view classself-item view{{msg7}}/view view{{msg8}}/view /view /view /scroll-view6. 样式代码pages/index/index.wxss/**index.wxss**/ page { height: 100vh;微信小程序模块化学习笔记个人博客小程序开发课后练习最近做完小程序模块化的课后作业对小程序 JS 的模块机制有了比较直观的理解在这里记录一下学习过程与代码实现。在微信小程序里每一个 js 文件都属于独立模块。模块内部定义的变量和函数默认是私有外部无法直接访问。想要对外暴露内容就要用module.exports导出其他文件通过require()完成导入。另外小程序的全局数据存放在app.js页面通过getApp()获取全局实例不需要 require 引入。本次练习一共处理四种数据来源全局模块、不同目录外部模块、同目录其他模块、当前文件自身模块。拓展需求是给不同来源的内容设置不一样的背景颜色用来做视觉区分。项目目录结构模块化 ├─ common │ └─ common.js ├─ pages │ └─ index │ ├─ index.js │ ├─ index.wxml │ ├─ index.wxss │ └─ my‑index.js ├─ app.js ├─ app.json └─ app.wxss代码实现common/common.js跨目录模块const comMsg 来自不同目录下模块的变量 function comFunc() { return 来自不同目录下模块的函数 } module.exports { comMsg, comFunc }pages/index/my‑index.js同目录模块const myIndexMsg 来自相同目录下不同模块的变量 function myIndexFunc() { return 来自相同目录下不同模块的函数 } module.exports { myIndexMsg, myIndexFunc }app.js全局App({ appMsg: 来自全局模块的变量, appFunc() { return 来自全局模块的函数 } })pages/index/index.jsconst 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() } })pages/index/index.wxmlnavigation-bar title模块化 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle引用来自不同模块的变量和函数/view view classglobal-item view{{msg1}}/view view{{msg2}}/view /view view classdiff-dir-item view{{msg3}}/view view{{msg4}}/view /view view classsame-dir-item view{{msg5}}/view view{{msg6}}/view /view view classself-item view{{msg7}}/view view{{msg8}}/view /view /view /scroll-viewpages/index/index.wxsspage { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } view { line-height: 2em; font-size: 40rpx; } .global-item { background-color: cyan; } .diff-dir-item { background-color: yellow; } .same-dir-item { background-color: plum; } .self-item { background-color: lightblue; }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; }运行效果页面顶部红色标题下面分四块不同底色区域青色区域输出全局模块的变量和函数黄色区域输出不同目录模块的变量和函数紫色区域输出同目录模块的变量和函数浅蓝色区域输出当前自身模块的变量和函数学习小结module.exports负责向外暴露变量与函数不导出的内容外部无法访问。require()引入外部模块路径要写对跨目录要正确书写../相对路径。同目录可以直接写文件名。getApp()获取小程序全局实例读取 app.js 挂载的数据不需要 require。wxml 中不能直接调用 js 函数需要提前把计算结果放到data再做数据绑定渲染。拓展颜色效果的实现思路把同一组内容包裹在同一个 view设置 class通过 css 设置背景色就可以实现分组上色。遇到的小问题写代码的时候踩过路径的坑如果 require 的相对路径写错就会报找不到模块。还有忘记写module.exports导入拿到的就是空对象。写的时候一定要留意模块导出这一步。