tencent cloud

Last updated: 2025-03-25 18:15:55
Page
Last updated: 2025-03-25 18:15:55

Page(Object object)

Register a page in the Mini Program. Take one. Object Type parameters that specify initial data for the page, lifecycle callbacks, event handlers, and so on.

parameter

Object object
attribute
type
default
required
Introductions
data
Object
-
-
Initial data for the page
onLoad
function
-
-
Lifecycle callbackMonitor page loading
onShow
function
-
-
Lifecycle callbackMonitor page display
onReady
function
-
-
Lifecycle callbackMonitor Page Initial Rendering Completed
onHide
function
-
-
Lifecycle callbackMonitor Page Hiding
onUnload
function
-
-
Lifecycle callbackListen Page Uninstall
function
-
-
Listen for user drop-down actions
function
-
-
Handle function for bottoming event on page
function
-
-
User click on the upper right to forward
function
-
-
Handler for page scrolling trigger event
function
-
-
At present tab Page, click tab Time trigger
Other
any-
-
-
Other developers can add arbitrary functions or data to the Object parameter, which can be accessed in the page's function with this. This portion of the property is made a deep copy when the page instance is created.
sample code
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onShow: function() {
// Do something when page show.
},
onReady: function() {
// Do something when page ready.
},
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 data when user share.
},
onPageScroll: function() {
// Do something when page scroll
},
onResize: function() {
// Do something when page resize
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})

data

data is used in the first rendering of the pageInitial data。
When the page loads,data Will be JSON The string form is passed from the logical layer to the render layer, so data in must be converted toJSONType: string, number, boolean, object, array.
The render layer can be created by WXML Bind data.
Sample code:
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})

Lifecycle callback function

Triggering of the lifecycle and routing of the page Logic Layer.

onLoad(Object query)

Triggered when the page loads. A page will be called only once, and can be called in the onLoad Gets the parameters in the path to open the current page.
Parameters:
Name
type
Introductions
query
Object
Open parameters in the current page path

onShow()

Page display/Triggered when entering the front desk.

onReady()

Triggered when the initial rendering of the page is complete. A page is called only once, meaning the page is ready to interact with the view layer.
Note: to set the interface content API Such as wx.setNavigationBarTitle, in theonReadyAfter that. See for details Life cycle.

onHide()

Page concealment/Triggered when you switch to the backend. Such as wx.navigateTo Or bottom tab Switch to other pages, Mini Programs into the background, etc.

onUnload()

Triggered when the page is unloaded. Such as wx.redirectTo or wx.navigateBack to another page.

Page event handler

onPullDownRefresh()

Listen for user drop-down refresh events;
Need to app.json of window option, or Page Configuration enablePullDownRefresh;
Can be passed wx.startPullDownRefresh triggers a drop-down refresh, and then triggers a pull-down refresh animation. The effect is consistent with the user's manual pulldown refresh;
After processing the data refresh , wx.stopPullDownRefresh can stop the drop-down refresh of the current page.

onReachBottom()

Listen for user bottom-up events.
Can be app.json of window option, or Page Configuration onReachBottomDistance;
This event will be triggered only once during slippage within the trigger distance.

onPageScroll(Object object)

Listens for user sliding page events.
parameter Object object:
attribute
type
Introductions
scrollTop
Number
Distance a page has been scrolled vertically (in px)
Note:
Please only be present when needed. page Do not define an empty method. To reduce the impact of unnecessary event dispatch on rendering layer - logic layer communication.
Please avoid onPageScroll Too frequent execution in setData Equal cause Logic Layer and Render Layer Communication operations. In particular, each transmission of large amounts of data will affect the communication time.

onShareAppMessage(Object object)

