Mini Program Development Page Sample Code

Page(Object object)

Dongguan mini program development page sample code, register a page in the mini program. Accepts an Object type parameter, which specifies the page's initial data, lifecycle callbacks, event handling functions, etc.

parameter

Object object

Dongguan applet development page sample code

 //index.jsPage({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page is ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  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 reaches 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'
  }})

Small program development data

data is the initial data used when the page is first rendered.

When the page is loaded, data will be passed from the logic layer to the rendering layer in the form of a JSON string, so the data in data must be a type that can be converted to JSON: string, number, Boolean value, object, array.

The rendering layer can bind data via WXML.

Mini program development data sample code:

Preview the effect in the developer tools

 <view>{{text}}</view><view>{{array[0].msg}}</view>

 Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }})

Mini Program Development Life Cycle Callback Function

For details on triggering the life cycle and page routing, see

onLoad(Object query)

Fired when the page loads. A page will only be called once, and the parameters in the path of the current page can be obtained in the onLoad parameters.

parameter:

onShow()

Fired when the page is displayed/cut into the foreground.

onReady()

Fired when the initial rendering of the page is complete. A page is called only once, indicating that the page is ready to interact with the view layer.

Note: APIs that set interface content, such as wx.setNavigationBarTitle, should be executed after onReady. See Life Cycle for details.

onHide()

Triggered when the page is hidden/entered the background. For example, wx.navigateTo or the bottom tab switches to other pages, and the mini program goes to the background.

onUnload()

Fired when the page is unloaded. Such as wx.redirectTo or wx.navigateBack to other pages.

Page event handling function

onPullDownRefresh()

Listen for the user's pull-to-refresh event.

• You need to enable enablePullDownRefresh in the window option of app.json or in the page configuration.
• You can trigger a pull-down refresh through wx.startPullDownRefresh, which triggers the pull-down refresh animation. The effect is the same as the user manually pulling down to refresh.
• After processing the data refresh, wx.stopPullDownRefresh can stop the pull-down refresh of the current page.

onReachBottom()

Listen for the user's pull-up bottoming event.

• You can set the trigger distance onReachBottomDistance in the window option of app.json or in the page configuration.
• This event will only be triggered once while sliding within the trigger distance.

onPageScroll(Object object)

Listen for user page sliding events.

ParametersObject 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 dispatch on rendering layer-logic layer communication. Note: Please avoid executing operations such as setData too frequently in onPageScroll that cause communication between the logic layer and the rendering layer. In particular, when a large amount of data is transmitted each time, it will affect the communication time.

onShareAppMessage(Object object)

Monitor the user's behavior of clicking the forward button on the page (button component open-type="share") or the "Forward" button in the upper right corner menu, and customize the forwarded content.

Note: Only when this event handler is defined, the "Forward" button will be displayed in the upper right corner menu

ParametersObject object:

This event handler function needs to return an Object for custom forwarding content. The returned content is as follows:

Starting from the custom forwarding content basic library 2.8.1, shared pictures support cloud pictures.

Sample Code

Preview the effect in the developer tools

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

onResize(Object object)

Support is available starting from basic library 2.4.0, and compatibility with lower versions is required.

Triggered when the applet screen is rotated. See Response Display Area Changes for details.

onTabItemTap(Object object)

Support is available starting from the basic library 1.9.0, and compatibility with lower versions is required.

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)
  }})

Component event handling function

Component event handling functions can also be defined in Page. Add event binding to the component of the rendering layer. When the event is triggered, the event processing function defined in the Page will be executed.

Sample code:

Preview the effect in the developer tools

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

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

Page.route

Support is available starting from the basic library 1.2.0, and compatibility with lower versions is required.

The path to the current page, of type String.

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

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

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

Mini Program Development Page Parameter Description

Object is represented in the form of key: value. Change the value corresponding to key in this.data to value.

The key can be given in the form of a data path, which supports changing an item in an array or a property of an object, such as array[2].message, abcd, and does not need to be pre-defined in this.data.

Notice:

1. Directly modifying this.data without calling this.setData will not change the state of the page and will cause data inconsistency.
2. Only supports setting JSON-capable data.
3. The data set at a time cannot exceed 1024kB. Please try to avoid setting too much data at a time.
4. Please do not set the value of any item in data to undefined, otherwise the item will not be set and may leave some potential problems.

Sample code:

Preview the effect in the 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.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
    // should use setData
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    // Alternatively, you can modify this.data and then immediately use setData to set the modified field this.data.num = 1
    this.setData({
      num: this.data.num })
  },
  changeItemInArray: function() {
    // For object or array fields, you can directly modify a subfield 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'
    })
  }})