Page(Object object)

Register a page in the applet. Accept one Object Type parameter, which specifies the initial data of the page, lifecycle callbacks, event handling functions, and so on.

parameter

Object object
attribute type Default value Required explain
data Object Initial data of the page
onLoad function Load callback - monitor page
onShow function Lifecycle callback - listening page display
onReady function Lifecycle callback - listen to the completion of the first rendering of the page
onHide function Lifecycle callback - listening page hidden
onUnload function Lifecycle callback - listen to page unload
onPullDownRefresh function Monitor user pull down actions
onReachBottom function Handle function of bottom pull event on page
onShareAppMessage function The user clicks forward in the upper right corner
onShareTimeline function Users click on the top right corner to forward to the circle of friends
onAddToFavorites function Users click on the top right corner to collect
onPageScroll function Page scrolling events triggered by function
onResize function Triggered when page size changes. See Response display area change
onTabItemTap function When the current tab page is selected, it will be triggered when you click tab
other any Developers can add any function or data to Object Parameter, in the function of the page this Can be accessed

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 Is used for the first rendering of the page Initial data

When the page is loaded, data Will be JSON The form of a string is passed from the logic layer to the render layer, so data The data in must be able to be converted into JSON Type of: string, number, Boolean, object, array.

Render layers can be accessed through WXML Bind the data.

Example code:

Preview effects in developer tools

 < view > {{text}} </ view >
 < view > {{array[0].msg}} </ view >
 Page ( { data :  { text :  'init data' , array :  [ { msg :  '1' } ,  { msg :  '2' } ]
   }
 } )

Lifecycle callback function

Trigger the life cycle and route the page See

onLoad(Object query)

Trigger page when loading. Call the onload parameter in the current page only once.

Parameters:

name type explain
query Object Open the parameters in the current page path

onShow()

Triggered when the page is displayed / entered the foreground.

onReady()

Triggered when the first rendering of the page is complete. A page is called only once, which means that the page is ready to interact with the view layer.

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

onHide()

Triggered when the page is hidden / cut into the background. as wx.navigateTo Or bottom tab Switch to other pages, applet into the background, etc.

onUnload()

Triggered when the page is unloaded. as wx.redirectTo or wx.navigateBack To other pages.

Page event handler

onPullDownRefresh()

Listen for user pull-down refresh events.

  • Need to be in app.json Of window Options or Page configuration Middle open enablePullDownRefresh
  • It can be done through wx.startPullDownRefresh Trigger the pull-down refresh, and trigger the pull-down refresh animation after calling, the effect is consistent with the user's manual pull-down refresh.
  • When the data is refreshed after processing, wx.stopPullDownRefresh You can stop the drop-down refresh of the current page.

onReachBottom()

Monitor user pull-up and bottom touch events.

  • Can be in app.json Of window Options or Page configuration Setting trigger distance in onReachBottomDistance
  • During sliding within the trigger distance, this event will only be triggered once.

onPageScroll(Object object)

Listen for user sliding page events.

Parameter object :

attribute type explain
scrollTop Number The distance (in PX) that the page has scrolled in the vertical direction

Note: please define this method in page only when necessary, do not define empty method. To reduce the impact of unnecessary event dispatch on rendering layer logic layer communication. Note: avoid frequent execution in onpagescroll setData Etc Logic layer rendering layer communication Operation of. Especially when a large amount of data is transmitted each time, the communication time will be affected.

onAddToFavorites(Object object)

This interface is beta version, which is supported by Android version 7.0.15 and only supported on Android platform for the moment

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

Parameter object :

parameter type explain
webviewUrl String Page contains web-view Component, returns the current web-view URL of

This event handling function needs to return an object, which is used to customize the collection content:

field explain Default value
title Custom title Page title or account name
imageUrl Custom picture, display picture aspect ratio is 1:1 Screen shot
query Query custom field Query's current page

Sample code

 Page ( {
   onAddToFavorites ( res )  {
     //The WebView page returns 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 on the page( button assembly open-type="share" )Or "forward" button in the upper right corner menu, and customize the forwarding content.

Note: only when this event handler is defined will the forward button be displayed in the upper right-hand menu

Parameter object :

parameter type explain Minimum version
from String Forward the source of the event.
button : on page forward button;
menu : forward menu in the upper right corner
1.2.4
target Object If from The value is button , then target This forwarding event was triggered button , otherwise undefined 1.2.4
webViewUrl String Page contains web-view Component, returns the current web-view URL of 1.6.4

This event handling function needs to return an object, which is used to customize the forwarding content. The returned content is as follows:

Custom forwarding content Basic library 2.8.1 Share pictures and support cloud images.

field explain Default value Minimum version
title Forward title Current applet name
path Forwarding path The current page path, which must be a full path starting with /
imageUrl It can be a path to a local network file or a path to a picture file. Support PNG and jpg. The aspect ratio of the display image is 5:4. Use default screenshot 1.5.0

Sample code

Preview effects in developer tools

 Page ( {
   onShareAppMessage :  function  ( res )  {
     if  ( res . from ===  'button' )  {
       //From on page forward button console . log ( res . target )
     }
     return  { title :  Custom forward title ' , path :  '/page/user?id=123'
     }
   }
 } )

onShareTimeline()

Basic library 2.11.3 starts to support, low version needs to be done Compatible processing

This interface is beta version, which is only supported on Android platform. Please refer to Share with friends (beta)

Enjoy the "share" button in the right corner of the "share" menu.

Note: only when this event handler is defined will the "share to friends" button be displayed in the upper right-hand corner

Custom forwarding content

The event handling function returns an object, which is used to customize the shared content. The custom page path is not supported. The returned content is as follows:

field explain Default value Minimum version
title Custom title Current applet name
query Parameters carried in the custom page path Parameters carried by the current page path
imageUrl Custom image path, can be local file or network image. Support PNG and JPG, display image aspect ratio is 1:1. By default, the applet logo is used

onResize(Object object)

2.0, need to support the basic library Compatible processing

When the applet rotates the screen. See Response display area change

onTabItemTap(Object object)

Basic library 1.9.0 starts to support, low version needs to be done Compatible processing

Triggered when tab is clicked

Object parameter description:

parameter type explain Minimum version
index String The serial number of the tabitem to be clicked, starting from 0 1.9.0
pagePath String The path of the tabitem to be clicked 1.9.0
text String The button text of the selected tabitem 1.9.0

Example code:

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

Component event handler

Page You can also define component event handling functions in. Add to the components of the render layer Event binding When the event is triggered, the event handler defined in page is executed.

Example code:

Preview effects in developer tools

 < view  bindtap = " viewTap " > click me </ view >
 Page ( {
   viewTap :  function ( )  { console . log ( 'view tap' )
   }
 } )

Page.route

Basic library 1.2.0 starts to support, low version needs to be done Compatible processing

Path to the current page of type String

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

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

setData Function is used to send data from the logical layer to the view layer (asynchronously) while changing the corresponding this.data Value of (synchronous).

Parameter description

field type Required describe Minimum version
data Object yes The data to be changed this time
callback Function no Callback function after rendering interface update caused by SetData 1.5.0

Object with key: value Will be this.data Medium key The corresponding value changes 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 it doesn't need to be pre-defined in this. Data.

be careful:

  1. Modifying this.data directly without calling this.setdata cannot change the state of the page, and will cause data inconsistency
  2. Only data that can be JSON set is supported.
  3. Try to avoid setting more than 1024KB 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 some potential problems may be left behind.

Example code:

Preview effects in developer tools

 <!--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 use SetData to set the modified field 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 modify a subfield directly below 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

Basic library 2.7.3 starts to support, low version needs to be done Compatible processing

If one page is passed by another page wx.navigateTo Open, 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 each other.

Preview effects in developer tools