本登录功能通过Stage框架实现了一个标准的用户名密码登录交互。支持账号密码输入,校验和存储,以及登录成功后的页面跳转。同时处理了常见的异常情况,如输入错误、网络异常等
在此基础上,可以继续扩展功能:(后续持续更新)
hml:
<!-- 1. 页面布局和基础样式 -->
<div class="container">
<div class="login-page">
<!-- 标题栏部分布局 -->
<div class="header">
<text class="title">欢迎登录</text>
</div>
<!-- 登录表单部分布局 -->
<div class="form">
<!-- 用户名输入框部分 -->
<div class="input-item">
<text>用户名</text>
<input type="text" id="username" class="input"></input>
</div>
<!-- 密码输入框部分 -->
<div class="input-item">
<text>密码</text>
<input type="password" id="password" class="input"></input>
</div>
<!-- 登录按钮部分 -->
<div class="btn-wrapper">
<button id="login" class="btn">登录</button>
</div>
<!-- 忘记密码部分 -->
<text id="forgot" class="extra">忘记密码?</text>
</div>
</div>
</div>
css:
/* 页面总体样式 */
page {
display: flex;
flex-direction: column;
background-color: #f6f6f6;
}
/* 标题部分 */
.title {
font-size: 40px;
font-weight: bold;
color: #007dff;
}
/* 输入框部分 */
input {
width: 80%;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
/* 按钮部分 */
button {
width: 80%;
height: 50px;
color: #fff;
background-color: #007dff;
border-radius: 25px;
box-shadow: 0 2px 10px #aaa;
}
button:active {
opacity: 0.7;
}
/* 底部链接 */
text {
font-size: 12px;
color: #007dff;
margin-top: 15px;
}
js:
// 3. 交互逻辑处理
import router from '@system.router';
// 获取节点
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const loginButton = document.getElementById('login');
const forgotButton = document.getElementById('forgot');
// 登录方法
function login() {
// 获取用户名和密码
let username = prompt.getTextFieldValue('username');
let password = prompt.getTextFieldValue('password');
// 简单验证
if(!username || !password) {
prompt.showToast({
message: '用户名和密码不能为空'
});
return;
}
// TODO: 调用服务端接口验证
//这个位置调用后台登录接口,如果验证账号密码成功则通过下述方法跳转到首页
// 模拟登录成功
prompt.showToast({
message: '登录成功'
});
// 登录信息保存本地
storage.set({
key: 'user',
value: JSON.stringify({
username: username
})
});
// 登录成功,跳转首页
router.replace({
uri: 'pages/home'
});
}
// 登录按钮点击方法
loginButton.onclick = () => {
login();
}
// 忘记密码按钮点击方法
forgotButton.onclick = () => {
router.push({
uri: 'pages/forgotPassword'
});
}
下一节:详细教程 - 从零开发 Vue 鸿蒙应用 第三节 (封装TabBar)
上一节:详细教程 - 从零开发 Vue 鸿蒙应用 第一节