小程序页面介绍

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

每个小程序页面一般包含四个文件，如下表所示。

示例

示例1：

/pages/index/index.js注册页面并在初始化时提供数据。

Page({
  data: {
    title: 'Dingtalk',
    array: [{user: 'li'}, {user: 'zhao'}]
  }
})

pages/index/index.axml根据以上提供的数据渲染页面内容。


<view>{{title}}</view>

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

示例2：

pages/index/index.axml中定义交互行为时，需要指定在页面脚本里面定义的响应函数。

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

/pages/index/index.js中定义handleTap方法。


Page({

 handleTap() {

  console.log('yo! view tap!')

 }

})

示例3：

pages/index/index.axml中页面内容若要重新渲染，需在页面脚本里面调用this.setData方法。


<view>{{text}}</view>

<button onTap="changeText"> Change normal data </button>

/pages/index/index.js中定义changeText方法。

Page({

 data: {

  text: 'init data',

 },

 changeText() {

  this.setData({

   text: 'changed data'

  })

 },

})

上面代码中，changeText方法里面调用this.setData方法，会将页面进行重新渲染。