注册页面

Page

解释：Page 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

Object参数说明：

示例

Page({
    data: {
        text: 'swan data'
    },

    onLoad: function (options) {
        // do something when page load
    },

    onReady: function () {
        // do something when page ready
    },

    onShow: function () {
        // do something when page show
    },

    onHide: function () {
        // do something when page hide
    },

    onUnload: function () {
        // do something when page unload
    },
    onForceReLaunch: function () {
        // do something when page unload
    },    
    onPullDownRefresh: function () {
        // do something when pull down
    },

    onReachBottom: function () {
        // do something when page reach bottom
    },

    onShareAppMessage: function () {
        // return custom share data
    },

    onPageScroll: function () {
        // do something when page scroll
    },

    onTabItemTap: function (item) {
        console.log(item.index);
        console.log(item.pagePath);
        console.log(item.text);
    },
    customData: {}
});

初始化数据

解释：初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。

渲染层，通过SWAN模板，对数据进行绑定。

示例

Page({
    data: {
        name: 'swan'
    }
});

<view>{{name}}</view>

生命周期函数

注意

• 当页面被卸载时，前端基础库在触发onUnload的同时还触发了 onHide，onHide 共被触发2次。在新的基础库版本中，页面被卸载时会触发onUnload，同时 onHide 仍会被触发且仅被触发一次。请提前做好兼容性处理。
• 在解析 query 的时候，基础库会使用decodeURIComponent对query的参数值进行一次解码，该功能将在新的版本中下线。
• 如页面跳转时传递了 encode 后的值作为参数，为避免发生页面错误，使用时请自行将拿到的值使用decodeURIComponent进行一次decode操作。

页面相关事件处理函数

onPullDownRefresh

解释： 下拉刷新说明：监听用户下拉刷新事件。

• 需要在 app.json 的 window 选项中或页面配置中开启 enablePullDownRefresh 。
• 当处理完数据刷新后，swan.stopPullDownRefresh 可以停止当前页面的下拉刷新。

onReachBottom

解释：上拉触底说明：监听用户上拉触底事件。

• 可以在 app.json 的 window 选项中或页面配置中设置触发距离 onReachBottomDistance 。
• 在触发距离内滑动期间，本事件只会被触发一次。

onPageScroll

解释：页面滚动说明：监听用户滑动页面事件。参数为 Object，包含以下字段：

Object参数说明：

onShareAppMessage

解释：用户点击分享说明：用户点击转发按钮的时候会调用。此事件需要 return 一个 Object，用于自定义转发内容。

自定义转发字段

示例：

Page({
    onShareAppMessage: function () {
        return {
            title: '标题',
            path: '/pages/path/path'
        }
    }
});

事件处理函数

解释：
除了初始化数据和生命周期函数，Page 中还可以定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行 Page 中定义的事件处理函数。

示例：

<view bindtap="tap"> tap </view>

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

Page.prototype.setData

解释：setData 函数，用于将数据，从逻辑层发送到视图层，当开发者调用 setData 后，数据的变化，会引起视图层的更新。参数说明

说明：

• Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。
• 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
• 仅支持设置可 JSON 化的数据。
• 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。
  示例：

<view>{{name}}</view>
<view bindtap="tap">{{age}}</view>

Page({
    data: {
        name: '',
        age: 0
    },
    tap: function () {
        this.setData({'age': 1});
    }
});

注册程序页面路由