May 18, 2021 WeChat Mini Program Development Document
Register a page in a small program. Accepts an Object type parameter that specifies the initial data of the page, lifecycle callbacks, event handler, and so on.
Property | Type | The default | Required | Description |
---|---|---|---|---|
data | Object | The initial data for the page | ||
onLoad | function | Lifecycle callbacks - Listen for page loads | ||
onShow | function | Lifecycle callbacks - Listen to page displays | ||
onReady | function | Life cycle callbacks - Listen to the first rendering of the page | ||
onHide | function | Lifecycle callbacks - Listen for page hiding | ||
onUnload | function | Lifecycle callbacks - Listen for page uninstalls | ||
onPullDownRefresh | function | Listen for user pull-down actions | ||
onReachBottom | function | The handler for the bottom-of-the-page event | ||
onShareAppMessage | function | The user clicks on the top right corner to forward | ||
onShareTimeline | function | The user clicks on the upper right corner to forward to the circle of friends | ||
onAddToFavorites | function | The user clicks on the top right corner to collect | ||
onPageScroll | function | The handler of the page scroll trigger event | ||
onResize | function | Triggered when the page size changes, see The response shows the area change | ||
onTabItemTap | function | When the tab page is currently in, it is triggered when tab is clicked | ||
Other | any |
Developers can add any function or data to
Object
parameter, which can be accessed with this in the
this
the page
|
//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 is the initial data used by the page for its first rendering.
When the page loads, data is passed from the logical layer to the rendering layer as a JSON string, so the data in the data must be the type that can be converted to JSON: string, number, boolean value, object, array.
The rendering layer can bind data through WXML.
Example code:
Preview the effect in the developer tool
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
The trigger for the lifecycle and how the page is routed are detailed
Triggered when the page loads. A page is called only once, and you can get the parameters in the current page path that open in onLoad's arguments.
Parameters:
Name | Type | Description |
---|---|---|
query | Object | Open the parameters in the current page path |
Triggered when the page is displayed/cut into the fore desk.
Triggered when the page's first rendering is complete. A page is called only once, which represents that the page is ready to interact with the view layer.
Note: APIs that set up the content of the interface, such as wx.setNavigationBarTitle, do so after onReady. See Life Cycle
Triggered when the page is hidden/cut into the background. Such as wx.navigateTo or bottom tab to switch to another page, small programs cut into the background, etc.
Triggered when the page is unloaded. Such as wx.redirectTo or wx.navigateBack to other pages.
Listen for user pull-down refresh events.
Listen for user pull-up bottom events.
Listen for user swipe page events.
Argument Object object:
Property | Type | Description |
---|---|---|
scrollTop | Number | Distance at which the page has been scrolled vertically (px) |
Note: Define this method in the page only when you need it, not an empty method. t o reduce the impact of unnecessary event delegation on render-logical layer communication. N ote: Avoid performing operations such as setData that cause logical-render layer communication too frequently in onPageScroll. In particular, each transfer of large amounts of data can affect communication time.
This interface is beta version, supported from Android 7.0.15, and is currently only supported on Android platforms
Listen to the user's click on the Top Right menu "Favorites" button and customize the favorites.
Argument Object object:
Parameters | Type | Description |
---|---|---|
webviewUrl | String | When the page contains the web-view component, the url of the current web-view is returned |
This event handler requires return an Object to customize the favorites:
Field | Description | The default |
---|---|---|
title | Custom title | Page title or account name |
imageUrl | Customize the picture to show that the picture aspect ratio is 1:1 | Screenshot of the page |
query | Customize the qury field | The qury of the current page |
The sample code
Page({
onAddToFavorites(res) {
// webview 页面返回 webviewUrl
console.log('WebviewUrl: ', res.webviewUrl)
return {
title: '自定义标题',
imageUrl: 'http://demo.png',
query: 'name=xxx&age=xxx',
}
}
})
Listen to the user's behavior by clicking the in-page forward button (button component open-type"share") or the "forward" button in the upper right menu, and customize the forwarding content.
Note: The Forward button appears in the upper right-hand corner menu only if this event handler is defined
Argument Object object:
Parameters | Type | Description | The lowest version |
---|---|---|---|
from | String |
Forward the source of the event.
button
in-page forwarding button;
menu
Forward the menu in the upper right corner
|
1.2.4 |
target | Object |
If
from
value is
button
target is the
target
that triggered the
button
otherwise
undefined
|
1.2.4 |
webViewUrl | String | When the page contains the web-view component, the url of the current web-view is returned | 1.6.4 |
This event handler requires return an Object to customize the forwarding content, which returns as follows:
Custom Forwarding Content Basic Library 2.8.1 from, sharing diagrams supports cloud images.
Field | Description | The default | The lowest version |
---|---|---|---|
title | Forward the title | The current program name | |
path | The forwarding path | The current page path must be the full path that begins with / | |
imageUrl | Custom picture paths, which can be local file paths, code pack file paths, or network picture paths. S upport for PNG and JPG. The display picture aspect ratio is 5:4. | Use the default screenshot | 1.5.0 |
The sample code
Preview the effect in the developer tool
Page({
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
}
})
Base Library 2.11.3 starts to be supported, and low versions need to be compatible.
This interface is a Beta version and is currently only available on the Android platform, see Share to Friends (Beta)
Listen to the "Share to Friends" button in the upper right-hand corner menu and customize the content.
Note: The Share to Friends button appears in the upper right menu only if this event handler is defined
Custom forwarding content
The event handler returns an Object for custom sharing, does not support custom page paths, and returns the following:
Field | Description | The default | The lowest version |
---|---|---|---|
title | Custom title, which is the title that appears on the friends circle list page | The current program name | |
query | Customize the parameters carried in the page path, such as the "?" section of path? | The parameters carried by the current page path | |
imageUrl | Customize the picture path, which can be a local file or a network picture. PNG and JPG are supported, showing a picture aspect ratio of 1:1. | The small program Logo is used by default |
Base library 2.4.0 starts to support, and low versions need to be compatible.
Triggered when the small program screen rotates. See the response for changes in the display area
Base library 1.9.0 starts to support, and low versions need to be compatible.
Triggered when tab is clicked
Object parameter description:
Parameters | Type | Description | The lowest version |
---|---|---|---|
index | String | The serial number of tabItem is clicked, starting at 0 | 1.9.0 |
pagePath | String | The page path of tabItem is clicked | 1.9.0 |
text | String | The text of the button that was clicked tabItem | 1.9.0 |
Example code:
Page({
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
}
})
You can also define component event handler in Page. Adding event bindings to the components of the render layer, when an event is triggered, executes the event handler defined in Page.
Example code:
Preview the effect in the developer tool
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
console.log('view tap')
}
})
Base library 1.2.0 starts to be supported, and low versions need to be compatible.
The path to the current page, type String.
Page({
onShow: function() {
console.log(this.route)
}
})
The setData function is used to send data from the logical layer to the view layer (asynchronous) while changing the value of the corresponding this.data (synchronization).
Field | Type | Required | Describe | The lowest version |
---|---|---|---|---|
data | Object | Is | This time to change the data | |
callback | Function | Whether | The setData-induced interface updates the callback function after rendering | 1.5.0 |
Object is expressed as key: value, changing the value corresponding to key in this.data to value.
Where key can be given as a data path, it supports changing an item or property of an object in an array, such as array.message, a.b.c.d, and does not need to be predefined in this.data.
Attention:
Example code:
Preview the effect in the developer tool
<!--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' // 不要直接修改 this.data
// 应该使用 setData
this.setData({
text: 'changed data'
})
},
changeNum: function() {
// 或者,可以修改 this.data 之后马上用 setData 设置一下修改了的字段
this.data.num = 1
this.setData({
num: this.data.num
})
},
changeItemInArray: function() {
// 对于对象或数组字段,可以直接修改一个其下的子字段,这样做通常比修改整个对象或数组更好
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
addNewField: function() {
this.setData({
'newField.text': 'new data'
})
}
})
Base library 2.7.3 starts to be supported, and low versions need to be compatible.
If one page is opened by another page via wx.navigateTo, a data channel is established between the two pages:
The two EventChannel objects can use the emit and on methods to send and listen to each other for events.
Gets the current page stack. The first element in the array is the first page and the last element is the current page.
Attention: