Object parameter to specify the page's initial data, lifecycle callbacks, event handling functions, etc.Property | Type | Default value | Required | Description |
Object | - | - | Initial data for the page | |
function | - | - | Lifecycle callback - listens for page loading | |
function | - | - | Lifecycle callback - listens for page display | |
function | - | - | Lifecycle callback - listens for initial rendering completion | |
function | - | - | Lifecycle callback - listens for page hiding | |
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. |
//index.jsPage({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 is the initial data used for the first rendering of the page.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.<view>{{text}}</view><view>{{array[0].msg}}</view>
Page({data: {text: 'init data',array: [{msg: '1'}, {msg: '2'}]}})
Name | Type | Description |
query | Object | Parameters from the path used to open the current page. |
Property | Type | Description |
scrollTop | Number | The distance the page has been scrolled vertically (in px). |
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 | |
String | Indicates the sharing channel tapped by the user. |
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. |
Value | Description |
0 | Share to QQ friends |
1 | Share to Qzone |
3 | Share to WeChat friends |
4 | Share to WeChat Moments |
Page({onShareAppMessage(res) {if (res.from === 'button') {// From the share buttons within the pageconsole.log(res.target)}return {title: 'Custom title of the shared content',path: '/page/user?id=123'}}})
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. |
Page({onTabItemTap(item) {console.log(item.index)console.log(item.pagePath)console.log(item.text)}})
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.<view bindtap="viewTap"> click me </view>
Page({viewTap: function() {console.log('view tap')}})
Page({viewTap: function() {console.log('view tap')}})
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).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.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.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.jsPage({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 = 1this.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'})}})
App.onLaunch callback function, do not call getCurrentPages(), as the page has not been generated at this point.Feedback