tencent cloud

Feedback

Last updated: 2024-07-12 18:45:48

    Page(Object object)

    Register a page in the Mini Program. Take one. Object Type parameters that specify initial data for the page, lifecycle callbacks, event handlers, and so on.

    parameter

    Object object
    attribute
    type
    default
    required
    Introductions
    data
    Object
    -
    -
    Initial data for the page
    onLoad
    function
    -
    -
    Lifecycle callbackMonitor page loading
    onShow
    function
    -
    -
    Lifecycle callbackMonitor page display
    onReady
    function
    -
    -
    Lifecycle callbackMonitor Page Initial Rendering Completed
    onHide
    function
    -
    -
    Lifecycle callbackMonitor Page Hiding
    onUnload
    function
    -
    -
    Lifecycle callbackListen Page Uninstall
    function
    -
    -
    Listen for user drop-down actions
    function
    -
    -
    Handle function for bottoming event on page
    function
    -
    -
    User click on the upper right to forward
    function
    -
    -
    Handler for page scrolling trigger event
    function
    -
    -
    At present tab Page, click tab Time trigger
    Other
    any-
    -
    -
    Other developers can add arbitrary functions or data to the Object parameter, which can be accessed in the page's function with this. This portion of the property is made a deep copy when the page instance is created.
    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 in the first rendering of the pageInitial data。
    When the page loads,data Will be JSON The string form is passed from the logical layer to the render layer, so data in must be converted toJSONType: string, number, boolean, object, array.
    The render layer can be created by WXML Bind data.
    Sample code:
    <view>{{text}}</view>
    <view>{{array[0].msg}}</view>
    Page({
    data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
    }
    })

    Lifecycle callback function

    Triggering of the lifecycle and routing of the page Logic Layer.

    onLoad(Object query)

    Triggered when the page loads. A page will be called only once, and can be called in the onLoad Gets the parameters in the path to open the current page.
    Parameters:
    Name
    type
    Introductions
    query
    Object
    Open parameters in the current page path

    onShow()

    Page display/Triggered when entering the front desk.

    onReady()

    Triggered when the initial rendering of the page is complete. A page is called only once, meaning the page is ready to interact with the view layer.
    Note: to set the interface content API Such as wx.setNavigationBarTitle, in theonReadyAfter that. See for details Life cycle.

    onHide()

    Page concealment/Triggered when you cut into the background. Such as wx.navigateTo Or bottom tab Switch to other pages, Mini Programs into the background, etc.

    onUnload()

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

    Page event handler

    onPullDownRefresh()

    Listen for user drop-down refresh events;
    Need to app.json of window option, or Page Configuration enablePullDownRefresh;
    Can be passed wx.startPullDownRefresh triggers a drop-down refresh, and then triggers a pull-down refresh animation. The effect is consistent with the user's manual pulldown refresh;
    After processing the data refresh , wx.stopPullDownRefresh can stop the drop-down refresh of the current page.

    onReachBottom()

    Listen for user bottom-up events.
    Can be app.json of window option, or Page Configuration onReachBottomDistance;
    This event will be triggered only once during slippage within the trigger distance.

    onPageScroll(Object object)

    Listens for user sliding page events.
    parameter Object object:
    attribute
    type
    Introductions
    scrollTop
    Number
    Distance a page has been scrolled vertically (in px)
    Note:
    Please only be present when needed. page Do not define an empty method. To reduce the impact of unnecessary event dispatch on rendering layer - logic layer communication.
    Please avoid onPageScroll Too frequent execution in setData Equal cause Logic Layer and Render Layer Communication operations. In particular, each transmission of large amounts of data will affect the communication time.

    onShareAppMessage(Object object)

    Listen to the user click on the in-page forward on button assembly open-type="share"Or the upper-right menu "Forward" on behavior, and customize the forward content.
    Note:
    The Forward on is displayed on the upper-right menu only if this event handler is defined.
    parameter Object object:
    parameter
    type
    Introductions
    from
    String
    Forward the source of the event.
    button:: In-page forward on
    menu:: Retweet menu on top right
    target
    Object
    if from The value is buttonThen target That triggered this retweet. button, otherwise undefined
    WebViewUrl
    String
    The page contains web-view, returns the current web-view
    string
    Where users click to share
    This event handler function needs to return an Object, which is used to customise the forwarding content, the return content is as follows:
    fields
    type
    description
    default
    title
    string
    Forwarding Title
    Current mini program name
    path
    string
    Forwarding Path
    Current page path, must be a full path starting with /.
    imageUrl
    string
    Custom image url, can be a local file url, a package file url or a network image url. Support PNG and JPG, display image aspect ratio is 5:4
    Use default screenshot
    entryDataHash
    string
    Listen to the user clicking the in-page forward button, only with this parameter, fast sharing will be supported
    -
    shareType
    string
    Specify the type of share
    "miniapp"
    
    Description of the shareTarget parameter:
    
    Value
    Description
    0
    Share to QQ friends
    1
    Share to QQ space
    2
    Open from current chat window, quickly share to current chat window
    3
    Share to WeChat friends
    4
    Share to WeChat Friends
    5
    Share panel to recent contacts
    6
    Share to Quick Share Friends List
    
    Description of the shareType parameter:
    
    Used to specify the type of sharing, currently there are two types of sharing, one is to share a mini program and the other is to share an image.
    Value
    Description
    "miniapp"
    Shared as a mini program, the title, path, imageUrl, entryDataHash parameters take effect
    "picture"
    Shared as a picture, imageUrl, entryDataHash parameters will take effect
    Sample code:
    Page({
    onShareAppMessage(res) {
    if (res.from === 'button') {
    // From the in-page forwarding button
    console.log(res.target)
    }
    return {
    title: 'Custom Forwarding Title',
    path: '/page/user?id=123'
    }
    }
    })

    onCustomBack()

    Listen to the event of user back to previous page.
    You need to enable customNavigateBack in the window option of app.json or in the Page Configuration;
    This event will be triggered if you click tabBar to go back, or if you swipe or back key to go back.

    onTabItemTap(Object object)

    to hit tab Time trigger.
    Object Parameter explaination:
    parameter
    type
    Introductions
    index
    String
    Number of tabItem clicked, starting with 0
    pagePath
    String
    Page path of tabItem clicked
    text
    String
    Click tabItem on text
    Sample code:
    Page({
    onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
    }
    })

    Component event handler

    Page Component event handlers can also be defined in. In the components of the render layer Event binding is executed when an event is triggered Page The event handler defined in the.
    Sample code:
    <view bindtap="viewTap"> click me </view>
    Page({
    viewTap: function() {
    console.log('view tap')
    }
    })

    Page.route

    Path to the current page of typeString.
    Page({
    viewTap: function() {
    console.log('view tap')
    }
    })

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

    setData Function is used to send data from the logical layer to the view layer (asynchronously), changing the corresponding this.data Is synchronized.
    Parameter specification
    field
    type
    Required
    describe
    data
    Object
    yes
    The data to be changed this time
    callback
    Function
    no
    Interface update caused by setData after rendering
    Object with key: value In the form of this.data to hit the target key The corresponding value is changed to value。
    among key Can be given in the form of a data path, supporting changing an item in an array or a property of an object, such as array[2].message,a.b.c.dAnd does not require this.data Predefined in.
    Note
    Direct modification this.data Without calling this.setData Can not change the state of the page, but also cause data inconsistencies;
    Supports settings only JSON Data;
    A single set of data can not exceed 1024kB, try to avoid a set of too much data;
    Please don't data Any of the value Set to undefined Otherwise this item will not be set and may leave some potential problems.
    Sample code:
    <!--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' // Don't change this.data directly.
    // You should use setData
    this.setData({
    text: 'changed data'
    })
    },
    changeNum: function() {
    // Alternatively, you can modify this.data and then immediately set the modified field with setData.
    this.data.num = 1
    this.setData({
    num: this.data.num
    })
    },
    changeItemInArray: function() {
    // For object or array fields, you can modify a subfield directly under it, which is usually better than modifying the whole 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'
    })
    }
    })

    PageObject[] getCurrentPages()

    Get the current pages stack. The first element in the array is the first page and the last element is the current page.

    Cautions

    Don't try to modify the page stack, it will lead to routing and page state errors;
    Don't call getCurrentPages() when App.onLaunch is running, the page has not been generated yet.
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support