小程序學習日記（9）——Page

Page(Object object)

註冊小程序中的一個頁面。接受一個 Object 類型參數，其指定頁面的初始數據、生命週期回調、事件處理函數等

屬性 類型 說明
1、data object 頁面的初始數據
2、onLoad function 生命週期回調—監聽頁面加載
3、onShow function 生命週期回調—監聽頁面顯示
4、onReady function 生命週期回調—監聽頁面初次渲染完成
5、onHide function 生命週期回調—監聽頁面隱藏
6、onUnload function 生命週期回調—監聽頁面卸載
7、onPullDownRefresh function 監聽用戶下拉動作
8、onReachBottom function 頁面上拉觸底事件的處理函數
9、onShareAppMessage function 用戶點擊右上角轉發
10、onPageScroll function 頁面滾動觸發事件的處理函數
11、onResize function 頁面尺寸改變時觸發，詳見 響應顯示區域變化
12、onTabItemTap function 當前是 tab 頁時，點擊 tab 時觸發
13、其它 any 開發者可以添加任意的函數或數據到 Object 參數中，在頁面的函數中用 this 可以訪問

<code> 
Page({
  
data
: {        
    
text
: 
"This is page data."
  },
  
onLoad
: 
function
(
options
) {        
     
  },
  
onReady 
: 
function
(
) {          
     
  },
  
onShow
: 
function
(
) {          
     
  },
  
onHide
: 
function
(
) {           
     
  },
  
onUnload
: 
function
(
) {           
     
  },
  
onPullDownRefresh
: 
function
(
) {          
     
  },
  
onReachBottom
: 
function
(
) {          
     
  },
  
onShareAppMessage
: 
function
 (
) {          
     
  },
  
onPageScroll
: 
function
(
) {          
     
  },
  
onResize
: 
 
function
(
) {          
     
  },
  onTabItemTap(item) {          
    
console
.log(item.index)
    
console
.log(item.pagePath)
    
console
.log(item.text)
  },
   
  
viewTap
: 
function
(
) {   
    
this
.setData({
      
text
: 
'Set some data for updating view.'
    }, 
function
(
) {
       
    })
  },
  
customData
: {
    
hi
: 
'MINA'
  }
})/<code>

data 是頁面第一次渲染使用的初始數據。

頁面加載時，data 將會以JSON字符串的形式由邏輯層傳至渲染層，因此data中的數據必須是可以轉成JSON的類型：字符串，數字，布爾值，對象，數組。

渲染層可以通過 WXML 對數據進行綁定。

<code>//index.wxml
 
<
view
>{{text}}
view
>
<
view
>{{array[0].msg}}
view
>/<code>

<code> 
Page
({
  
data
: {
    
text
: 
'init data'
,
    
array
: [{
msg
: 
'1'
}, {
msg
: 
'2'
}]
  }
})/<code>

onLoad(Object query)
頁面加載時觸發。一個頁面只會調用一次，可以在 onLoad 的參數中獲取打開當前頁面路徑中的參數。

onShow()
頁面顯示/切入前臺時觸發。

onReady()
頁面初次渲染完成時觸發。一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。注意：對界面內容進行設置的 API 如wx.setNavigationBarTitle

onHide()
頁面隱藏/切入後臺時觸發。 如 wx.navigateTo 或底部 tab 切換到其他頁面，小程序切入後臺等。

onUnload()
頁面卸載時觸發。如wx.redirectTo或wx.navigateBack到其他頁面時。

頁面事件處理函數

onPullDownRefresh() 監聽用戶下拉刷新事件。

• 需要在app.json的window選項中或頁面配置中開啟
  enablePullDownRefresh。
• 可以通過wx.startPullDownRefresh觸發下拉刷新，調用後觸發下拉刷新動畫，效果與用戶手動下拉刷新一致。
• 當處理完數據刷新後，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。

onReachBottom() 監聽用戶上拉觸底事件。

• 可以在app.json的window選項中或頁面配置中設置觸發距離onReachBottomDistance。
• 在觸發距離內滑動期間，本事件只會被觸發一次。

onPageScroll(Object object) 監聽用戶滑動頁面事件。

屬性 類型 說明
scrollTop Number 頁面在垂直方向已滾動的距離（單位px）

注意：請只在需要的時候才在 page 中定義此方法，不要定義空方法。以減少不必要的事件派發對渲染層-邏輯層通信的影響。

onShareAppMessage(Object object)
監聽用戶點擊頁面內轉發按鈕（button 組件 open-type="share"）或右上角菜單“轉發”按鈕的行為，並自定義轉發內容。注意：只有定義了此事件處理函數，右上角菜單才會顯示“轉發”按鈕

