本文為菜鳥窩編輯吳佳林的連載。
在 微信小程序入門（三）中，我們主要學(xué)習(xí)了開發(fā)者工具介紹以及項(xiàng)目的結(jié)構(gòu)，本篇文章就主要介紹微信小程序的模塊化以及page函數(shù)。
一. 模塊化
如果學(xué)過Android的，應(yīng)該對(duì)模塊不陌生，我們通常會(huì)把一些業(yè)務(wù)功能抽取成獨(dú)立的一個(gè)模塊，然后根據(jù)業(yè)務(wù)模塊進(jìn)行分組開發(fā)。微信小程序也有模塊化的概念，但是微信小程序的對(duì)模塊化定義有些不同，官方文檔對(duì)模塊的定義是：
"我們可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的 js 文件，作為一個(gè)模塊。"
也就是將公共代碼進(jìn)行封裝起來，避免重復(fù)代碼，可以重復(fù)調(diào)用。
微信小程序的模塊化機(jī)制跟JavaScript的模塊化機(jī)制非常相似，都是通過module.exports暴露對(duì)象，然后再通過通過require來獲取對(duì)象。下面來了解一下微信小程序的模塊化開發(fā)。
1.定義一個(gè)在頁面定義個(gè)公共方法：比如在utils包創(chuàng)建一個(gè)common.js，然后在里面定義方法
function printHello(){
console.log("first printHello");
}
2.通過 module.exports 暴露模塊接口
module.exports={
printHello:printHello
};
3.在其它模塊通過 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)過上面幾步，我們的模塊化開發(fā)就完成了。
二. page函數(shù)
在每個(gè)js文件里面，都一個(gè)固定函數(shù) page() ,這個(gè)函數(shù)主要作用是用來注冊(cè)一個(gè)頁面，接受一個(gè) object 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。示例如下：
Page({
data:{
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
}
})
-
初始化數(shù)據(jù)：
data:初始化頁面數(shù)據(jù) -
生命周期函數(shù)
onLoad: 監(jiān)聽頁面加載，一個(gè)頁面只會(huì)調(diào)用一次onReady: 監(jiān)聽頁面初次渲染完成，一個(gè)頁面只會(huì)調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互onShow: 監(jiān)聽頁面顯示，每次打開頁面都會(huì)調(diào)用一次onHide: 監(jiān)聽頁面隱藏，頁面隱藏的時(shí)候調(diào)用onUnload: 監(jiān)聽頁面卸載，頁面卸載的時(shí)候調(diào)用 -
事件處理
onPullDownRefresh: 監(jiān)聽用戶下拉動(dòng)作，需要在config的window選項(xiàng)中開啟enablePullDownRefreshonReachBottom: 頁面上拉觸底事件的處理函數(shù)，需要在config的window選項(xiàng)中開啟enablePullDownRefreshonShareAppMessage: 用戶點(diǎn)擊右上角分享 -
自定義
可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中，在頁面的函數(shù)中用 this 可以訪問
關(guān)于data,這里要說個(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é)
看完這篇文章，模塊化理解起來不是很難，至于page函數(shù)，是微信小程序中一個(gè)很關(guān)鍵的點(diǎn)，因?yàn)槔锩嫔婕傲顺跏蓟瘮?shù)據(jù)，生命周期等函數(shù)，特別是生命周期，我們?cè)谥蟮奈恼乱彩菚?huì)專門講生命周期這個(gè)點(diǎn)。
>更多內(nèi)容，請(qǐng)關(guān)注菜鳥窩（微信公眾號(hào)ID: cniao5），程序猿的在線學(xué)習(xí)平臺(tái)。 轉(zhuǎn)載請(qǐng)注明出處，本文出自菜鳥窩，原文鏈接http://www.cniao5.com/forum/thread/3b9a922611e511e7b98900163e0230fa