Page Introduction
Page represents a page of Mini Program, taking charge of the display and interaction of page. Each page will have a subdirectory in the project, basically there are as many subdirectories as there are pages. It is also a constructor to generate instance of page.
Each page consists of four files:
[PageName].js
: page logic
[PageName].axml
: page structure
[PageName].json
: page configuration (optional)
[PageName].acss
: page style sheet (optional)
When page is initialized, the data should be provided.
Page({
data: {
title: 'Mini Program',
array: [{user: 'li'}, {user: 'zhao'}],
},
});
According to the data provided, the page can be rendered.
<view>{{title}}</view>
<view>{{array[0].user}}</view>
The function should be specified when defining interaction.
<view onTap="handleTap">click me</view>
The above code shows when user clicks the view, the handleTap
function will be invoked.
Page({
handleTap() {
console.log('yo! view tap!');
},
});
If you want to re-render the page, you need to call this.setData
function in the [PageName].js
script.
<view>{{text}}</view>
<button onTap="changeText"> Change normal data </button>
The above code shows when user click the view, the changeText
function will be invoked.
Page({
data: {
text: 'init data',
},
changeText() {
this.setData({
text: 'changed data',
});
},
});
In the changeText
function, this.setData
is called to change the text data, and then the page will re-render to show the changed data.