Directorio de artículos
prefacio
Hola a todos, hoy compartiré con ustedes cómo implementar una función simple de inicio de sesión y registro en uni-app.
En primer lugar, debe dominar los puntos de conocimiento:
1. Solicitud de red uni.request
2. Salto de página, parámetro de transferencia de página uni.navigateTo
3. Caché local uni.setStorageSync, uni.getStorageSync
Necesitamos usar la interfaz de inicio de sesión y registro , por lo que necesitas saber Cómo hacer solicitudes de red.
Debido a que aún necesita registrarse, debe saltar a la página y saltar a la página de registro, por lo que debe usar el salto de página.
El caché local es para almacenar la información de usuario de su cuenta actual después de iniciar sesión y almacenarla localmente, por lo que necesita usar el almacenamiento local.
¡Echemos un vistazo al proceso de implementación específico!
1. Diseño de página
Este es el diseño básico de la página de inicio de sesión. Hay dos cuadros de entrada, uno es la cuenta y el otro es la contraseña. Debajo hay un botón de inicio de sesión. Debajo del botón hay un enlace. Al hacer clic en la cuenta de registro, se saltará al registro. página para el registro de la cuenta.
El siguiente es el diseño básico de la página de registro. Hay tres cuadros de entrada, que son el número de cuenta, la contraseña y la dirección de correo electrónico. Si el parámetro de solicitud de la interfaz no es la dirección de correo electrónico, puede reemplazarlo por otro. Debajo de la entrada El cuadro es el botón de registro. Haga clic en el botón de registro para preguntar si el registro es exitoso. , regrese a la página de inicio de sesión después del aviso.
2. Página de registro
1. Utilice la interfaz de registro
El código es el siguiente (ejemplo):
uni.request({
url: '',
method: 'POST',
data: {
Username:this.account,
Password:this.password,
Email:this.email
},
success: res => {
},
fail: () => {
},
});
2. Consejos para un registro exitoso
El código es el siguiente (ejemplo):
uni.showToast({
title:"注册成功",
duration:2000,
success() {
}
});
3. Saltar a la página de registro exitosa
El código es el siguiente (ejemplo):
setTimeout(function () {
uni.navigateTo({
url: '../login/index',
});
}, 1000);
Aquí usamos un temporizador, la razón es que cuando se registra con éxito, comienza a ejecutar el código en la devolución de llamada exitosa. Si no agrega un temporizador, habrá un salto de página antes de que aparezca el mensaje de éxito del registro, por lo que agregó esto Un temporizador permite que el tiempo de salto se ejecute después de un tiempo específico, de modo que el aviso se pueda mostrar durante el período en que no se ejecuta la página de salto.
4. Código completo
El código es el siguiente (ejemplo):
methods: {
btnReg(){
uni.request({
url: '',
method: 'POST',
data: {
UserName:this.account,
Password:this.password,
Email:this.email
},
success: res => {
uni.showToast({
title:"注册成功",
duration:2000,
success() {
setTimeout(function () {
uni.navigateTo({
url: '../login/index',
});
}, 1000);
}
});
},
fail: () => {
},
});
}
}
3. Página de inicio de sesión
1. Utilice la interfaz de inicio de sesión
El código es el siguiente (ejemplo):
uni.request({
url: '',
method: 'GET',
data: {
username : this.account,
password : this.password
},
success: res => {
},
fail: () => {
},
});
2. Uso de almacenamiento local
El código es el siguiente (ejemplo):
uni.setStorage({
key: 'username',
data: this.account,
success:function(){
console.log("存储成功！");
}
})
Escribí un artículo sobre el almacenamiento local antes, si quieres saber más, puedes leerlo y elegir si usar síncrono o asíncrono según tus necesidades.
3. Código completo
El código es el siguiente (ejemplo):
methods: {
uni.request({
url: '',
method: 'GET',
data: {
username : this.account,
password : this.password
},
success: res => {
console.log(res);
if(res.code== 0){
uni.showToast({
icon: 'none',
title: '密码或用户名错误',
});
} else {
uni.showToast({
icon: 'none',
title: '登录成功',
});
uni.setStorage({
key: 'username',
data: this.account,
success:function(){
console.log("存储成功！");
}
})
uni.reLaunch({
url:'../index/index',
})
}
},
fail: () => {
},
});
}
Hay un juicio en él. Este juicio es para verificar si el inicio de sesión fue exitoso. Si el inicio de sesión falla, aparecerá la información de falla de inicio de sesión. Si el inicio de sesión es exitoso, indicará el inicio de sesión exitoso y saltará a la página de inicio. .
Resumir
Lo anterior es todo el contenido de este capítulo, espero que pueda ayudarlo.