Page(Object)
function is used to register a webpage. It accepts an Object
type argument, which designates the webpage's initial data, lifecycle callbacks, event handling functions, and so forth.Attribute | Type | Description |
object | Initial data of the page | |
fuction | Lifecycle Callback - Monitoring Page Load | |
fuction | Lifecycle Callback - Monitoring Page Display | |
fuction | Lifecycle Callback - Monitoring Initial Page Rendering Completion | |
fuction | Lifecycle Callback - Monitoring Page Concealment | |
fuction | Lifecycle Callback - Monitoring Page Unload | |
fuction | Monitor User's Pull-down Actions | |
fuction | Handling function for events triggered by page pull-up | |
fuction | Handling function for events triggered by page scroll | |
fuction | User clicks the Favourite button in the top-right corner menu (supported by base library of Version 1.4.0 and later versions) | |
fuction | User clicks the Share button in the top right corner menu | |
fuction | ||
onCustomBack | function | The developer intercepts the default return callback of the page |
fuction | Triggered when the current page is a Tab page and the Tab is clicked. | |
Other | any | Developers can add any function or data to the Object parameter, which can be accessed in the page function via this . |
// index.jsPage({data: {text: 'This is page data.'},onLoad(options) {// Do some initialize when page load.},onReady() {// Do something when page ready.},onShow() {// Do something when page show.},onHide() {// Do something when page hide.},onUnload() {// Do something when page close.},onPullDownRefresh() {// Do something when pull down.},onReachBottom() {// Do something when page reach bottom.},onShareAppMessage() {// return custom share data when user share.},onAddToFavorites: function(res) {// return custom favorite data.},onPageScroll() {// Do something when page scroll},onResize() {// Do something when page resize},onTabItemTap(item) {console.log(item.index)console.log(item.pagePath)console.log(item.text)},// Event handler.viewTap() {this.setData({text: 'Set some data for updating view.'}, function () {// this is setData callback})},customData: {hi: 'MINA'}})
Page
, as an advanced usage, pages can be created like custom components using component
, thereby enabling the use of custom component features such as behaviors
and so forth. For specific details, see the Component Constructor section.Data
represents the initial data used for the first rendering of the page.data
will be transferred from the logic layer to the rendering layer in the form of a JSON
string. Therefore, the data within data
must be a type convertible to JSON
: string, number, boolean, object, 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 in the current page path. |
navigateTo
or the bottom tab
switches to another page, or when the mini program moves to the backend.redirectTo
or navigateBack
to another page.enablePullDownRefresh
in the window option of app.json
or in Page Configuration.onReachBottomDistance
in the window option of app.json
or in Page Configuration.Attribute | Type | Description |
scrollTop | number | The distance the page has scrolled in the vertical direction (unit: px). |
Field | Type | Description |
fromw | string | Source of the forwarding event Button: The "forward" button within the page. Menu: The forwarding menu in the top right corner. |
webviewUrl | string | When the <web-view> component is included in the page, it returns the URL of the current <web-view>. |
Field | Type | Description | Default value |
title | string | Parameter Title | Current Mini Program Name |
imageUrl | string | Custom image path, which can be a local file path, code package file path, or network image path. Supports PNG and JPG formats. | Current Mini Program Logo |
query | string | Page query parameters, such as a=1&b=2 | Current page's query parameters |
Page({onAddToFavorites: function(res) {console.log('webviewUrl', res.webviewUrl);console.log('from', res.from);return {Title: 'Add to Favorites Title',imageUrl: '',query: 'a=1&b=2',}},})
Field | Type | Description |
from | string | Source of the forwarding event. Button: Forwarding button within the page; Menu: Top right forwarding menu. |
target | object | If the value of 'from' is 'button', then 'target' is the button that triggered this forwarding event; otherwise, it is "undefined". |
webViewUrl | string | When the <web-view> component is included in the page, it returns the URL of the current <web-view>. |
shareTarget | string | For details on where the user clicks to share, see the explanation of the 'shareTarget' parameter below. |
Value | Description |
0 | Share to QQ Friends |
1 | Share to QQ Space |
2 | Open from the current chat window for swift sharing to the same chat window. |
3 | Share to WeChat Friends |
4 | Share to WeChat Moments |
5 | Share via the panel to recent contacts. |
6 | Share to the Quick Share Friends List |
Field | Type | Description | Default value | Earliest Version |
title | string | Forwarding Title | Current Mini Program Name | - |
path | string | Forwarding path | The current page path must be a complete path starting with /. | - |
imageUrl | string | Customize the image path, which can be a local file path, a code package file path, or a network image path. Both PNG and JPG formats are supported. The default share template displays an image aspect ratio of 5:4. | Use Default Screenshot | - |
shareType | string | "miniapp" | 1.4.0 |
Value | Description |
"miniapp" | When sharing in the form of a mini program, the parameters title, path, imageUrl, generalWebpageUrl, entryDataHash, shareTemplateId, and shareTemplateData will take effect. |
"picture" | When sharing in the form of an image, the parameters imageUrl and entryDataHash will take effect. |
Page({onShareAppMessage(res) {if (res.from === 'button') {// From the page's share buttonconsole.log(res.target)}return {title: 'Custom Forwarding Title',path: '/page/user?id=123'}}})
Field | Type | Description |
index | string | The sequence number of the clicked tabItem, starting from 0. |
pagePath | string | The page path of the clicked tabItem. |
text | string | The button text of the clicked tabItem. |
Page({onTabItemTap(item) {console.log(item.index)console.log(item.pagePath)console.log(item.text)}})
Page
. By incorporating event binding into the rendering layer's components, the event handling functions defined in the Page will be executed when the event is triggered.<view bindtap="viewTap">click me</view>
Page({viewTap() {console.log('view tap')}})
String
.Page({onShow() {console.log(this.route)}})
setData
function is used to transmit data from the logical layer to the view layer (asynchronously), while simultaneously altering the corresponding value of this.data
(synchronously).Field | Type | Required | Description |
data | object | Yes | The data to be modified this time. |
callback | function | No | Callback function executed after the interface update triggered by setData has been fully rendered. |
Object
represented in the form of key: value
, changing the value corresponding to key
in this.data
to value
.key
can be provided in the form of a data path, supporting the modification of an item in an array or an attribute of an object, such as array[2].message
, a.b.c.d
, and it is not necessary to predefine it in this.data.<!--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() {// this.data.text = 'changed data' // Do not directly modify this.data// SetData shall be used.this.setData({text: 'changed data'})},changeNum() {// Alternatively, you can modify this.data and immediately use setData to set the modified fields.this.data.num = 1this.setData({num: this.data.num})},changeItemInArray() {// For object or array fields, one can directly modify a subfield within them. This approach is typically more advantageous than modifying the entire object or array.this.setData({'array[0].text': 'changed data'})},changeItemInObject() {this.setData({'object.text': 'changed data'})},addNewField() {this.setData({'newField.text': 'new data'})}})
Was this page helpful?