Fuente del manuscrito: Alibaba Cloud Developer Community
Configuración global
app.json
app.json es la configuración global del subprograma, que se utiliza para configurar la lista de páginas del subprograma, el título de la ventana predeterminado, el color de fondo de la barra de navegación, etc.
{
"páginas" : [
"páginas / todos / todos" ,
"páginas / agregar-todo / agregar-todo"
],
"ventana" : {
"defaultTitle" : "Aplicación Todo" ,
"titleBarColor" : "# 323239"
}
}
app.acss define el estilo global, que actúa en todas las páginas del subprograma actual.
página {
flexión : 1 ;
pantalla : flex;
fondo : # 323239 ;
familia de fuentes : "pingFang SC" "pingFang" ;
}
La página del ejemplo anterior es un selector especial compatible con el marco, que coincidirá con el contenedor del nodo raíz de la página proporcionado por el marco.
app.js
app.js para registrar una aplicación de programa pequeño, puede configurar el ciclo de vida del subprograma, declaraciones de datos globales, llamar a la API enriquecida , como la siguiente para obtener la autorización del usuario y el acceso a la API de información del usuario, 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({});
},
});
});
},
});Como puede ver, el código de lógica global se coloca en App ({}) , que declara los datos globales todos , userInfo y el método global getUserInfo () .
Algunos datos se han almacenado en todos los datos globales, es decir , algunos elementos pendientes que ya están en el subprograma Todo App .
El método global getUserInfo () llama a la API de autorización my.getAuthCode y a la API de información del usuario my.getAuthUserInfo , y almacena la información del usuario obtenida en userInfo .
Página del mini programa
Hay dos páginas en este ejemplo, la página Lista de tareas pendientes y la página Agregar tareas pendientes, ambas ubicadas en el directorio de páginas . Todas las páginas deben estar en la ruta del applet app.json indicado, la ruta desde el directorio raíz del proyecto para comenzar y no puede incluir el sufijo, Pages y la primera página es el applet de inicio.
Cada página consta de cuatro tipos de archivos en el mismo camino, a saber .json sufijo de archivo de configuración, .axml sufijo de archivo plantilla, .acss archivos de estilo sufijo .js sufijo archivo de script de la lógica.
Página de lista de tareas pendientes
todos.json
todos.json se utiliza para configurar el rendimiento de la ventana de la página actual. Aquí define el uso de un botón de adición de componente personalizado , especificando su nombre de componente y la ruta correspondiente. El uso específico de componentes personalizados se describirá más adelante.
{
"usingComponents": {
"add-button": "/components/add-button/add-button"
}
}El archivo de configuración de la página no es necesario. Cuando hay una página de perfil, cada elemento de configuración de la página dará prioridad a app.json en la ventana del mismo nombre de elementos de configuración. Cuando no hay un archivo de configuración de página, la configuración predeterminada en app.json se usa directamente . Por lo tanto, el título de la lista de tareas página es la defaultTitle especificado en app.json , que es Todo aplicación .
todos.axml
todos.axml es el archivo de plantilla de estructura de página:
<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 /> , para construir la estructura de la página y unir dos pares de llaves ( { {}} ) a través de la sintaxis de Moustache Establecer todos los datos.
all.js
todos.js es el archivo de script lógico de la página, y el código lógico de la página del subprograma debe incluirse en 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' });
},
});En este archivo se puede lograr:
- Monitorear y procesar la función de ciclo de vida en Mostrar en Carga de la página
- Obtener instancias de subprograma y otras instancias de página getApp getCurrentPages
- Declarar y procesar datos
- Responder a eventos de interacción de la página, llamar a API, etc.
- Cabe señalar aquí que app.todos es una definición de variable global de app.js
all.acss
todos.acss define el estilo local de la página. Especifique el estilo de los diferentes elementos en todos.axml , incluyendo posición, color de fondo, fuente, color de fuente, etc. Consulte el documento de estilo para conocer la sintaxis de ACSS . El archivo .acss de la página no es necesario, pero para el mismo selector, el estilo local de la página anulará el estilo 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;
}Agregar página de Todo
add-todo.json declara el nombre y la ruta del componente personalizado:
add-todo.json
{
"usingComponents": {
"add-button": "/components/add-button/add-button"
}
}add-todo.axml
add-todo.axml es el archivo de plantilla de estructura de página:
<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>Las dos funciones principales de esta página son:
- Utilice el componente <input /> para recibir la entrada del usuario.
- <add-button> es un componente personalizado que puede encapsular algunos códigos funcionalmente completos como componentes personalizados para su fácil reutilización en otros lugares.
add-todo.js
Código lógico de la página 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
El uso de add-todo.acss es el mismo que el de todos.acss y no se repetirá aquí.
Fuente del manuscrito: Alibaba Cloud Developer Community