tencent cloud

Last updated: 2025-11-24 10:36:27
Page
Last updated: 2025-11-24 10:36:27

Page(Object object)

Registers a page in the mini program. Accepts an Object parameter to specify the page's initial data, lifecycle callbacks, event handling functions, etc.

Parameter

Object object

Property
Type
Default value
‍Required
Description
data
Object
-
-
Initial data for the page
onLoad
function
-
-
Lifecycle callback - listens for page loading
onShow
function
-
-
Lifecycle callback - listens for page display
onReady
function
-
-
Lifecycle callback - listens for initial rendering completion
onHide
function
-
-
Lifecycle callback - listens for page hiding
onUnload
function
-
-
Lifecycle callback - listens for page unloading
function
-
-
Listens for pull-down
function
-
-
The handler function for the page's pull-to-bottom event
function
-
-
Triggered when the user taps the share buttons in the top-right menu
function
-
-
The handler function for the page's scroll event
function
-
-
Callback triggered when the developer intercepts the default back navigation of the page
function
-
-
Triggered when a tab is tapped on the current tab page
Others
any
-
-
Developers can add any functions or data to the Object parameter, which can be accessed using this within the page's functions. These properties will be deep-copied once when the page instance is created.
Example:
//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 the initial data used for the first rendering of the page.
When the page loads, data will be passed from the logic layer to the rendering layer in the form of a JSON string. Therefore, the data in data must be of types that can be converted to JSON: string, number, boolean, object, or array.
The rendering layer can bind the data through WXML .
Example:
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})

Lifecycle callback functions

For details on lifecycle triggering and page routing methods, see Logic Layer.

onLoad(Object query)

Triggered when the page loads. This is called only once per page. The parameters from the path used to open the current page can be obtained through the parameter of onLoad.
Parameter:
Name
Type
Description
query
Object
Parameters from the path used to open the current page.

onShow()

Triggered when the page is displayed or brought to the foreground.

onReady()

Triggered when the page's initial rendering is completed. It will be called only once per page, indicating that the page is ready to interact with the view layer.
Note: APIs that modify the interface content, e.g., wx.setNavigationBarTitle, should be called after onReady. For details, refer to Lifecycle.

onHide()

Triggered when the page is hidden or moved to the background, such as when using wx.navigateTo , switching to another page via a bottom tab, or when the mini program enters the background.

onUnload()

Triggered when the page is unloaded, such as when using wx.redirectTo or wx.navigateBack to navigate to another page.

Page event handler functions

onPullDownRefresh()

Listens for the user's pull-to-refresh event.
Enable enablePullDownRefresh in the window option of app.json or in the page configuration .
Trigger the pull-down refresh using wx.startPullDownRefresh, which activates the pull-down refresh animation (identical to a manual pull-to-refresh).
After data refreshing is complete, call wx.stopPullDownRefresh to stop the pull-down refresh for the current page.

onReachBottom()

Listens for the user's scroll-to-bottom event.
Set the trigger distance onReachBottomDistance in the window option of app.json or in the page configuration .
During scrolling within the trigger distance, this event will be triggered only once.

onPageScroll(Object object)

Listens for the user's page scrolling event.
Parameter Object object:
Property
Type
Description
scrollTop
Number
The distance the page has been scrolled vertically (in px).
Note:
Define this method in the page only when necessary, and avoid defining empty methods. This minimizes unnecessary event dispatching that impacts communication between the rendering layer and the logic layer.
Avoid performing operations like setData too frequently within onPageScroll that trigger communication between the logic layer and rendering layer. Especially, transmitting large amounts of data in a single batch can increase communication latency.

onShareAppMessage(Object object)

Listens for user taps on any share button (a button component with open-type="share") within the page or the share buttons in the top-right menu, and customizes the shared content.
Note:
The share buttons in the top-right menu will only appear if this event handler function is defined.
Parameter Object object:
Parameter
Type
Description
from
String
The source of the share event.
button: Share buttons within the page.
menu: Share buttons in the top-right menu.
target
Object
If the value of from is button, then the target is the button that triggered the share event; otherwise, it is undefined.
webViewUrl
String
When the page contains a web-view component, returns the current URL of the web-view.
String
Indicates the sharing channel tapped by the user.
This event handler function must return an Object to customize the shared content, which includes the following fields:
Field
Type
Description
Default value
title
String
The title of the shared content.
The current mini program’s name.
path
String
The path to be shared.
The current page’s path, which must be a complete path starting with /.
imageUrl
String
The custom image path, which can be a local file path, a code package file path, or a network image URL. Supports PNG and JPG formats. The displayed image aspect ratio is 5:4.
The default screenshot.

shareTarget parameter description:

Value
Description
0
Share to QQ friends
1
Share to Qzone
3
Share to WeChat friends
4
Share to WeChat Moments
Example:
Page({
onShareAppMessage(res) {
if (res.from === 'button') {
// From the share buttons within the page
console.log(res.target)
}
return {
title: 'Custom title of the shared content',
path: '/page/user?id=123'
}
}
})

onCustomBack()

Listens for the user's event of returning to the previous page.
Enable customNavigateBack in the window option of app.json or in the page configuration .
This event is triggered when navigating back by tapping the tabBar, using a swipe gesture, or pressing the back button.

onTabItemTap(Object)

Triggered when a tab is tapped.

Object parameter description:
Parameter
Type
Description
index
String
The index of the tapped tabItem, starting from 0.
pagePath
String
The page path of the tapped tabItem.
text
String
The button text of the tapped tabItem.
Example:
Page({
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
}
})

Component event handler functions

Component event handler functions can also be defined in the Page . By adding event bindings to components in the rendering layer, the event handler functions defined in the Page will be executed when the corresponding events are triggered.
Example:
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
console.log('view tap')
}
})

Page.route

The path to the current page, which is of String type.
Page({
viewTap: function() {
console.log('view tap')
}
})

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

The setData function is used to send data from the logic layer to the rendering layer (asynchronously), while also updating the corresponding this.data value (synchronously).
Parameters:
Field
Type
‍Required
Description
data
Object
True
The data to be modified in this operation.
callback
Function
False
A callback function invoked after the rendering of the interface update triggered by setData is completed.
The Object is represented in the form of key: value , updating the value corresponding to the key in this.data to the specified value.
Where, the key can be provided in the form of a data path, allowing modification of specific array items or object properties (e.g., array[2].message, a.b.c.d).Pre-defining the key in this.data is not required.
Note:
Directly modifying this.data without calling this.setData will not change the status of the page and will cause data inconsistency.
Only JSON-compatible data can be set.
The data set at one time cannot exceed 1024 KB. Avoid setting excessive data at once.
Do not set the value of any item in data to undefined , as this item will not be set and may lead to potential issues.
<!--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' // Do not modify this.data directly.
// Use setData instead.
this.setData({
text: 'changed data'
})
},
changeNum: function() {
// Or, use setData to set the modified field immediately after modifying this.data.
this.data.num = 1
this.setData({
num: this.data.num
})
},
changeItemInArray: function() {
// For an object or array field, you can directly modify a subfield within it, which is usually better than modifying the entire 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()

Gets the current page stack. The first element in the array is the homepage, and the last element is the current page.

Notes

Do not attempt to modify the page stack, as it may cause routing and page status errors.
In the App.onLaunch callback function, do not call getCurrentPages(), as the page has not been generated at this point.



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

Feedback