一、什么是模塊化微信小程序中的模塊化是指將代碼拆分成多個獨立的.js文件每個文件就是一個模塊。模塊可以定義自己的變量和函數(shù)并通過module.exports對外暴露接口其他模塊通過require()引入后即可使用。模塊化的好處代碼復(fù)用同一個模塊可以被多個頁面引用職責(zé)分離不同功能放在不同文件便于維護(hù)避免全局污染模塊內(nèi)的變量默認(rèn)是私有的二、案例描述設(shè)計一個小程序演示在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 語法{{}}進(jìn)行數(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; }四、預(yù)覽展示