本文為菜鳥(niǎo)窩編輯吳佳林的連載。
在 微信小程序入門（三）中躺盛，我們主要學(xué)習(xí)了開(kāi)發(fā)者工具介紹以及項(xiàng)目的結(jié)構(gòu)吊趾，本篇文章就主要介紹微信小程序的模塊化以及page函數(shù)。
一. 模塊化
如果學(xué)過(guò)Android的穆碎，應(yīng)該對(duì)模塊不陌生牙勘，我們通常會(huì)把一些業(yè)務(wù)功能抽取成獨(dú)立的一個(gè)模塊，然后根據(jù)業(yè)務(wù)模塊進(jìn)行分組開(kāi)發(fā)所禀。微信小程序也有模塊化的概念方面，但是微信小程序的對(duì)模塊化定義有些不同，官方文檔對(duì)模塊的定義是：
"我們可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的 js 文件色徘，作為一個(gè)模塊恭金。"
也就是將公共代碼進(jìn)行封裝起來(lái)，避免重復(fù)代碼褂策，可以重復(fù)調(diào)用横腿。
微信小程序的模塊化機(jī)制跟JavaScript的模塊化機(jī)制非常相似，都是通過(guò)module.exports暴露對(duì)象斤寂，然后再通過(guò)通過(guò)require來(lái)獲取對(duì)象耿焊。下面來(lái)了解一下微信小程序的模塊化開(kāi)發(fā)。
1.定義一個(gè)在頁(yè)面定義個(gè)公共方法：比如在utils包創(chuàng)建一個(gè)common.js遍搞，然后在里面定義方法
function printHello(){
console.log("first printHello");
}
2.通過(guò) module.exports 暴露模塊接口
module.exports={
printHello:printHello
};
3.在其它模塊通過(guò) require(path) 進(jìn)行引用模塊罗侯，然后調(diào)用方法
//引入comm.js文件
var comm=require('../../utils/common.js')
//在onLoad方法進(jìn)行調(diào)用
onLoad: function () {
comm.printHello();
}
4.編譯后就可以在調(diào)試界面看到輸出的文字了。
好了溪猿，經(jīng)過(guò)上面幾步钩杰，我們的模塊化開(kāi)發(fā)就完成了。
二. page函數(shù)
在每個(gè)js文件里面诊县，都一個(gè)固定函數(shù) page() ,這個(gè)函數(shù)主要作用是用來(lái)注冊(cè)一個(gè)頁(yè)面榜苫，接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)翎冲、生命周期函數(shù)垂睬、事件處理函數(shù)等。示例如下：
Page({
data:{
},
onLoad:function(options){
// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
},
onReady:function(){
// 頁(yè)面渲染完成
},
onShow:function(){
// 頁(yè)面顯示
},
onHide:function(){
// 頁(yè)面隱藏
},
onUnload:function(){
// 頁(yè)面關(guān)閉
}
})
-
初始化數(shù)據(jù)：
data:初始化頁(yè)面數(shù)據(jù) -
生命周期函數(shù)
onLoad: 監(jiān)聽(tīng)頁(yè)面加載抗悍，一個(gè)頁(yè)面只會(huì)調(diào)用一次onReady: 監(jiān)聽(tīng)頁(yè)面初次渲染完成驹饺，一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)缴渊，可以和視圖層進(jìn)行交互onShow: 監(jiān)聽(tīng)頁(yè)面顯示赏壹，每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次onHide: 監(jiān)聽(tīng)頁(yè)面隱藏，頁(yè)面隱藏的時(shí)候調(diào)用onUnload: 監(jiān)聽(tīng)頁(yè)面卸載衔沼，頁(yè)面卸載的時(shí)候調(diào)用 -
事件處理
onPullDownRefresh: 監(jiān)聽(tīng)用戶下拉動(dòng)作蝌借，需要在config的window選項(xiàng)中開(kāi)啟enablePullDownRefreshonReachBottom: 頁(yè)面上拉觸底事件的處理函數(shù)昔瞧，需要在config的window選項(xiàng)中開(kāi)啟enablePullDownRefreshonShareAppMessage: 用戶點(diǎn)擊右上角分享 -
自定義
可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中，在頁(yè)面的函數(shù)中用 this 可以訪問(wèn)
關(guān)于data,這里要說(shuō)個(gè)兩個(gè)點(diǎn)
-
如何在wxml使用data里面初始化的值菩佑。
在js文件的data參數(shù)定義相關(guān) key-value 的值后自晰，在wxml文件加上
{{key}}就可以使用data里面的值了。示例代碼：
在js文件以及在wxml定義：
Page({
data: {
text: 'init data',
array: [{text: 'init data'}],
object: {
text: 'init data'
}
}......
<view>{{text}}</view>
<view>{{array[0].text}}</view>
<view>{{object.text}}</view>
```
2. 如何在其他函數(shù)修改初始化data里面的值
在函數(shù)里面使用setData() 稍坯，以 key酬荞，value 的形式表示將 this.data 中的 key 對(duì)應(yīng)的值改變成 value。
示例代碼：
Page({
data: {
text: 'init data',
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function() {
this.setData({
text: 'changed data'
})
}
###三.總結(jié)
看完這篇文章瞧哟，模塊化理解起來(lái)不是很難混巧，至于page函數(shù)，是微信小程序中一個(gè)很關(guān)鍵的點(diǎn)勤揩，因?yàn)槔锩嫔婕傲顺跏蓟瘮?shù)據(jù)咧党，生命周期等函數(shù)，特別是生命周期陨亡，我們?cè)谥蟮奈恼乱彩菚?huì)專門講生命周期這個(gè)點(diǎn)凿傅。
>更多內(nèi)容，請(qǐng)關(guān)注菜鳥(niǎo)窩（微信公眾號(hào)ID: cniao5）数苫，程序猿的在線學(xué)習(xí)平臺(tái)聪舒。 轉(zhuǎn)載請(qǐng)注明出處，本文出自菜鳥(niǎo)窩虐急，原文鏈接http://www.cniao5.com/forum/thread/3b9a922611e511e7b98900163e0230fa