【HarmonyOS NEXT】实战——登录页面
在本文中,我们将深入探讨如何使用HarmonyOS NEXT来实现一个功能完备的登录页面。通过这个实战案例,你将结合页面布局、数据本地化存储、网络请求等多方面了解到HarmonyOS NEXT在构建现代应用时的强大能力和灵活性。

目录
1. 整体结构
定义了一个 LoginPage 组件,该组件使用了 @Entry 和 @Component 装饰器来标记它是一个入口组件和可复用的 UI 组件。LoginPage 组件包含了一些状态变量(@State)和方法(build、handleLogin、handleForgotPassword)。
2. 状态变量
account: 用户名输入框的值,默认为空字符串。password: 密码输入框的值,默认为空字符串。text: 顶部的欢迎文字,默认为空字符串。loading: 是否正在加载,默认为false。rememberPassword: 是否记住密码,默认为false。stopLogin: 是否停止自动登录,默认为false。
3. 方法
aboutToAppear: 组件即将显示时的生命周期方法,用于初始化状态变量。build: 组件的构建方法,定义了页面的布局和组件。handleLogin: 处理登录逻辑的方法。handleForgotPassword: 处理忘记密码逻辑的方法。
4. 代码解析
4.1 aboutToAppear 方法
async aboutToAppear() {
const params = router.getParams() as JumpParams;
this.stopLogin = params.stopLogin || false;
this.rememberPassword = await PreferencesUtils.get('rememberPassword') as boolean;
if (this.rememberPassword) {
this.account = await PreferencesUtils.get("account") as string;
this.password = await PreferencesUtils.get("password") as string;
}
if (this.account && this.password && !this.stopLogin) {
this.handleLogin();
}
}
router.getParams(): 获取路由传递的参数,类型为JumpParams。这里主要是为了通过路由获取参数,来判断是否进行自动登录操作。默认用户正常进入登陆页的时候需要自动登录,但是如果是点击了退出登录来到了登陆页则不进行自动登录。或许还有更多的特殊情况,这一点可以通过路由传参实现。PreferencesUtils.get: 从本地存储中获取数据,这里主要是获取用户是否记住密码的状态,还有记录下的账户与密码。- 条件判断:
- 如果用户选择了记住密码,从本地存储中读取用户名和密码。
- 如果用户名和密码都已存在且 路由参数
stopLogin为false,自动调用handleLogin方法进行登录。
4.2 build 方法
build() {
Stack() {
Column() {
// 顶部的欢迎文字
Text(this.text)
Column() {
RelativeContainer() {
Text('您好!')
.fontSize(24)
.fontWeight(FontWeight.Bold)
.fontColor(Color.Red)
.alignRules({
top: {
anchor: '__container__', align: VerticalAlign.Top },
center: {
anchor: '__container__', align: VerticalAlign.Center }
})
.width('100%');
Text('欢迎使用xx系统!')
.fontSize(22)
.fontColor(Color.Black)
.alignRules({
bottom: {
anchor: '__container__', align: VerticalAlign.Bottom },
center: {
anchor: '__container__', align: VerticalAlign.Center }
})
.width('100%')
.margin({
top: 80 });
}
.height('30%')
.width('100%')
.padding({
left: 32, right: 32 })
.backgroundColor(Color.White);
// 用户名和密码输入框
Column() {
// 用户名输入框
Column() {
TextInput({
placeholder: '请输入用户名', text: this.account })
.onChange((value: string) => {
this.account = value;
})
.fontSize(18)
.fontColor(Color.Black)
.width('100%')
.height(50)
.padding({
left: 10, right: 10 });
Divider().height(1).color('#194487fe'); // 下划线
}
// 密码输入框
Column() {
TextInput({
placeholder: '请输入密码', text

最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



