文档

页面

更新时间:

Page 代表应用的一个页面,负责页面展示和交互。每个页面对应一个子目录,一般有多少个页面,就有多少个子目录。它也是一个构造函数,用来生成页面实例。

页面初始化

  • 页面初始化时,需要提供数据作为页面的第一次渲染:

    <view>{{title}}</view>
    <view>{{array[0].user}}</view>
    Page({
    data: {
      title: 'Alipay',
      array: [{user: 'li'}, {user: 'zhao'}]
    }
    })
  • 定义交互行为时,需要在页面脚本中指定响应函数:

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

    上面模板定义用户点击时,调用了 handleTap 方法:

    Page({
    handleTap() {
      console.log('yo! view tap!')
    }
    })
  • 页面重新渲染,需要在页面脚本中调用 this.setData 方法。

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

    上面代码指定用户触摸按钮时,调用了 changeText 方法。

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

    上面代码中,在 changeText 方法中调用了 this.setData 方法,会导致页面的重新渲染。

Page()

Page() 接受一个 object 作为参数,该参数用来指定页面的初始数据、生命周期函数、事件处理函数等。

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

上面的代码中,Page() 方法的参数对象说明如下:

属性

类型

描述

data

Object or Function

初始数据或返回初始化数据的函数

onTitleClick

Function

点击标题触发

onOptionMenuClick

Function

基础库 1.3.0+ 支持,点击格外导航栏图标触发,可通过 my.canIUse('page.onOptionMenuClick') 判断

onPageScroll

Function({scrollTop})

页面滚动时触发

onLoad

Function(query: Object)

页面加载时触发

onReady

Function

页面初次渲染完成时触发

onShow

Function

页面显示时触发

onHide

Function

页面隐藏时触发

onUnload

Function

页面卸载时触发

onPullDownRefresh

Function

页面下拉时触发

onReachBottom

Function

上拉触底时触发

onShareAppMessage

Function

点击右上角分享时触发

其他

Any

开发者可以添加任意的函数或属性到 object 参数中,在页面的函数中可以用 this 来访问

说明

data 为对象时,如果您在页面中修改 data,会影响该页面的不同实例。

生命周期方法

  • onLoad:页面加载。一个页面只会调用一次,query 参数为 my.navigateTomy.redirectTo 中传递的 query 对象。

  • onShow:页面显示。每次页面显示都会调用一次。

  • onReady:页面初次渲染完成。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面的设置,如 my.setNavigationBar 请在 onReady 之后设置。

  • onHide:页面隐藏。当使用 my.navigateTo 跳转到其他页面或在底部使用 tab 切换 tab 时调用。

  • onUnload:页面卸载。当使用 my.redirectTomy.navigateBack 跳转到其他页面的时候调用。

事件处理函数

  • onPullDownRefresh:下拉刷新。监听用户下拉刷新事件,需要在 的 window 选项中开启 pullRefresh。当处理完数据刷新后,my.stopPullDownRefresh 可以停止当前页面的下拉刷新。

  • onShareAppMessage:用户分享,详见 分享

Page.prototype.setData()

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

说明

直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。 请尽量避免一次设置过多的数据。

setData 接受一个对象作为参数。对象的键名 key 可以非常灵活,以数据路径的形式给出,如 array[2].messagea.b.c.d,并且不需要在 this.data 中预先定义。

示例代码

<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()

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。下面代码可以用于检测当前页面栈是否具有 5 层页面深度。

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

不要尝试修改页面栈,否则会导致路由以及页面状态错误。

框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈的表现如下:

路由方式

页面栈表现

初始化

新页面入栈

打开新页面

新页面入栈

页面重定向

当前页面出栈,新页面入栈

页面返回

当前页面出栈

Tab 切换

页面全部出栈,只留下新的 Tab 页面

page.json

每一个页面也可以使用 [page名].json 文件来对本页面的窗口表现进行配置。

页面的配置比 app.json 全局配置简单得多,只能设置 window 相关的配置项,所以无需写 window 这个键。注意,页面配置会覆盖 app.jsonwindow 属性中的配置项。

格外支持 optionMenu 配置导航图标,点击后触发 onOptionMenuClick

文件

类型

必填

描述

optionMenu

Object

基础库 1.3.0+ 支持,设置导航栏格外图标,目前支持设置属性 icon,值为图标 URL(以 https/http 开头)或 base64 字符串,大小建议 30*30 px

例如:

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

page 样式

每个页面中的根元素为 page,需要设置高度或者背景色时,可以利用这个元素。

page {
  background-color: #fff;
}
  • 本页导读 (0)
文档反馈