Source du manuscrit: Communauté de développeurs Alibaba Cloud
Configuration globale
app.json
app.json est la configuration globale de l'applet, utilisée pour configurer la liste des pages de l'applet, le titre de la fenêtre par défaut, la couleur de fond de la barre de navigation, etc.
{
"pages" : [
"pages / todos / todos" ,
"pages / add-todo / add-todo"
],
"window" : {
"defaultTitle" : "Todo App" ,
"titleBarColor" : "# 323239"
}
}
app.acss définit le style global, qui agit sur toutes les pages de l'applet en cours.
page {
flex : 1 ;
affichage : flex;
arrière - plan : # 323239 ;
famille de polices : "pingFang SC" "pingFang" ;
}
La page de l'exemple ci-dessus est un sélecteur spécial pris en charge par le framework, qui correspondra au conteneur de nœud racine de page fourni par le framework.
app.js
app.js pour enregistrer une application de petit programme, vous pouvez configurer le cycle de vie de l'applet, les déclarations de données globales, appeler l' API riche , comme ce qui suit pour obtenir l'autorisation utilisateur et l'accès à l' API des informations utilisateur , etc.
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({});
},
});
});
},
});Comme vous pouvez le voir, le code logique global est placé dans App ({}) , qui déclare les données globales todos , userInfo et la méthode globale getUserInfo () .
Certaines données ont été stockées dans les données globales de todos , c'est -à-dire certaines tâches à faire déjà dans l'applet Todo App .
La méthode globale getUserInfo () appelle l' API d' autorisation my.getAuthCode et l' API d' informations utilisateur my.getAuthUserInfo et stocke les informations utilisateur obtenues dans userInfo .
Mini page de programme
Il y a deux pages dans cet exemple, la page Todo List et la page Add Todo , toutes deux situées dans le répertoire des pages . Toutes les pages doivent être dans le chemin de l'applet app.json indiqué, le chemin depuis le répertoire racine du projet pour démarrer et ne peut pas inclure le suffixe, Pages et la première page est l'applet d'accueil.
Chaque page se compose de quatre types de fichiers dans le même chemin, à savoir .json fichier de configuration suffixe, .axml fichier modèle suffixe, .acss fichiers de style suffixe, .js fichier script logique.
page Liste des tâches
all.json
todos.json est utilisé pour configurer les performances de la fenêtre de la page en cours. Définit ici l'utilisation d'un bouton d'ajout de composant personnalisé , en spécifiant son nom de composant et le chemin correspondant. L'utilisation spécifique de composants personnalisés sera décrite plus loin.
{
"usingComponents": {
"add-button": "/components/add-button/add-button"
}
}Le fichier de configuration de page n'est pas requis. Lorsqu'il y a une page de profil, chaque élément de configuration de page donnera la priorité à app.json dans la fenêtre du même nom d'éléments de configuration. Lorsqu'il n'y a pas de fichier de configuration de page, la configuration par défaut dans app.json est utilisée directement . Par conséquent, le titre de la page Todo List est le defaultTitle spécifié dans app.json , qui est Todo App .
all.axml
todos.axml est le fichier de modèle de structure de page:
<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>Utilisez <view /> , <image /> , <text /> , <button /> , <label /> , <checkbox /> , pour créer la structure de la page et attacher deux paires d'accolades ( { {}} ) via la syntaxe Moustache Définissez les données todos .
all.js
todos.js est le fichier de script logique de la page, et le code logique de la page de l'applet doit être inclus dans 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' });
},
});Dans ce fichier peut être réalisé:
- Surveiller et traiter la fonction de cycle de vie sur Afficher sur Chargement de la page
- Obtenir des instances d'applet et d'autres instances de page getApp getCurrentPages
- Déclarer et traiter les données
- Répondez aux événements d'interaction de page, appelez l' API, etc.
- Il convient de noter ici que app.todos est une définition de variable globale de app.js
all.acss
todos.acss définit le style local de la page. Spécifiez le style des différents éléments dans todos.axml , y compris la position, la couleur d'arrière-plan, la police, la couleur de la police, etc. Voir le document de style pour la syntaxe ACSS . Le fichier .acss de la page n'est pas nécessaire, mais pour le même sélecteur, le style local de la page remplacera le style global 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;
}Ajouter une page Todo
add-todo.json déclare le nom et le chemin du composant personnalisé:
add-todo.json
{
"usingComponents": {
"add-button": "/components/add-button/add-button"
}
}add-todo.axml
add-todo.axml est le fichier de modèle de structure de page:
<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>Les deux fonctions principales de cette page sont:
- Utilisez le composant <input /> pour recevoir les entrées utilisateur.
- <add-button> est un composant personnalisé qui peut encapsuler certains codes fonctionnellement complets en tant que composants personnalisés pour une réutilisation facile à d'autres endroits.
add-todo.js
Code logique de la page Add-todo.js :
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
L' utilisation de add-todo.acss est la même que todos.acss et ne sera pas répétée ici.
Source du manuscrit: Communauté de développeurs Alibaba Cloud