Page represents a page of the app and is responsible for page presentation and interaction. Each page corresponds to one subdirectory. The number of pages is equal to the number of subdirectories. The Page component is also a constructor function used to generate a page instance.
In general, each Mini Program page consists of the following files:
[pageName].js: page logic[pageName].axml: page structure[pageName].acss: (Optional) page format[pageName].json: (Optional) page configurations
Provide the data specified in the following code during initialization of a page.
Page({data: {title: 'mPaaS',array: [{user: 'li'}, {user: 'zhao'}],},});
Render the content on the page based on the preceding data.
<view>{{title}}</view><view>{{array[0].user}}</view>
Specify a response function when you define an interactive behavior.
<view onTap="handleTap">click me</view>
The preceding code indicates that the handleTap method is invoked when a user touches a button on the page.
Page({handleTap() {console.log('yo! view tap!');},});
During re-rendering on the page, invoke the this.setData method in the script of the page.
<view>{{text}}</view><button onTap="changeText"> Change normal data </button>
The preceding code indicates that the changeText method is invoked when a user touches a button on the page.
Page({data: {text: 'init data',},changeText() {this.setData({text: 'changed data',});},});
In the preceding code, invoke the this.setData method in the changeText method causes the page to be re-rendered.