摘要:
上一篇介紹的是 app.js 邏輯層檔案中註冊程式,對應的每個分頁面都會有的 js 檔案中 page() 函式註冊頁面
微信小程式-06-詳解介紹.js 邏輯層檔案-註冊頁面
寶典官方文件:
https://developers.weixin.qq....
上一篇介紹的是 app.js 邏輯層檔案中註冊程式,對應的每個分頁面都會有的 js 檔案中 page() 函式註冊頁面
微信小程式-06-詳解介紹.js 邏輯層檔案-註冊頁面
頁面 Page
-
Page(Object)
- Page(Object) 函式用來註冊一個頁面。接受一個 Object 型別引數,其指定的初始資料、宣告週期回撥、時間處理函式等
-
Object 引數說明:
屬性 |
型別 |
描述 |
Object |
頁面的初始資料 |
Function |
生命週期回撥—監聽頁面載入 |
Function |
生命週期回撥—監聽頁面顯示 |
Function |
生命週期回撥—監聽頁面初次渲染完成 |
Function |
生命週期回撥—監聽頁面隱藏 |
Function |
生命週期回撥—監聽頁面解除安裝 |
Function |
監聽使用者下拉動作 |
Function |
頁面上拉觸底事件的處理函式 |
Function |
使用者點選右上角轉發 |
Function |
頁面滾動觸發事件的處理函式 |
Function |
當前是 tab 頁時,點選 tab 時觸發 |
其他 |
Any |
開發者可以新增任意的函式或資料到Object
引數中,在頁面的函式中用this
可以訪問 |
-
Object 內容在頁面載入時會進行一次深拷貝,需考慮資料大小對頁面載入的開銷
-
示例:
//和 app 一樣,輸入 page 根據提示回車,會自動生成預製的函式
Page({
/**
* 頁面的初始資料
*/
data: {
text: "這裡寫頁面資料"
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
},
/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
},
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
},
/**
* 當頁面滾動的時候執行
*/
onPageScroll: function() {
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
/**
* 事件處理
*/
viewTap: function() {
this.setData({
text: '為更新檢視設定一些資料'
), function() {
// 這裡是設定資料回撥
}
},
customData: {
hi: 'MINA'
}
})
data
-
data 是頁面第一次渲染使用的初試資料
- 頁面載入時,data 將會以 json 字串的形式由邏輯層傳至渲染層,因此 data 中的資料必須是可以轉成 json 的型別:字串,數字,布林值,物件,陣列
- 渲染層可以通過 WXML(後續會詳細說明) 對資料進行繫結
-
示例程式碼:
// wxml 檔案
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
//js 檔案
Page({
data: {
text: 'int data',
array:[{msg: '1'}, {msg: '2'}]
}
})
生命週期回撥函式
-
生命週期的觸發以及頁面的路由方式詳見
- onLoad(Object query)
- 頁面載入時觸發,一個頁面只會呼叫一次,可以在 onLoad 的引數中獲取開啟當前頁面路徑中的引數
-
引數說明:
名稱 |
型別 |
說明 |
query |
Object |
開啟當前頁面的路徑中的引數 |
onShow()
onReady()
- 頁面初次渲染完成觸發。一個頁面只會呼叫一次,代表頁面已經準備妥當,可以和檢視層進行互動
- 【注意】:對介面內容進行設定的 API 如 wx.setNavigationBarTitle,請在 onReady 之後進行。詳見生命週期(本篇後面介紹)
onHide()
- 頁面隱藏、切入後臺時觸發。如 navigationTo 或底部 tab 切換到其他壓面,小程式切入後臺等
onUnload()
- 頁面解除安裝時觸發。如 redirectTo 或 navigateBack 到其他頁面時
頁面處理函式
onPullDownRefresh()
-
監聽使用者下拉重新整理事件
- 需要在 app.json 的 window 選項中或頁面配置中開啟 enablePullDownRefresh
- 可以通過 wx.startPullDownRefresh 觸發下拉重新整理,呼叫後觸發下拉重新整理動畫,效果與使用者手動下拉重新整理一致
- 當處理完資料重新整理後,wx.stopPullDownRefresh 可以停止當前頁面的下拉重新整理
onReachBottom()
-
監聽使用者上拉觸底事件
- 可以在 app.josn 的 window 選項中或頁面配置中設定觸發距離 onReachBottomDistance
- 在觸發距離內滑動期間,本事件只會被觸發一次
onPageScroll(Object)
屬性 |
型別 |
說明 |
scrollTop |
Number |
頁面在垂直方向已滾動的距離(單位px) |
onShareAppMessage(Object)
- 監聽使用者點選頁面內轉發按鈕(button 元件 open-type="share")或右上角選單 “轉發” 按鈕的行為,性自定義轉發內容
-
【注意】:只有定義了此事件處理函式,右上角選單才會顯示 “轉發” 按鈕
-
Object 引數說明:
引數 |
型別 |
說明 |
最低版本 |
from |
String |
轉發事件來源。
button
:頁面內轉發按鈕;
menu
:右上角轉發選單 |
1.2.4
|
target |
Object |
如果from
值是button
,則target
是觸發這次轉發事件的button
,否則為undefined
|
1.2.4
|
webViewUrl |
String |
頁面中包含<web-view>
元件時,返回當前<web-view>
的url |
1.6.4
|
- 此事件需要 return 一個 Object,用於自定義轉發內容,返回內容如下:
-
自定義轉發內容
欄位 |
說明 |
預設值 |
最低版本 |
title |
轉發標題 |
當前小程式名稱 |
|
path |
轉發路徑 |
當前頁面 path ,必須是以 / 開頭的完整路徑 |
|
imageUrl |
自定義圖片路徑,可以是本地檔案路徑、程式碼包檔案路徑或者網路圖片路徑。支援PNG及JPG。顯示圖片長寬比是 5:4。 |
使用預設截圖 |
1.5.0
|
Page({
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 來自頁面內轉發按鈕
console.log(res.target)
}
return {
title: '自定義轉發標題',
path: '/page/user?id=123'
}
}
})
onTabItemTap(Object)
- 基礎庫 1.9.0 開始支援,低版本需做相容處理
- 點選 tab 時觸發
-
Object 引數說明:
引數 |
型別 |
說明 |
最低版本 |
index |
String |
被點選tabItem的序號,從0開始 |
1.9.0
|
pagePath |
String |
被點選tabItem的頁面路徑 |
1.9.0
|
text |
String |
被點選tabItem的按鈕文字 |
1.9.0
|
Page({
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
}
})
元件事件處理函式
- Page 中還可以定義元件事件處理函式。在渲染層的元件中加入事件繫結,當事件被觸發時,就會執行 Page 中定義的事件處理函式
-
示例程式碼:
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
console.log('view tap')
}
})
Page.route
- 基礎庫 1.2.0 開始支援,低版本需做相容處理
- 到當前頁面的路徑,型別為String
Page({
onShow: function() {
console.log(this.route)
}
})
Page.prototype.setData(Object data, Function callback)
欄位 |
型別 |
必填 |
描述 |
最低版本 |
data |
Object |
是 |
這次要改變的資料 |
|
callback |
Function |
否 |
setData引起的介面更新渲染完畢後的回撥函式 |
1.5.0
|
<!--index.wxml-->
<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>
//index.js
Page({
data: {
text: 'init data',
num: 0,
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function() {
// this.data.text = 'changed data'// bad, it can not work
this.setData({
text: 'changed data'
})
},
changeNum: function() {
this.data.num = 1
this.setData({
num: this.data.num
})
},
changeItemInArray: function() {
// you can use this way to modify a danamic data path
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
addNewField: function() {
this.setData({
'newField.text': 'new data'
})
}
})
生命週期
以下內容你不需要立馬完全弄明白,不過以後它會有幫助
- 下圖說明了 Page 例項的生命週期
-