# Page(Object object)

Register a page in the applet. Accept one Object Type parameter, which specifies the initial data, lifecycle callback, event handling function, etc. of the page.

# parameter

# Object object

# 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 It is used for the first rendering of the page Initial data 。

When the page loads, data Will be JSON The form of the string is passed from the logical layer to the rendering layer, so data The data in must be transferable JSON Type of: string, number, Boolean value, object, array.

Render layers can be created by WXML Bind data.

Sample 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' } ]
   }
 } )

# Lifecycle callback function

Trigger the lifecycle and route the page See

# onLoad(Object query)

Triggered when the page is loaded. A page can only be called once. You can obtain the parameters in the path of the current page in the onLoad parameter.

Parameters:

# onShow()

Triggered when the page is displayed/switched to the foreground.

# onReady()

Triggered when the page finishes rendering for the first time. A page can only be called once, which means that the page is ready to interact with the view layer.

Note: API for setting interface content is as follows wx.setNavigationBarTitle , please onReady After that. See life cycle

# onHide()

Triggered when the page is hidden/switched to the background. as wx.navigateTo Or bottom tab Switch to other pages, and the applet switches to the background.

# onUnload()

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

# onRouteDone()

Triggered when the route animation completes. as wx.navigateTo After the page is fully pushed or wx.navigateBack When the page is fully restored.

# Page Event Handler

# onPullDownRefresh()

Listen to user pull-down refresh events.

• Need to be in app.json Of window Option or Page Configuration Middle opening enablePullDownRefresh 。
• Can be accessed via wx.startPullDownRefresh Trigger the pull-down refresh. After the call, trigger the pull-down refresh animation. The effect is consistent with the user's manual pull-down refresh.
• After data refresh, wx.stopPullDownRefresh You can stop the pull-down refresh of the current page.

# onReachBottom()

Listen to user pull-up bottoming events.

• You can use the app.json Of window Option or Page Configuration Set trigger distance in onReachBottomDistance 。
• This event will only be triggered once during sliding within the trigger distance.

# onPageScroll(Object object)

Listen to user sliding page events.

Parameter Object :

Note: Please define this method in the page only when necessary, and do not define an empty method. To reduce the impact of unnecessary event dispatching on the rendering layer logic layer communication. Note: Please avoid too frequent execution in onPageScroll setData Etc Logical Layer - Render Layer Communication Operation of. In particular, each time a large amount of data is transmitted, the communication time will be affected.

# onAddToFavorites(Object object)

This interface is a beta version, which is supported from Android 7.0.15, and is only supported on Android platform temporarily

Monitor the user's behavior of clicking the "Collection" button in the upper right corner menu, and customize the collection content.

Parameter Object :

This event handler needs to return an object to customize the collection content:

Sample code

 Page ( {
   onAddToFavorites ( res )  {
     //The webview page returns the webViewUrl console . log ( 'webViewUrl: ' , res . webViewUrl )
     return  { title :  'Custom title' , imageUrl :  ' http://demo.png ' , query :  'name=xxx&age=xxx' ,
     }
   }
 } )

# onShareAppMessage(Object object)

Listen to the user click the forward button in the page（ button assembly open-type="share" ）Or the behavior of the "Forward" button in the upper right corner menu, and customize the forwarding content.

Note: The "Forward" button will be displayed in the upper right corner menu only when this event handling function is defined

Parameter Object :

This event handler needs to return an object to customize the forwarding content. The returned content is as follows:

Customize forwarding content Basic library 2.8.1 Start sharing pictures to support cloud pictures.

Sample code

Preview the effect in the developer tool

 Page ( {
   onShareAppMessage ( )  {
     const promise =  new  Promise ( resolve  =>  {
       setTimeout ( ( )  =>  {
         resolve ( { title :  'Custom forwarding header'
         } )
       } ,  two thousand )
     } )
     return  { title :  'Custom forwarding header' , path :  '/page/user? id=123' , promise }
   }
 } )

# onShareTimeline()

The basic database starts from 2.11.3, and the lower version needs to do Compatible processing 。

This interface is a beta version, which is only supported on Android platform temporarily. See details Share to the circle of friends (Beta)

Monitor the behavior of the "Share to the circle of friends" button in the upper right menu, and customize the content to be shared.

Note: Only when this event handling function is defined, the "Share to Friends" button will be displayed in the upper right corner menu

Customize forwarding content

The event handling function returns an object for user-defined sharing content. It does not support user-defined page paths. The returned content is as follows:

# onResize(Object object)

Basic database 2.4.0 starts to support, and the lower version needs to do Compatible processing 。

Triggered when the page size changes. See Response to display area changes

# onTabItemTap(Object object)

The basic library is supported from 1.9.0, and the lower version needs to do Compatible processing 。

Triggered when tab is clicked

Object parameter description:

Sample code:

 Page ( {
   onTabItemTap ( item )  { console . log ( item . index ) console . log ( item . pagePath ) console . log ( item . text )
   }
 } )

# onSaveExitState()

The basic database starts from 2.7.4, and the lower version needs to do Compatible processing 。

Page callback function whenever an applet may be destroyed onSaveExitState Will be called and can be used Exit status Save.

# Component event handler

Page Component event handlers can also be defined in. Add to the components of the render layer Event Binding , when the event is triggered, the event handling function defined in Page will be executed.

Sample code:

Preview the effect in the developer tool

 < view  bindtap = " viewTap " > click me </ view >

 Page ( {
   viewTap :  function ( )  { console . log ( 'view tap' )
   }
 } )

# Page.route

Basic library 1.2.0 starts to support, and the lower version needs to do Compatible processing 。

Path to the current page, type: String 。

 Page ( {
   onShow :  function ( )  { console . log ( this . route )
   }
 } )

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

setData The function is used to send data from the logical layer to the view layer (asynchronous), and change the corresponding this.data The value of (synchronous).

# Parameter Description

Object with key: value In the form of this.data In key The corresponding value is changed to value 。

among key It can be given in the form of data path. It supports changing an item in the array or an attribute of an object, such as array[2].message ， a.b.c.d , and does not need to be predefined in this.data.

be careful:

1. Modifying this.data directly without calling this.setData cannot change the status of the page, and will also cause data inconsistency 。
2. Only JSONable data can be set.
3. The data set at a time cannot exceed 1024kB. Please try to avoid setting too many data at a time.
4. Please do not set the value of any item in the data to undefined Otherwise, this item will not be set and may leave some potential problems.

Sample 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 :  zero , array :  [ { text :  'init data' } ] , object :  { text :  'init data'
     }
   } ,
   changeText :  function ( )  {
     //This.data.text='changed data'//Do not modify this.data directly
     //SetData should be used
     this . setData ( { text :  'changed data'
     } )
   } ,
   changeNum :  function ( )  {
     //Alternatively, you can set the modified fields with setData immediately after modifying this.data
     this . data . num =  one
     this . setData ( { num :  this . data . num } )
   } ,
   changeItemInArray :  function ( )  {
     //For an object or array field, you can directly modify a child field under 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'
     } )
   }
 } )

# Inter page communication

The basic database starts from 2.7.3, and the lower version needs to do Compatible processing 。

If one page is passed by another page wx.navigateTo Open, and a data channel will be established between the two pages:

• The opened page can be accessed through this.getOpenerEventChannel() Method to obtain a EventChannel Object;
• wx.navigateTo Of success The callback also contains a EventChannel Object.

these two items. EventChannel Can be used between objects emit and on Methods send and listen to events each other.

Preview the effect in the developer tool