页面

更新时间 2024-07-24 02:58:49

我的收藏

注册页面

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

注册页面有两种方式：使用 Page 注册和使用 Component 构造器注册。

使用 Page 注册页面

简单的页面可以使用 Page() 进行注册。

JavaScript复制
//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.
  },
  onReachBottom: function () {
    // Do something when page reach bottom.
  },
  onPageScroll: function () {
    // Do something when page scroll
  },
  onResize: function () {
    // Do something when page resize
  },
  // Event handler.
  viewTap: function () {
    this.setData(
      {
        text: "Set some data for updating view.",
      },
      function () {
        // this is setData callback
      }
    );
  },
  // Custom Data
  customData: {
    hi: "hello",
  },
});

使用 Component 构造器注册页面

复杂的页面可以使用 Component 构造器来构造页面。

Component 构造器的主要区别是：方法需要放在 methods: { } 里面。

JavaScript复制
Component({ 
  data: {
    text: "This is page data.",
  },
  methods: {
    onLoad: function (options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function () {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function () {
      // ...
    },
  },
});

这种创建方式非常类似于自定义组件，可以像自定义组件一样使用 behaviors 等高级特性。

具体细节请阅读 Component 构造器。

使用 Component 构造器来构造的页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。具体用法参见 behaviors 。

page

page(params) 是进入某个页面的时候会执行的页面入口函数，params 是一个 object 类型的参数，定义了页面初始数据，生命周期函数，事件处理函数等。

params 参数说明

属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期函数--监听页面加载
onReady	Function	生命周期函数--监听页面初次渲染完成
onShow	Function	生命周期函数--监听页面显示
onHide	Function	生命周期函数--监听页面隐藏
onUnload	Function	生命周期函数--监听页面卸载
onResize	Function	生命周期函数--监听页面尺寸变化，在直播小程序卡片、POI 详情页商品入口的七分屏场景中使用。
onPullDownRefresh	Function	页面相关事件处理函数--监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	分享时触发，该钩子支持异步能力，允许在函数内 await Promise，具体可参考转发和挂载概述。
onUploadDouyinVideo	Function	发布抖音视频时触发，该钩子支持异步能力，允许在函数内 await Promise，具体可参考转发和挂载概述。
onLiveMount	Function	在抖音直播中挂载小程序锚点时触发，该钩子支持异步能力，允许在函数内 await Promise，具体可参考转发和挂载概述。
onPageScroll	Function	页面滚动触发事件的处理函数
其他	Any	开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问。

基础库版本2.91.0以下，如果不注册 onShareAppMessage，右上角胶囊按钮菜单里的分享按钮显示逻辑见：关于“更多面板分享按钮”显示逻辑的变更。

示例代码

初始数据

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

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

示例代码

html复制
<!-- index.ttml --> 
<view>{{text}}</view>
<view>{{array[0].msg}}</view>

js复制
// index.js
Page({
  data: {
    text: "init data",
    array: [{ msg: "1" }, { msg: "2" }],
  },
});

生命周期回调函数

onLoad生命周期函数会接受到当前页面打开时设置的query参数。比如：

JavaScript复制
// 页面url是'page/index/index?a=1&key=value'
...
onLoad: function (options) { 
    console.log(options) // {a: '1', key: 'value'}
}

页面生命周期的更多信息，请参见页面生命周期。

事件处理函数

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

示例代码

html复制
<!-- index.ttml -->
<view bindtap="viewTap"> click me </view>

js复制
// index.js
Page({ 
  viewTap: function () {
    console.log("view tap");
  },
});

更新页面渲染 setData()

字段	类型	必填	描述
data	Object	是	这次要改变的数据
callback	Function	否	回调函数

参数 data 以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。 callback 是一个回调函数，在这次 setData 对界面渲染完毕后调用。

示例代码

html复制
<!--index.ttml--> 
<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>

js复制
//index.js
Page({ 
  data: {
    text: "init data",
    num: 0,
    array: [{ text: "init data" }],
    object: {
      text: "init data",
    },
  },
  changeText: function () {
    // this.data.text = 'changed data'  // 这样无法更新UI
    this.setData({
      text: "changed data",
    });
  },
  changeNum: function () {
    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",
    });
  },
});