微信小程序模块化开发学习笔记：3.8 模块化

一、学习目标通过本案例的学习掌握微信小程序中模块化的基本概念和实现方法理解如何在不同模块之间引用变量和函数。具体包括理解模块化的作用和意义。掌握module.exports导出模块变量和函数的方法。掌握require()引入模块的方法。掌握getApp()获取全局 App 实例的方法。能够引用来自全局模块、本模块、不同目录下其它模块、相同目录下其它模块中的变量和函数。二、案例描述设计一个小程序演示在index.js模块中引用来自全局模块、本模块、不同目录下其它模块、相同目录下其它模块中的变量和函数的方法。实现效果引用了来自全局模块、不同目录下的模块、相同目录下的模块、自身模块的变量和函数。三、实现步骤3.1 新建项目新建一个不使用云服务和模板的小应用项目。项目结构如下项目根目录 ├── app.js ├── app.json ├── app.wxss ├── common │ └── common.js ├── pages │ └── index │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss │ └── my-index.js3.2 创建 common.js 文件在小程序根目录下新建一个common文件夹在该文件夹下新建common.js文件。在文件中创建了一个模块变量comMsg和一个模块函数comFunc并用module.exports将变量和函数导出。// common/common.js // 模块变量 var comMsg 来自 common 模块的变量; // 模块函数 function comFunc() { console.log(来自 common 模块的函数); } // 导出模块变量和函数 module.exports { comMsg: comMsg, comFunc: comFunc };3.3 创建 my-index.js 文件在index文件夹下新增模块文件my-index.js。在文件中定义了一个模块变量myIndexMsg和一个模块函数myIndexFunc并用module.exports导出模块变量和模块函数。// pages/index/my-index.js // 模块变量 var myIndexMsg 来自 my-index 模块的变量; // 模块函数 function myIndexFunc() { console.log(来自 my-index 模块的函数); } // 导出模块变量和函数 module.exports { myIndexMsg: myIndexMsg, myIndexFunc: myIndexFunc };3.4 修改 app.js 文件在文件的App()函数中定义一个全局变量appMsg和一个全局函数appFunc。// app.js App({ // 全局变量 appMsg: 来自全局 App 的变量, // 全局函数 appFunc: function () { console.log(来自全局 App 的函数); }, onLaunch: function () { // 小程序启动时执行 } });3.5 修改 index.js 文件在index.js中定义了模块变量indexMsg和模块函数indexFunc。通过调用getApp()获取到小程序全局唯一的App实例利用require()函数引入模块返回模块通过module.exports或exports暴露的接口。// pages/index/index.js // 引入相同目录下的模块 var myIndex require(./my-index.js); // 引入不同目录下的模块 var common require(../../common/common.js); // 本模块变量 var indexMsg 来自 index 模块的变量; // 本模块函数 function indexFunc() { console.log(来自 index 模块的函数); } Page({ data: { // 本模块变量 indexMsg: indexMsg, // 相同目录下模块的变量 myIndexMsg: myIndex.myIndexMsg, // 不同目录下模块的变量 comMsg: common.comMsg, // 全局模块变量 appMsg: }, onLoad: function () { // 获取全局 App 实例 var app getApp(); this.setData({ appMsg: app.appMsg }); // 调用本模块函数 indexFunc(); // 调用相同目录下模块的函数 myIndex.myIndexFunc(); // 调用不同目录下模块的函数 common.comFunc(); // 调用全局函数 app.appFunc(); } });3.6 修改 index.wxml 文件通过数据绑定引用模块的变量和函数。view classcontainer view classscrollarea view classitem text本模块变量{{indexMsg}}/text /view view classitem text相同目录模块变量{{myIndexMsg}}/text /view view classitem text不同目录模块变量{{comMsg}}/text /view view classitem text全局模块变量{{appMsg}}/text /view /view /view3.7 修改 index.wxss 文件其中page和.scrollarea的样式是创建项目的时候自动生成的view的样式是新增的。/* pages/index/index.wxss */ .page { height: 100vh; } .scrollarea { height: 100%; padding: 20rpx; box-sizing: border-box; } .item { padding: 20rpx; margin-bottom: 20rpx; background-color: #f5f5f5; border-radius: 10rpx; font-size: 28rpx; }3.8 修改 app.wxss 文件/* app.wxss */ page { background-color: #ffffff; }四、核心知识点总结知识点说明module.exports用于导出模块中的变量和函数供其他模块通过require()引入使用。require()用于引入其他模块返回该模块通过module.exports或exports暴露的接口。getApp()用于获取小程序全局唯一的App实例从而访问全局变量和函数。相对路径引用相同目录下使用./不同目录下使用../../等相对路径进行引用。五、作业完成《案例3.8 模块化》。在《案例3.8 模块化》的基础上将来自不同模块的变量和函数输出信息加上不同的背景颜色。例如本模块变量浅蓝色背景。相同目录模块变量浅绿色背景。不同目录模块变量浅黄色背景。全局模块变量浅紫色背景。六、参考资料模块化除了看教材以外还可以参考微信官方文档微信小程序 require 官方文档