Page 代表应用的一个页面,负责页面展示和交互。每个页面对应一个子目录,一般有多少个页面,就有多少个子目录。它也是一个构造函数,用来生成页面实例。
每个应用页面一般包含四个文件。
1)[pageName].js
:页面逻辑;
2)[pageName].axml
:页面结构;
3)[pageName].acss
:页面样式(可选);
4)[pageName].json
:页面配置(可选)。
页面初始化时,提供数据。
Page({ data: { title: 'Alipay', array: [{user: 'li'}, {user: 'zhao'}], }, });
根据以上提供的数据,渲染页面内容。
<view>{{title}}</view> <view>{{array[0].user}}</view>
定义交互行为时,需要指定响应函数。
<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
方法,会导致页面重新渲染。