Listen to the user click on the in-page forward on button assembly open-type="share"Or the upper-right menu "Forward" on behavior, and customize the forward content.
Note:
The Forward on is displayed on the upper-right menu only if this event handler is defined.
parameter Object object:
parameter
type
Introductions
from
String
Forward the source of the event.
button:: In-page forward on
menu:: Retweet menu on top right
target
Object
if from The value is buttonThen target That triggered this retweet. button, otherwise undefined
WebViewUrl
String
The page contains web-view, returns the current web-view
string
Where users click to share
This event handler function needs to return an Object, which is used to customise the forwarding content, the return content is as follows:
fields
type
description
default
title
string
Forwarding Title
Current mini program name
path
string
Forwarding Path
Current page path, must be a full path starting with /.
imageUrl
string
Custom image url, can be a local file url, a package file url or a network image url. Support PNG and JPG, display image aspect ratio is 5:4
Use default screenshot
entryDataHash
string
Listen to the user clicking the in-page forward button, only with this parameter, fast sharing will be supported
-
shareType
string
Specify the type of share
"miniapp"

Description of the shareTarget parameter:

Value
Description
0
Share to QQ friends
1
Share to QQ space
2
Open from current chat window, quickly share to current chat window
3
Share to WeChat friends
4
Share to WeChat Friends
5
Share panel to recent contacts
6
Share to Quick Share Friends List

Description of the shareType parameter:

Used to specify the type of sharing, currently there are two types of sharing, one is to share a mini program and the other is to share an image.
Value
Description
"miniapp"
Shared as a mini program, the title, path, imageUrl, entryDataHash parameters take effect
"picture"
Shared as a picture, imageUrl, entryDataHash parameters will take effect
Sample code:
Page({
onShareAppMessage(res) {
if (res.from === 'button') {
// From the in-page forwarding button
console.log(res.target)
}
return {
title: 'Custom Forwarding Title',
path: '/page/user?id=123'
}
}
})

onCustomBack()

Listen to the event of user back to previous page.
You need to enable customNavigateBack in the window option of app.json or in the Page Configuration;
This event will be triggered if you click tabBar to go back, or if you swipe or back key to go back.

onTabItemTap(Object object)

to hit tab Time trigger.
Object Parameter explaination:
parameter
type
Introductions
index
String
Number of tabItem clicked, starting with 0
pagePath
String
Page path of tabItem clicked
text
String
Click tabItem on text
Sample code:
Page({
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
}
})

Component event handler

Page Component event handlers can also be defined in. In the components of the render layer Event binding is executed when an event is triggered Page The event handler defined in the.
Sample code:
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
console.log('view tap')
}
})

Page.route

Path to the current page of typeString.
Page({
viewTap: function() {
console.log('view tap')
}
})

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

setData Function is used to send data from the logical layer to the view layer (asynchronously), changing the corresponding this.data Is synchronized.
Parameter specification
field
type
Required
describe
data
Object
yes
The data to be changed this time
callback
Function
no
Interface update caused by setData after rendering
Object with key: value In the form of this.data to hit the target key The corresponding value is changed to value。
among key Can be given in the form of a data path, supporting changing an item in an array or a property of an object, such as array[2].message,a.b.c.dAnd does not require this.data Predefined in.
Note
Direct modification this.data Without calling this.setData Can not change the state of the page, but also cause data inconsistencies;
Supports settings only JSON Data;
A single set of data can not exceed 1024kB, try to avoid a set of too much data;
Please don't data Any of the value Set to undefined Otherwise this item will not be set and may leave some potential problems.
Sample code:
<!--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' // Don't change this.data directly.
// You should use setData
this.setData({
text: 'changed data'
})
},
changeNum: function() {
// Alternatively, you can modify this.data and then immediately set the modified field with setData.
this.data.num = 1
this.setData({
num: this.data.num
})
},
changeItemInArray: function() {
// For object or array fields, you can modify a subfield directly under it, which is usually better than modifying the whole object or array.
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
addNewField: function() {
this.setData({
'newField.text': 'new data'
})
}
})

PageObject[] getCurrentPages()

Get the current pages stack. The first element in the array is the first page and the last element is the current page.

Cautions

Don't try to modify the page stack, it will lead to routing and page state errors;
Don't call getCurrentPages() when App.onLaunch is running, the page has not been generated yet.

Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback