Manuscript source: Alibaba Cloud Developer Community
Global configuration
app.json
app.json is the global configuration of the applet, used to configure the page list of the applet, the default window title, the background color of the navigation bar, etc.
{
"pages": [
"pages/todos/todos",
"pages/add-todo/add-todo"
],
"window": {
"defaultTitle": "Todo App",
"titleBarColor": "#323239"
}
}
app.acss defines the global style, which acts on all pages of the current applet.
page {
flex: 1;
display: flex;
background: #323239;
font-family: "pingFang SC" "pingFang";
}
The page in the above example is a special selector supported by the framework, which will match the page root node container provided by the framework.
app.js
app.js for registering small program application, you can configure the applet lifecycle, global data declarations, calling the rich API , such as the following to obtain the user authorization and access to user information API and so on.
App({
// 声明全局数据
todos[
{ text: 'Learning Javascript', completed: true },
{ text: 'Learning ES2016', completed: true },
{ text: 'Learning 支付宝小程序', completed: false },
],
userInfo: null,
// 声明全局方法
getUserInfo() {
return new Promise((resolve, reject) => {
if (this.userInfo) resolve(this.userInfo);
// 调用用户授权 API
my.getAuthCode({
scopes: ['auth_user'],
success: authcode => {
console.info(authcode);
// 调用获取用户信息 API
my.getAuthUserInfo({
success: res => {
this.userInfo = res;
resolve(this.userInfo);
},
fail: () => {
reject({});
},
});
},
fail: () => {
reject({});
},
});
});
},
});As you can see, the global logic code is placed in App({}) , which declares 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 already in the Todo App applet.
The global method getUserInfo() calls the authorization API my.getAuthCode and the user information API my.getAuthUserInfo , and stores the obtained user information in userInfo .
Mini Program Page
There are two pages in this example, the Todo List page and the Add Todo page, both of which are located in the pages directory. All pages must be in the path of the applet app.json stated, the path from the root directory of the project to start and can not include the suffix, Pages and the first page is the home applet.
Each page consists of four types of files in the same path, namely .json suffix configuration file, .axml suffix template file, .acss suffix style files, .js suffix logic script file.
todo List page
all.json
todos.json is used to configure the window performance of the current page. Here defines the use of a custom component add-button , specifying its component name and corresponding path. The specific use of custom components will be described later.
{
"usingComponents": {
"add-button": "/components/add-button/add-button"
}
}The page configuration file is not required. When there is a profile page, each page configuration items will give priority to app.json in the window of the same name of configuration items. When there is no page configuration file, the default configuration in app.json is used directly . Therefore, the title of the Todo List page is the defaultTitle specified in app.json , which is Todo App .
all.axml
todos.axml is the page structure template file:
<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 tie two pairs of curly braces ( { {}} ) through Mustache syntax Set todos data.
all.js
todos.js is the logic script file of the page, and the logic code of the applet page must be included in Page({}) .
// 获取全局 app 实例
const app = getApp();
Page({
// 声明页面数据
data: {}
// 监听生命周期回调 onLoad
onLoad() {
// 获取用户信息并存储数据
app.getUserInfo().then(
user => this.setData({
user,
}),
);
},
// 监听生命周期回调 onShow
onShow() {
// 设置全局数据到当前页面数据
this.setData({ todos: app.todos });
},
// 事件处理函数
onTodoChanged(e) {
// 修改全局数据
const checkedTodos = e.detail.value;
app.setTodos(app.todos.map(todo => ({
...todo,
completed: checkedTodos.indexOf(todo.text) > -1,
})));
this.setData({ todos: app.todos });
},
addTodo() {
// 进行页面跳转
my.navigateTo({ url: '../add-todo/add-todo' });
},
});In this file can be achieved:
- Monitor and process the life cycle function onShow onLoad of the page
- Get applet instances and other page instances getApp getCurrentPages
- Declare and process data
- Respond to page interaction events, call API, etc.
- It should be noted here that app.todos is a global variable definition from app.js
all.acss
todos.acss defines the local style of the page. Specify the style of different elements in todos.axml , including position, background color, font, font color, etc. See the style document for ACSS syntax. The .acss file of the page is not necessary, but for the same selector, the page local style will override the app.acss global style.
.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 the name and path of the custom component:
add-todo.json
{
"usingComponents": {
"add-button": "/components/add-button/add-button"
}
}add-todo.axml
add-todo.axml is the page structure template file:
<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:
- Use the <input/> component to receive user input.
- <add-button> is a custom component that can encapsulate some functionally complete codes as custom components for easy reuse in other places.
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
The usage of add-todo.acss is the same as todos.acss and will not be repeated here.
Manuscript source: Alibaba Cloud Developer Community