注册页面

index.vue

在小程序中，/pages/{pageName}/index.vue 是页面入口文件，开发者需要遵守约定。

页面与其他vue单文件组件不同的是，它具有小程序框架层的生命周期回调。代码写法与vue单文件组件基本没有差别。

如果是其他自定义组件，则没有小程序页面独有的生命周期（onLoad等）、页面事件（onPageScroll等）等回调了。

示例代码

<template>
    <div>
        <h1>bilibili 小程序</h1>
        <p>{{message}}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: ''
        };
    },
    onLoad(query) {
        console.log(query);
    },
    onReady() {
        this.message = 'Hello World';
    },
    onPageScroll(event) {
        console.log(event);
    },
    methods: {
        handleMethod() {
            // ...
        }
    }
};
</script>

<style>
</style>

data

data 是页面第一次渲染使用的初始数据。请遵照vue单文件的写法。

最佳实践：尽量把初次渲染的数据，不依赖网络的数据写进data，这样首屏渲染时无需等待网络即可看见页面框架，页面加载性能更优秀。

页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组 。这里跟直接使用vue略有不同，vue的data可以使用一些并不能JSON反序列化的数据类型，比如Date。

生命周期回调说明

重要提示：因为小程序架构是逻辑与渲染分离的，使用生命周期尽量使用小程序提供的onReady/onShow等，vue的生命周期created/mounted等虽然也可以使用，但是不表达小程序框架层面的意义

小程序页面生命周期如下：

事件回调说明

小程序页面还支持一些特定事件的回调：

生命周期回调函数

生命周期的触发以及页面的路由方式详见 路由概览。

onLoad(query)

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

参数说明

onShow()

页面显示/切入前台时触发。

onReady()

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。 注意：对界面内容进行设置的 API 如bl.setNavigationBarTitle，请在onReady之后进行。

onHide()

页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

onUnload()

页面卸载时触发。如redirectTo或navigateBack到其他页面时。

页面事件处理函数

onPullDownRefresh()

监听用户下拉刷新事件。

• 需要在app.json的window选项中或页面配置中设置enablePullDownRefresh为true。
• 可以通过bl.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
• 当处理完数据刷新后，bl.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom()

监听用户上拉触底事件。

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

onPageScroll(Object object)

监听用户滑动页面事件。

• 需要在app.json的window选项中或页面配置中设置enableScrollEvent为true。

object 参数说明：

onShareAppMessage()

监听用户点击页面右上角菜单“转发”按钮的行为，并自定义转发内容。

此事件处理函数需要 return 一个 Object，用于自定义转发内容，返回内容如下：

自定义转发内容

Tips

分享动态支持大卡片，具体设置可查看小程序开发指南--开放能力--转发

onTabItemTap(Object object)

基础库版本 >= 2.5.0 支持

点击 tab 时触发

object 参数说明：

onWindowResize(function callback)

监听窗口尺寸变化事件

function callback

窗口尺寸变化事件的回调函数

参数

Object res

res的结构

onKeyboardChange(Object object)

键盘弹起或收起时触发，仅 iOS 支持，且SDKVersion >= 2.0.0

object 参数说明：

组件事件处理函数

Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数。

this.route

到当前页面的路径，类型为string。

this.setData(Object data)

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.$data 的值（同步）。

与微信不同的是，这里既可以使用setData，也可以使用vue传统的通过this更新data的方式

setData的用法与微信一致，但是推荐使用vue的传统方法，更高效

参数说明

Object 以 key: value 的形式表示，将 this.$data 中的 key 对应的值改变成 value。

其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d

注意：Vue不支持在this.$data跟节点增加未定义的属性，setData也不可以，非跟节点的属性可以不用预先定义，但是要使用setData或者Vue.set进行操作

注意：

1. 仅支持设置可 JSON 化的数据。
2. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
3. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

生命周期

下图说明了 Page 实例的生命周期。