1：頁面的生命周期

在初始頁面：index.js中增加如圖1所示代碼

圖1

點擊“編譯”后，運行這個小程序：日志如圖2所示：初始頁面index.js啟動會從app,js中的生命周期方法調(diào)用開始：onLaunch---onShow，然后開始調(diào)用index.js頁面中的生命周期方法：onLoad---onShow---onReady，當點擊“后臺”時，頁面index.js進入后臺，這時回調(diào)生命周期方法onHide，如圖3所示，如果再點擊“前臺”，使頁面回到前臺，這時回調(diào)頁面生命周期方法：onShow（注意，這時不再回調(diào)onLoad） 如圖4所示

圖2

圖3

圖4

2：頁面的跳轉(zhuǎn)

編寫index.wxml代碼如圖5所示，可以看出text組件綁定了一個事件：itemClick，itemClick方法實現(xiàn)詳見圖1：

itemClick: function (){
     console.log("---index page itemClick---");
    wx.navigateTo({
      url: '../logs/logs'
    })

其中：wx.navigateTo代表從index.js這一頁面跳轉(zhuǎn)到pages/logs/logs頁面，注意：navigateTo代表跳轉(zhuǎn)到logs頁面后，index頁面并不銷毀，在logs頁面下面，通過logs頁面左上角的返回按鈕可以返回到index頁面，而如果是wx.redirectTo，則index頁面銷毀，無法從logs頁面返回到index頁面，這里就僅以wx.navigateTo為例

圖5

在模擬器中如果點擊文章2的text組件后，跳轉(zhuǎn)到對應(yīng)logs界面日志如圖6所示，logs頁面對應(yīng)js代碼如圖7所示，通過對比圖6，圖7可以看出，當從index頁面跳轉(zhuǎn)到logs頁面這個過程中，要先調(diào)用index生命周期方法onHide(如果是wx.redirectTo方式跳轉(zhuǎn)還要調(diào)用index生命周期方法onUnload)，然后依次調(diào)用logs頁面的生命周期方法：onLoad---onShow---onReady

圖6

圖7

3：頁面間參數(shù)傳遞

將圖1，index.js代碼修改為：

wx.navigateTo({
url: "../logs/logs?id=1&title=標題abc"
})

即：從index頁面跳轉(zhuǎn)到logs頁面過程中，傳遞兩個參數(shù)：id=1和title=標題abc

我們再看logs頁面代碼如圖7所示，在onLoad中通過傳入?yún)��?shù)：options獲取到了傳遞的參數(shù)：id和title，代碼中又將這兩個參數(shù)設(shè)置到logs.wxml綁定的兩個變量中：articleId，pageTitle，顯示結(jié)果和logs.wxml代碼如圖8所示：

圖8

圖8中模擬器的結(jié)果可以看到，logs頁面顯示出來從index頁面?zhèn)鬟f過來的兩個參數(shù)：id=1和title=標題abc

注：頁面跳轉(zhuǎn)也可以在.wxml中配置，如圖5中所示代碼，文章1對應(yīng)的text組件可以通過如下代碼配置跳轉(zhuǎn)：

<navigator url="../logs/logs?id=100&title=標題" >

更多微信小程序開發(fā)的詳細解釋相關(guān)文章請關(guān)注PHP中文網(wǎng)！