HomeDocs
跳到主要内容

注册页面 Page(Object object)

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

参数​

Object object

属性类型默认值必填说明最低版本
dataObject页面的初始数据1.0.0
onLoadfunction生命周期回调—监听页面加载1.0.0
onShowfunction生命周期回调—监听页面显示1.0.0
onReadyfunction生命周期回调—监听页面初次渲染完成1.0.0
onHidefunction生命周期回调—监听页面隐藏1.0.0
onUnloadfunction生命周期回调—监听页面卸载1.0.0
onPullDownRefreshfunction监听用户下拉动作1.0.0
onReachBottomfunction页面上拉触底事件的处理函数1.0.0
onPageScrollfunction页面滚动触发事件的处理函数1.0.0

示例代码​

//index.js
Page({
  data: {
    text: 'This is page data.',
  },
  onLoad: function (options) {
    // 页面创建时执行
  },
  onShow: function () {
    // 页面出现在前台时执行
  },
  onReady: function () {
    // 页面首次渲染完毕时执行
  },
  onHide: function () {
    // 页面从前台变为后台时执行
  },
  onUnload: function () {
    // 页面销毁时执行
  },
  onPullDownRefresh: function () {
    // 触发下拉刷新时执行
  },
  onReachBottom: function () {
    // 页面触底时执行
  },
  // 事件响应函数
  viewTap: function () {
    this.setData(
      {
        text: 'Set some data for updating view.',
      },
      function () {
        // this is setData callback
      }
    );
  },
  // 自由数据
  customData: {
    hi: 'MINA',
  },
});

data​

data 是页面第一次渲染使用的初始数据。 页面加载时，data 将会以 JSON 字符串的形式由逻辑层传至渲染层，因此 data 中的数据必须是可以转成 JSON 的类型：字符串，数字，布尔值，对象，数组。

渲染层可以通过 DLT 对数据进行绑定。

示例代码：

<!--pages/index/index.dlt-->
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
// pages/index/index.js
Page({
  data: {
    text: 'init data',
    array: [{ msg: '1' }, { msg: '2' }],
  },
});

生命周期回调函数​

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

onLoad(Object query)​

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

参数 Object query​

名称类型说明
queryObject打开当前页面路径中的参数

onShow()​

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

onReady()​

页面初次渲染完成是触发。一个页面只会调用一次，代表页面当前已经准备妥当，可以和视图层进行交互。

注意：对界面内容进行设置的 API 如 dlt.setNavigationBarTitle，请在 onReady 之后进行。

onHide()​

页面隐藏/切入后台时触发。如 dlt.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
特别说明：在极少部分手机上，当页面进入后台，会被系统迅速销毁，导致 onHide() 中的部分逻辑未能执行完成。

onUnload()​

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

页面事件处理函数​

onPullDownRefresh()​

监听用户下拉刷新事件。

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

onReachBottom()​

监听用户上拉触底事件。

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

onPageScroll(Object object)​

监听用户滑动页面事件。

参数 Object object​

属性类型说明
scrollTopNumber页面在垂直方向已滚动的距离（单位 px）

注意：请只在需要的时候才在 page 中定义此方法，不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。 注意：请避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据，会影响通信耗时。

组件事件处理函数​

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

示例代码：

<view bindtap="viewTap"> click me </view>
// pages/index/index.js

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

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

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

参数说明​

字段类型必填描述
dataNumber是这次要改变的数据1.0.0
callbackFunction否setData 引起的界面更新渲染完毕后的回调函数3.10.0

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。 其中 key 可以非常灵活，以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message、a.b.c.d。需要在 this.data 中预先定义。

注意：

  1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
  2. 仅支持设置可 JSON 化的数据。
  3. 请尽量避免一次设置过多的数据。
  4. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。
<!-- pages/index/index.dlt -->
<view>{{text}}</view>
<button bind:tap="changeText">Change normal data</button>
<view>{{num}}</view>
<button bind:tap="changeNum">Change normal num</button>
<view>{{array[0].text}}</view>
<button bind:tap="changeItemInArray">Change Array data</button>
<view>{{object.text}}</view>
<button bind:tap="changeItemInObject">Change Object data</button>
<view>{{newField.text}}</view>
<button bind:tap="addNewField">Add new data</button>
// pages/index/index.js
Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{ text: 'init data' }],
    object: {
      text: 'init data',
    },
  },
  changeText: function () {
    // this.data.text = 'changed data' // 不要直接修改 this.data
    // 应该使用 setData
    this.setData({
      text: 'changed data',
    });
  },
  changeNum: function () {
    // 或者，可以修改 this.data 之后马上用 setData 设置一下修改了的字段
    this.data.num = 1;
    this.setData({
      num: this.data.num,
    });
  },
  changeItemInArray: function () {
    // 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
    this.setData({
      'array[0].text': 'changed data',
    });
  },
  changeItemInObject: function () {
    this.setData({
      'object.text': 'changed data',
    });
  },
  addNewField: function () {
    this.setData({
      'newField.text': 'new data',
    });
  },
});

Page.prototype.spliceData(Object data, Function callback)​

spliceData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。 spliceData 同样用于将数据从逻辑层发送到视图层，但是相比于 setData，在处理长列表的时候，其具有更高的性能。

说明：spliceData 自 3.9.0 之后才支持，可以使用 dlt.canIUse('page.spliceData') 做兼容性处理。

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message、a.b.c.d，需要在 this.data 中预先定义。value 为一个数组（格式：[start, deleteCount, ...items]）, 数组的第一个元素为操作的起始位置，第二个元素为删除的元素的个数，剩余的元素均为插入的数据。对应 es5 中数组的 splice 方法。

参数说明​

字段类型必填描述
dataNumber是这次要改变的数据3.9.0
callbackFunction否spliceData 引起的界面更新渲染完毕后的回调函数3.10.0
<!-- pages/index/index.dlt -->
<button bind:tap="spliceDataFun"> splice new data </view>
<view class="spliceData">
  <view s-for="(item, index) in a.b" :key="index" class="spliceData-item">
    {{item}}
  </view>
</view>
Page({
  data: {
    a: {
      b: [1, 2, 3, 4],
    },
  },
  spliceDataFun() {
    this.spliceData({ 'a.b': [1, 0, 5, 6] }, () => {
      // 回调只在 3.10.0 后版本支持
      console.log('new data is: ', this.data.a.b);
    });
  },
});
Privacy agreementDeveloper agreementcontact us: developer_private.mi@dlightek.com © 2024 MiniApp. All Rights Reserved.