阿里云移动开发平台mPaaS页面

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

属性	类型	描述
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.navigateTo 和 my.redirectTo 中传递的 query 对象。
onShow：页面显示。每次页面显示都会调用一次。
onReady：页面初次渲染完成。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置，如 my.setNavigationBar 请在 onReady 之后设置。
onHide：页面隐藏。当使用 my.navigateTo 跳转到其他页面或在底部使用 tab 切换 tab 时调用。
onUnload：页面卸载。当使用 my.redirectTo 或 my.navigateBack 跳转到其他页面的时候调用。

事件处理函数

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

Page.prototype.setData()

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

说明：

直接修改 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');
}

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

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

路由方式	页面栈表现
初始化	新页面入栈
打开新页面	新页面入栈
页面重定向	当前页面出栈，新页面入栈
页面返回	当前页面出栈
Tab 切换	页面全部出栈，只留下新的 Tab 页面

page.json

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

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

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

文件	类型	必填	描述
optionMenu	Object	否	基础库 1.3.0+ 支持，设置导航栏格外图标，目前支持设置属性 icon，值为图标 URL（以 https/http 开头）或 base64 字符串，大小建议 30*30 px

例如：

{
  "optionMenu": {
    "icon": "https://img2.ladyww.cn/cloudads/2023/01/31/i1pzc2asguh.png"
  }
}

page 样式

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

page {
  background-color: #fff;
}

原创文章，作者：网友投稿，如若转载，请注明出处：https://www.cloudads.cn/archives/33989.html