页面

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() 方法的参数对象说明如下：

生命周期方法

• onLoad：页面加载。一个页面只会调用一次，query 参数为 my.navigateTo 和 my.redirectTo 中传递的 query 对象。

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

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

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

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

事件处理函数

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

• onShareAppMessage：用户分享，详见 分享。

Page.prototype.setData()

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

setData 接受一个对象作为参数。对象的键名 key 可以非常灵活，以数据路径的形式给出，如 array[2].message、a.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');
}

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

page.json

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

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

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

例如：

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

page 样式

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

page {
  background-color: #fff;
}