支付宝小程序框架 Page

简介

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 updat.'
    })
  },
  go() {
    // 带参数的跳转，从 page/index 的 onLoad 函数的 query 中读取 xx
    my.navigateTo('/page/index?xx=1')
  },
  customData: {
    hi: 'alipay'
  }
})

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

（1）生命周期方法的说明

• onLoad: 页面加载。一个页面只会调用一次，query 参数为 my.navigateTo和 my.redirectTo 中传递的 query 对象。
• onShow: 页面显示。每次打开页面都会调用一次。
• onReady: 页面初次渲染完成。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置，如my.setNavigationBarTitle请在onReady之后设置，详见生命周期。
• onHide: 页面隐藏。当navigateTo或底部tab切换时调用。
• onUnload: 页面卸载。当redirectTo或navigateBack的时候调用。

（2）事件处理函数的说明

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

Page.prototype.setData()

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

注意：

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

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属性中的配置项。

page 样式

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

page {
  background-color: #fff;
}