全部产品
云市场

页面

更新时间:2019-09-09 15:17:40

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

页面初始化

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

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

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

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

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

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

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

    1. Page({
    2. data: {
    3. text: 'init data',
    4. },
    5. changeText() {
    6. this.setData({
    7. text: 'changed data'
    8. })
    9. },
    10. })

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

Page()

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

  1. //index.js
  2. Page({
  3. data: {
  4. title: "Alipay"
  5. },
  6. onLoad(query) {
  7. // 页面加载
  8. },
  9. onReady() {
  10. // 页面加载完成
  11. },
  12. onShow() {
  13. // 页面显示
  14. },
  15. onHide() {
  16. // 页面隐藏
  17. },
  18. onUnload() {
  19. // 页面被关闭
  20. },
  21. onTitleClick() {
  22. // 标题被点击
  23. },
  24. onPullDownRefresh() {
  25. // 页面被下拉
  26. },
  27. onReachBottom() {
  28. // 页面被拉到底部
  29. },
  30. onShareAppMessage() {
  31. // 返回自定义分享信息
  32. },
  33. viewTap() {
  34. // 事件处理
  35. this.setData({
  36. text: 'Set data for updat.'
  37. })
  38. },
  39. go() {
  40. // 带参数的跳转,从 page/index 的 onLoad 函数的 query 中读取 xx
  41. my.navigateTo('/page/index?xx=1')
  42. },
  43. customData: {
  44. hi: 'alipay'
  45. }
  46. })

上面的代码中,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:下拉刷新。监听用户下拉刷新事件,需要在 app.jsonwindow 选项中开启 pullRefresh。当处理完数据刷新后,my.stopPullDownRefresh 可以停止当前页面的下拉刷新。
  • onShareAppMessage:用户分享,详见 分享

Page.prototype.setData()

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

说明

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

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

示例代码

  1. <view>{{text}}</view>
  2. <button onTap="changeTitle"> Change normal data </button>
  3. <view>{{array[0].text}}</view>
  4. <button onTap="changeArray"> Change Array data </button>
  5. <view>{{object.text}}</view>
  6. <button onTap="changePlanetColor"> Change Object data </button>
  7. <view>{{newField.text}}</view>
  8. <button onTap="addNewKey"> Add new data </button>
  1. Page({
  2. data: {
  3. text: 'test',
  4. array: [{text: 'a'}],
  5. object: {
  6. text: 'blue'
  7. }
  8. },
  9. changeTitle() {
  10. // 错误!不要直接去修改 data 里的数据
  11. // this.data.text = 'changed data'
  12. // 正确
  13. this.setData({
  14. text: 'ha'
  15. })
  16. },
  17. changeArray() {
  18. // 可以直接使用数据路径来修改数据
  19. this.setData({
  20. 'array[0].text':'b'
  21. })
  22. },
  23. changePlanetColor(){
  24. this.setData({
  25. 'object.text': 'red'
  26. });
  27. },
  28. addNewKey() {
  29. this.setData({
  30. 'newField.text': 'c'
  31. })
  32. }
  33. })

getCurrentPages()

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

  1. if(getCurrentPages().length === 5) {
  2. my.redirectTo('/xx');
  3. } else {
  4. my.navigateTo('/xx');
  5. }

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

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

路由方式 页面栈表现
初始化 新页面入栈
打开新页面 新页面入栈
页面重定向 当前页面出栈,新页面入栈
页面返回 当前页面出栈
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

例如:

  1. {
  2. "optionMenu": {
  3. "icon": "https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png"
  4. }
  5. }

page 样式

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

  1. page {
  2. background-color: #fff;
  3. }