Source: Aliyun Developer Community
Global configuration
app.json
app.json is the global configuration of the applet. It is used to configure the page list, default window title, navigation bar background color of the applet.
{
"pages": [
"pages/todos/todos",
"pages/add-todo/add-todo"
],
"window": {
"defaultTitle": "Todo App",
"titleBarColor": "#323239"
}
}
app.acss defines a global style that acts on all pages of the current applet.
page {
flex: 1;
display: flex;
background: #323239;
font-family: "pingFang SC" "pingFang";
}
The page in the example above is a special selector supported by the framework, which matches the page root node container provided by the framework.
app.js
app.js is used to register widget applications. It can configure the life cycle of widgets, declare global data, and call rich APIs, such as the following to obtain user authorization and user information APIs.
App({
// Declare global data
todos[
{ text: 'Learning Javascript', completed: true },
{ text: 'Learning ES2016', completed: true },
{ text: 'Learning Alipay applet', completed: false },
],
userInfo: null,
// Declare global methods
getUserInfo() {
return new Promise((resolve, reject) => {
if (this.userInfo) resolve(this.userInfo);
// Calling User Authorization API
my.getAuthCode({
scopes: ['auth_user'],
success: authcode => {
console.info(authcode);
// Call the API for obtaining user information
my.getAuthUserInfo({
success: res => {
this.userInfo = res;
resolve(this.userInfo);
},
fail: () => {
reject({});
},
});
},
fail: () => {
reject({});
},
});
});
},
});As you can see, the global logical code is placed in App({}), declaring the global data todos, userInfo, and the global method getUserInfo().
Some data has been stored in todos global data, that is, some to-do items in the Todo App applet.
The global method getUserInfo() calls the authorized API, my. getAuthCode, and gets the user information API, my. getAuthUserInfo, and stores the obtained user information in userInfo.
Applet page
There are two pages in this example, the Todo List page and the Add Todo page, both in the pages directory. All page paths of applets must be declared in app.json. The path starts from the project root directory and cannot include suffix names. The first page of pages is the home page of the applet.
Each page consists of four types of files under the same path, namely. json suffix configuration file,. axml suffix template file,. acss suffix style file, and. js suffix logic script file.
todo List page
todos.json
todos.json is used to configure the window representation of the current page. This defines the use of a custom component add-button, specifying its component name and the corresponding path. The specific use of custom components will be described later.
{
"usingComponents": {
"add-button": "/components/add-button/add-button"
}
}Page configuration files are not required. When a page configuration file exists, each page configuration item takes precedence over the same name configuration item of window in app.json. When no page configuration file exists, the default configuration in app.json is used directly. Therefore, the title of the Todo List page is defaultTitle specified in app.json, that is, Todo App.
todos.axml
todos.axml is a template file for page structure:
<view class="page-todos">
<view class="user">
<image class="avatar" src="{{user.avatar || '../../assets/logo.png'}}" background-size="cover"></image>
<view class="nickname">{{user.nickName && user.nickName + '\'s' || 'My'}} Todo List</view>
</view>
<view class="todo-items">
<checkbox-group class="todo-items-group" onChange="onTodoChanged">
<label a:for="{{todos}}" a:for-item="item" class="todo-item {{item.completed ? 'checked' : ''}}" a:key="*this">
<checkbox class="todo-item-checkbox" value="{{item.text}}" checked="{{item.completed}}" />
<text class="todo-item-text">{{item.text}}</text>
</label>
</checkbox-group>
</view>
<view class="todo-footer">
<add-button text="Add Todo" onClickMe="addTodo" ></add-button>
</view>
</view>Use <view/>,<image/>,<text/>,<button/>,<label/>,<checkbox/>,
To build the page structure and bind todos data through two pairs of braces ({}}) in Mustache grammar.
todos.js
todos.js is the logical script file of the page. The logical code of the applet page must be included in Page({}).
// Get the global app instance
const app = getApp();
Page({
// Declare page data
data: {}
// Monitoring lifecycle callback onLoad
onLoad() {
// Get user information and store data
app.getUserInfo().then(
user => this.setData({
user,
}),
);
},
// Monitor lifecycle callback onShow
onShow() {
// Setting global data to current page data
this.setData({ todos: app.todos });
},
// Event Handler
onTodoChanged(e) {
// Modify global data
const checkedTodos = e.detail.value;
app.setTodos(app.todos.map(todo => ({
...todo,
completed: checkedTodos.indexOf(todo.text) > -1,
})));
this.setData({ todos: app.todos });
},
addTodo() {
// Page jump
my.navigateTo({ url: '../add-todo/add-todo' });
},
});It can be implemented in this file:
- Monitoring and Processing the Life Cycle Function of Pages onShow onLoad
- Get widget instances and other page instances getApp getCurrentPages
- Declare and process data
- Response to page interaction events, call API, etc.
- Note here that app.todos is a global variable definition from app.js
todos.acss
todos.acss defines the local style of the page. Specify the styles of different elements in todos.axml, including location, background color, font, font color, and so on. ACSS grammar refers to the style document. The. ACSS file of the page is not required, but for the same selector, the local style of the page overrides the global style of app.acss.
.page-todos {
display: flex;
flex-direction: column;
width: 100%;
max-height: 100vh;
}
.user {
display: flex;
flex-shrink: 0;
padding: 30px;
color: #FFF;
flex-direction: column;
align-items: center;
}
.avatar {
width: 130rpx;
height: 130rpx;
border-radius: 50%;
background-color: #FFF;
align-self: center;
}
.nickname {
padding-top: 40rpx;
text-align: center;
font-size: 40rpx;
font-weight: 100;
}
.todo-items {
flex-grow: 1;
font-size: 34rpx;
padding: 50rpx 120rpx;
color: #0EFFD6;
overflow: auto;
}
.todo-items-group {
display: flex;
flex-direction: column;
}
.todo-item {
position: relative;
margin-bottom: 50rpx;
padding-left:80rpx;
line-height: 70rpx;
height: 80rpx;
box-sizing: border-box;
border: 2px solid rgb(14, 255, 214);
border-radius: 100rpx;
overflow: hidden;
text-overflow: ellipsis;
/* white-space:nowrap; */
transition: border 0.2s;
}
.todo-item:last-child {
margin-bottom: 0;
}
.todo-item::before {
content: '';
position: absolute;
left: 12rpx;
margin-right: 20rpx;
width: 45rpx;
height: 45rpx;
background-color: rgba(14, 222, 255, 0.3);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
transition: background-color 0.2s;
}
.todo-item::after {
content: '';
position: absolute;
left: 29rpx;
width: 8rpx;
height: 18rpx;
top: 50%;
transform: translateY(-60%) rotate(38deg);
border: 4rpx solid #FFF;
border-width: 0 4rpx 4rpx 0;
opacity: 0;
transition: opacity 0.2s;
}
.todo-item-checkbox {
display: none;
}
.checked .todo-item-text {
text-decoration: line-through;
color: #1AA0B8;
}
.checked.todo-item {
border: 2px solid rgba(14, 222, 255, 0.2);
}
.checked.todo-item::before {
background-color: rgba(14, 222, 255, 0.2);
}
.checked.todo-item::after {
opacity: 1;
}
.todo-footer {
flex-shrink: 0;
padding: 50rpx 0 100rpx;
font-size: 48rpx;
font-weight: 200;
text-align: center;
}Add Todo page
add-todo.json declares custom component names and paths:
add-todo.json
{
"usingComponents": {
"add-button": "/components/add-button/add-button"
}
}add-todo.axml
add-todo.axml is a template file for page structure:
<view class="page-add-todo">
<view class="add-todo">
<input
class="add-todo-input"
placeholder="What needs to be done?"
onBlur="onBlur"
value="{{inputValue}}"
/>
</view>
<view class="todo-footer">
<add-button text="Add Todo" onClickMe="add" ></add-button>
</view>
</view>The two core functions of this page are:
- Receive user input using the < input/> component.
- <add-button> is a custom component that encapsulates some fully functional code into a custom component for easy reuse elsewhere.
add-todo.js
add-todo.js page logic code:
const app = getApp();
Page({
data: {
inputValue: '',
},
onBlur(e) {
this.setData({
inputValue: e.detail.value,
});
},
add() {
app.todos = app.todos.concat([
{
text: this.data.inputValue,
compeleted: false,
},
]);
my.navigateBack();
},
});add-todo.acss
add-todo.acss is used in the same way as todos.acss.
Source: Aliyun Developer Community