The“Page”for page display and interactionrepresents a page of the application. Each page corresponds to a subdirectory. Generally, the number of pages is as many as subdirectories. It is also a constructor forgenerating page instances.

Page initialization

When the page is initialized, you need to provide data as the first rendering of the page:

<view>{{title}}</view>
<view>{{array[0].user}}</view>

Page({
    data: {
        title: 'Alipay',
        array: [{
            user: 'li'
        },
        {
            user: 'zhao'
        }]
    }
})

When defining the interaction behavior, you need to specify the response function in the page script:

<view onTap="handleTap">click me</view>

The handleTap method is called when users click the above template:

Page({
    handleTap() {
        console.log('yo! view tap!')
    }
})

To re-render the page, you need to call “this.setData” method in the page script.

<view>{{text}}</view>
<button onTap="changeText"> Change normal data </button>

The “changeText” method is called whenspecified users of the above code touch the button,

Page({
    data: {
        text: 'init data',
    },
    changeText() {
        this.setData({
            text: 'changed data'
        })
    },
})

In the above code, the calling of “this.setData” in the “changeText” method will cause the re-renderingof pages.

Page()

Page() accepts an “object” as a parameter, which is used to specify the initial data, lifecycle function, event processing function and others of the page.

//index.js
Page({
    data: {
        title: "Alipay"
    },
    onLoad(query) {
        // 页面加载
    },
    onReady() {
        // 页面加载完成
    },
    onShow() {
        // 页面显示
    },
    onHide() {
        // 页面隐藏
    },
    onUnload() {
        // 页面被关闭
    },
    onTitleClick() {
        // 标题被点击
    },
    onPullDownRefresh() {
        // 页面被下拉
    },
    onReachBottom() {
        // 页面被拉到底部
    },
    onShareAppMessage() {
        // 返回自定义分享信息
    },
    viewTap() {
        // 事件处理
        this.setData({
            text: 'Set data for updat.'
        })
    },
    go() {
        // 带参数的跳转，从 page/index 的 onLoad 函数的 query 中读取 xx
        my.navigateTo('/page/index?xx=1')
    },
    customData: {
        hi: 'alipay'
    }
})

In the above code, the parameter object of the “Page()” method is described as follows:

Note: If you modify “data” in the page, different instances of the page will be affected when “data” is an object.

Life cycle method

• onLoad：page loading. One page will only be called once, and the “query” parameters are the “query” objectpassed in“my.navigateTo” and “my.redirectTo”.
• onShow：page display. It will be called once every time the page is displayed.
• onReady：The first rendering of the page is completed. A page will only be called once, which means that the page is ready to interact with the presentation layer. For the setting of the interface like“my.setNavigationBar”, please set it after “onReady”.
• onHide：page hiding. It is called when you use“my.navigateTo” to switch to other pages or use “tab” at the bottom for switching.
• onUnload：page unloading. It is called when you use“my.redirectTo” or “my.navigateBack” to switch to other pages.

Event handlers

• onPullDownRefresh：Pull down to refresh. To monitor users in pull-downrefresh, “pullRefresh” needs to be opened in the window option of app.json. After processing the data refresh, “my.stopPullDownRefresh” can stop the pull-down refresh of the current page.
• onShareAppMessage：user sharing.

Page.prototype.setData()

The “setData” function is used to send data from the logical layer to the presentation layer, changing the corresponding value of “this.data” in the meantime.

Note:

• It’s invalid to modify “this.data” directly with failure to change the status of the page, causing inconsistent data as well.
• Please try to avoid setting too many data once.

“setData”receives an object as a parameter. The “key” nameof the object given in the form of data path can be very flexible, such as “array[2].message, a.b.c.d”, and does not need to be predefined in “this.data”.

Code example

<view>{{text}}</view>
<button onTap="changeTitle"> Change normal data </button>
<view>{{array[0].text}}</view>
<button onTap="changeArray"> Change Array data </button>
<view>{{object.text}}</view>
<button onTap="changePlanetColor"> Change Object data </button>
<view>{{newField.text}}</view>
<button onTap="addNewKey"> Add new data </button>

Page({
    data: {
        text: 'test',
        array: [{
            text: 'a'
        }],
        object: {
            text: 'blue'
        }
    },
    changeTitle() {
        // 错误！不要直接去修改 data 里的数据
        // this.data.text = 'changed data'
        // 正确
        this.setData({
            text: 'ha'
        })
    },
    changeArray() {
        // 可以直接使用数据路径来修改数据
        this.setData({
            'array[0].text': 'b'
        })
    },
    changePlanetColor() {
        this.setData({
            'object.text': 'red'
        });
    },
    addNewKey() {
        this.setData({
            'newField.text': 'c'
        })
    }
})

getCurrentPages()

The “getCurrentPages()” function is used to obtain the instance of the current page stack, which is given in stack order in the form of array. The first element is the homepage, and the last element is the current page. The following code can be used to detect whether there’s depth of 5 levels in the current page.

if (getCurrentPages().length === 5) {
    my.redirectTo('/xx');
} else {
    my.navigateTo('/xx');
}

Note: Don’t try to modify the page stack, otherwise it will cause routing and page status errors.

The framework maintains all current pages in the form of stack. When routing switch occurs, the performance of the page stack is as follows:

page.json

The “[page name].json” filecan also be used ineach pageto configure the window performance of the current page.

The configuration of the page is much simpler than the global configuration of “app.json”. Only window-related configuration items can be set, so there is no need to write the “window” key. Please note that the page configuration will override the configuration items in the window attribute of “app.json”.

It especially supports navigation icon of “optionMenu” configuration. And click it to trigger “onOptionMenuClick”.

例如：

{
    "optionMenu": {
        "icon": "https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png"
    }
}

page style

The root element in each page is “page”.You can use this element when you need to set the height or background color.

page {
    background - color: #fff;
}