全部产品
云市场

小程序页面介绍

更新时间:2019-09-09 14:06:35

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

每个小程序页面一般包含四个文件。

  • [pageName].js:页面逻辑。
  • [pageName].axml:页面结构。
  • [pageName].acss:页面样式(可选)。
  • [pageName].json:页面配置(可选)。

页面初始化时,提供以下数据:

  1. Page({
  2. data: {
  3. title: 'mPaaS',
  4. array: [{user: 'li'}, {user: 'zhao'}],
  5. },
  6. });

根据以上提供的数据,渲染页面内容:

  1. <view>{{title}}</view>
  2. <view>{{array[0].user}}</view>

定义交互行为时,需要指定响应函数:

  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 方法,会导致页面重新渲染。