【移動應(yīng)用開發(fā)技術(shù)】小程序開發(fā)之page()函數(shù)怎么用

【移動應(yīng)用開發(fā)技術(shù)】小程序開發(fā)之page()函數(shù)怎么用

這篇文章主要介紹了小程序開發(fā)之page()函數(shù)怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。PagePage()函數(shù)用來注冊一個頁面。接受一個object參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。object參數(shù)說明：示例代碼：//index.js

Page({

data:

{

text:

"This

is

page

data."

},

onLoad:

function(options)

{

//

Do

some

initialize

when

page

load.

},

onReady:

function()

{

//

Do

something

when

page

ready.

},

onShow:

function()

{

//

Do

something

when

page

show.

},

onHide:

function()

{

//

Do

something

when

page

hide.

},

onUnload:

function()

{

//

Do

something

when

page

close.

},

onPullDownRefresh:

function()

{

//

Do

something

when

pull

down.

},

onReachBottom:

function()

{

//

Do

something

when

page

reach

bottom.

},

onShareAppMessage:

function()

{

//

return

custom

share

date

when

user

share.

},

//

Event

handler.

viewTap:

function()

{

this.setData({

text:

'Set

some

data

for

updating

view.'

})

},

customData:

{

hi:

'MINA'

}

})初始化數(shù)據(jù)初始化數(shù)據(jù)將作為頁面的第一次渲染。data將會以JSON的形式由邏輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成JSON的格式：字符串，數(shù)字，布爾值，對象，數(shù)組。渲染層可以通過WXML對數(shù)據(jù)進行綁定。示例代碼：<view>{{text}}</view><view>{{array[0].msg}}</view>

Page({

data:

{

text:

'init

data',

array:

[{msg:

'1'},

{msg:

'2'}]

}

})生命周期函數(shù)onLoad:頁面加載一個頁面只會調(diào)用一次。接收頁面參數(shù)可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的query。onShow:頁面顯示每次打開頁面都會調(diào)用一次。onReady:頁面初次渲染完成一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互。對界面的設(shè)置如wx.setNavigationBarTitle請在onReady之后設(shè)置。詳見生命周期onHide:頁面隱藏當navigateTo或底部tab切換時調(diào)用。onUnload:頁面卸載當redirectTo或navigateBack的時候調(diào)用。生命周期的調(diào)用以及頁面的路由方式詳見onLoad參數(shù)頁面相關(guān)事件處理函數(shù)onPullDownRefresh:下拉刷新監(jiān)聽用戶下拉刷新事件。需要在config的window選項中開啟enablePullDownRefresh。當處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。onShareAppMessage:用戶分享只有定義了此事件處理函數(shù)，右上角菜單才會顯示“分享”按鈕用戶點擊分享按鈕的時候會調(diào)用此事件需要return一個Object，用于自定義分享內(nèi)容自定義分享字段示例代碼Page({

onShareAppMessage:

function

()

{

return

{

title:

'自定義分享標題',

path:

'/page/user?id=123'

}

}

})事件處理函數(shù)除了初始化數(shù)據(jù)和生命周期函數(shù)，Page中還可以定義一些特殊的函數(shù)：事件處理函數(shù)。在渲染層可以在組件中加入事件綁定，當達到觸發(fā)事件時，就會執(zhí)行Page中定義的事件處理函數(shù)。示例代碼：<view

bindtap="viewTap">

click

me

</view>Page({

viewTap:

function()

{

console.log('view

tap')

}})

Ptotype.setData()setData函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時改變對應(yīng)的this.data的值。注意：直接修改this.data無效，無法改變頁面的狀態(tài)，還會造成數(shù)據(jù)不一致。單次設(shè)置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設(shè)置過多的數(shù)據(jù)。setData()參數(shù)格式接受一個對象，以key，value的形式表示將this.data中的key對應(yīng)的值改變成value。其中key可以非常靈活，以數(shù)據(jù)路徑的形式給出，如array[2].message，a.b.c.d，并且不需要在this.data中預(yù)先定義。注意：直接修改this.data而不調(diào)用this.setData是無法改變頁面的狀態(tài)的，還會造成數(shù)據(jù)不一致單次設(shè)置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設(shè)置過多的數(shù)據(jù)。示例代碼：<!--index.wxml--><view>{{text}}</view><button

bindtap="changeText">

Change

normal

data

</button><view>{{num}}</view><button

bindtap="changeText">

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.jsPage({

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({

'o