參數 類型 說明
from String 轉發事件來源。button：頁面內轉發按鈕；menu：右上角轉發菜單
target Object 如果 from 值是 button，則 target 是觸發這次轉發事件的 button，否則為 undefined
webViewUrl String 頁面中包含web-view組件時，返回當前web-view的url此事件處理函數需要 return 一個 Object，用於自定義轉發內容，返回內容如下：

字段 說明 默認值
title 轉發標題 當前小程序名稱
path 轉發路徑 當前頁面 path ，必須是以 / 開頭的完整路徑

<code>
Page
({
  
onShareAppMessage
: function (res) {
    if (res.from === 
'button'
) {
      // 來自頁面內轉發按鈕
      console.
log
(res.target)
    }
    
return
 {
      
title
: 
'自定義轉發標題'
,
      path: 
'/page/user?id=123'
,
      imageUrl : 
'/image/image1.png'
    }
  }
})/<code>

onTabItemTap(Object object) 點擊 tab 時觸發

Object 參數說明
參數 類型 說明
index String 被點擊tabItem的序號，從0開始
pagePath String 被點擊tabItem的頁面路徑
text String 被點擊tabItem的按鈕文字

<code>
Page
({
  
onTabItemTap
(item) {
    
console
 
.log
(item.index)
    
console
.log
(item.pagePath)
    
console
.log
(item.text)
  }
})/<code>

組件事件處理函數
Page 中還可以定義組件事件處理函數。在渲染層的組件中加入事件綁定，當事件被觸發時，就會執行 Page 中定義的事件處理函數

<code>
<
view
 
bindtap
=
"viewTap"
> click me 
view
>/<code>

<code>
Page
({
   
viewTap
: 
function
() {
    console.
log
(
'view tap'
)
  }
})/<code>

Page.prototype.setData(Object data, Function callback)

字段 類型 必填 描述
data Object 是 這次要改變的數據
callback Function 否 setData引起的界面更新渲染完畢後的回調函數

Object 以 key: value 的形式表示，將 this.data 中的 key 對應的值改變成 value。

其中 key 可以以數據路徑的形式給出，支持改變數組中的某一項或對象的某個屬性，如 array[2].message，a.b.c.d，並且不需要在 this.data 中預先定義。

注意：

1. 直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的，還會造成數據不一致。
2. 僅支持設置可 JSON 化的數據。
3. 單次設置的數據不能超過1024kB，請儘量避免一次設置過多的數據。
4. 請不要把 data 中任何一項的 value 設為 undefined
   ，否則這一項將不被設置並可能遺留一些潛在問題。

<code> 
<
view
>{{text}}
view
>
<
button
 
bindtap
=
"changeText"
> Change normal data 
button
>
<
view
>{{num}}
view
>
<
button
 
bindtap
=
"changeNum"
> Change normal num 
button
>
<
view 
>{{array[0].text}}
view
>
<
button
 
bindtap
=
"changeItemInArray"
> Change Array data 
button
>
<
view
>{{object.text}}
view
>
<
button
 
bindtap
=
"changeItemInObject"
> Change Object data 
button
>
<
view
>{{newField.text}}
view
>
<
button
 
bindtap 
=
"addNewField"
> Add new data 
button
>/<code>

<code> 
Page({
  
data
: {
    
text
: 
'init data'
,
    
num
: 
0
,
    
array
: [{
text
: 
'init data'
}],
    
object
: {
      
text
: 
'init data'
    }
  },
  
changeText
: 
function
(
) {
     
     
    
this
.setData({
      
text
: 
'changed data'
    })
  },
  
changeNum
: 
function
(
) {
     
    
this
.data.num =  
1
    
this
.setData({
      
num
: 
this
.data.num
    })
  },
  
changeItemInArray
: 
function
(
) {
     
    
this
.setData({
      
'array[0].text'
:
'changed data'
    })
  },
  
changeItemInObject
: 
function
(
){
    
this
.setData({
      
'object.text'
: 
'changed data'
    });
  },
  
addNewField
: 
function
(
) {
    
this
.setData({
      
'newField.text'
: 
'new data'
    })
  }
})/<code>

PageObject[] getCurrentPages()

獲取當前頁面棧。數組中第一個元素為首頁，最後一個元素為當前頁面。

注意：

• 不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。
• 不要在 App.onLaunch 的時候調用 getCurrentPages()，此時 page 還沒有生成。

這次看的有點多，但是這是一個章節所以就一起看下來了。但是看下來之後都是語句的應用。還是先做到了解都有什麼作用，以後在工作中再雲文檔裡查找就可以了。

關鍵字: 觸發 生命週期 頁面