一、什么是模塊化微信小程序中的模塊化是指將代碼拆分成多個獨立的.js文件每個文件就是一個模塊。模塊可以定義自己的變量和函數(shù)并通過module.exports對外暴露接口其他模塊通過require()引入后即可使用。模塊化的好處代碼復用同一個模塊可以被多個頁面引用職責分離不同功能放在不同文件便于維護避免全局污染模塊內(nèi)的變量默認是私有的二、案例描述設計一個小程序演示在index.js模塊中引用來自全局模塊、本模塊、不同目錄下其它模塊、相同目錄下其它模塊中的變量和函數(shù)的方法。三、實現(xiàn)步驟1、創(chuàng)建不同目錄下的模塊// common/common.js var comMsg 來自不同目錄下模塊的變量 function comFunc() { return 來自不同目錄下模塊的函數(shù) } module.exports { comMsg: comMsg, comFunc: comFunc }2、創(chuàng)建相同目錄下的模塊my-index.js在pages/index/目錄下新建my-index.js// pages/index/my-index.js var myIndexMsg 來自相同目錄下不同模塊的變量 function myIndexFunc() { return 來自相同目錄下不同模塊的函數(shù) } module.exports { myIndexMsg: myIndexMsg, myIndexFunc: myIndexFunc }3、修改app.js全局模塊在App()函數(shù)中定義全局變量appMsg和全局函數(shù)appFunc// app.js App({ appMsg: 來自全局模塊的變量, appFunc: function () { return 來自全局模塊的函數(shù) } })4、修改index.js核心這是案例的核心——在一個頁面中引用四個不同來源的模塊// pages/index/index.js // 1. 獲取全局唯一的 App 實例引用全局模塊 var app getApp() // 2. 引用不同目錄下模塊 common.js var common require(../../common/common.js) // 3. 引用相同目錄下模塊 my-index.js var myIndex require(./my-index.js) // 4. 本模塊(index.js)的變量和函數(shù) var indexMsg 來自本模塊的變量 function indexFunc() { return 來自本模塊的函數(shù) } Page({ data: { appMsg: app.appMsg, appFuncResult: app.appFunc(), comMsg: common.comMsg, comFuncResult: common.comFunc(), myIndexMsg: myIndex.myIndexMsg, myIndexFuncResult: myIndex.myIndexFunc(), indexMsg: indexMsg, indexFuncResult: indexFunc() } })5、修改index.wxml通過 Mustache 語法{{}}進行數(shù)據(jù)綁定view classtitle引用來自不同模塊的變量和函數(shù)/view view classappindex.js模塊引用來自全局模塊的變量{{appMsg}}/view view classappindex.js模塊引用來自全局模塊的函數(shù){{appFuncResult}}/view view classcommonindex.js模塊引用來自不同目錄下模塊的變量{{comMsg}}/view view classcommonindex.js模塊引用來自不同目錄下模塊的函數(shù){{comFuncResult}}/view view classmyindexindex.js模塊引用來自相同目錄下不同模塊的變量{{myIndexMsg}}/view view classmyindexindex.js模塊引用來自相同目錄下不同模塊的函數(shù){{myIndexFuncResult}}/view view classselfindex.js模塊引用來自本模塊的變量{{indexMsg}}/view view classselfindex.js模塊引用來自本模塊的函數(shù){{indexFuncResult}}/view6、修改index.wxss作業(yè)加分項不同背景色作業(yè)要求將來自不同模塊的變量和函數(shù)輸出信息加上不同的背景顏色。page { height: 100vh; } .title { font-size: 40rpx; font-weight: bolder; color: #0000ff; margin: 30rpx 20rpx 20rpx; } view { font-size: 32rpx; line-height: 2em; padding: 0 20rpx; } /* 全局模塊 - 青色 */ .app { background-color: #b2ebf2; } /* 不同目錄模塊 - 黃色 */ .common { background-color: #fff9c4; } /* 相同目錄模塊 - 紅色 */ .myindex { background-color: #ffcdd2; } /* 本模塊 - 綠色 */ .self { background-color: #c8e6c9; }四、預覽展示