OpenHarmony开发者论坛

标题: OpenHarmony制作登陆页面 [打印本页]

作者: 俺也不知道叫啥名字好听 时间: 2024-12-29 20:11
标题: OpenHarmony制作登陆页面
[md]# OpenHarmony登陆页面制作

---

## 简介

---

登录页面是一个重要的界面，是用户访问系统或应用的重要入口。其主要功能是验证用户身份，确保只有授权的用户能够访问特定的系统资源。

## 页面内容

##### **· 用户标识输入框**

通常是一个文本输入框，用于用户输入用户名、邮箱或手机号等唯一标识自己身份的信息。这个输入框一般会有清晰的标签，如 “用户名” 或 “邮箱”，让用户明确应该输入的内容。

##### **· 密码输入框**

是一个特殊的文本输入框，用于输入用户密码。为了保护用户密码的安全性，密码输入框中的内容通常以加密的形式（如黑点或星号）显示，防止他人在旁边窥视到密码内容。

##### **· 提交按钮**

当用户输入完身份标识和密码后，通过点击提交按钮来触发登录验证流程。按钮上一般会有明确的文字，如 “登录” 或 “Sign In”，让用户清楚其功能。

##### **· 注册新用户链接**

如果系统允许新用户注册，会提供一个链接引导用户前往注册页面，方便新用户创建账号。

## 项目效果图

---

![屏幕截图2024-01-13172836.png](https://forums-obs.openharmony.c ... uqbquq6b6bjlqp9.png "屏幕截图 2024-01-13 172836.png")

![](file:///S:/%E5%BC%80%E6%BA%90%E6%8A%80%E6%9C%AF%E5%88%9B%E6%96%B0/%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2.png?lastModify=1735474092)

## 代码实现

---

```
import router from '@ohos.router'
@Entry@Component
struct Login {
  @State message: string = 'Hello World'

  build() {
   Column() {
   Button("注册/其他方式\n")
   .width("120vp")
   .height("30vp")
   .offset({ x: "111.42vp", y: "15.89vp" })
   .borderRadius("12vp")
   .backgroundColor("#f6f9ed")
   .backgroundImageSize(ImageSize.Auto)
   .opacity(1)
   .visibility(Visibility.Visible)
   .fontColor("#7785a0")
   .type(ButtonType.Normal)
   .stateEffect(true)
   .fontSize("16fp")
   .fontStyle(FontStyle.Normal)
   //进入登录副页面
   .onClick(() => {
   router.pushUrl({ url: 'pages/Home' })
   })
   Button("帮助")
   .width("50vp")
   .height("30vp")
   .offset({ x: "-137.33vp", y: "-12.96vp" })
   .borderRadius("12vp")
   .backgroundColor("#f6f9ed")
   .backgroundImageSize(ImageSize.Auto)
   .opacity(1)
   .visibility(Visibility.Visible)
   .fontColor("#7785a0")
   .type(ButtonType.Normal)
   .stateEffect(true)
   .fontSize("16fp")
   .fontStyle(FontStyle.Normal)
   //进入帮助页面
   .onClick(() => {
   router.pushUrl({ url: 'pages/Home' })
   })
   Image($r('app.media.Hello'))
   .width("200vp")
   .height("200vp")
   .offset({ x: "75.66vp", y: "-2.34vp" })
   Image($r('app.media.HelloLogin'))
   .width("317.29vp")
   .height("318.22vp")
   .offset({ x: "-5%", y: "-9%" })
   Column() {
   TextInput({ placeholder: "请输入密码" })
   .width("85%")
   .height("11%")
   .offset({ x: "0vp", y: "35%" })
   .type(InputType.Password)
   TextInput({ placeholder: "请输入账号" })
   .width("85%")
   .height("11%")
   .offset({ x: "0%", y: "5%" })
   .type(InputType.Normal)
   Button("一键进入城民之家")
   .width("300vp")
   .height("12%")
   .offset({ x: "0%", y: "40%" })
   .borderStyle(BorderStyle.Dotted)
   .borderWidth("0vp")
   .backgroundColor("#7785a0")
   .fontFamily("sans-serif")
   //进入主页面
   .onClick(() => {
   router.pushUrl({ url: 'pages/HomePage' })
   })
   }
   .width("100%")
   .height("40%")
   .offset({ x: "0%", y: "-75%" })
   .borderStyle(BorderStyle.Solid)
   .borderRadius("25vp")
   .backgroundColor("#f6f9ed")
   .margin({ top: "500vp", left: "500vp", right: "500vp" })
   .justifyContent(FlexAlign.Start)
   }
   .width("100%")
   .height("100%")
   .backgroundColor("#c3daed")
   .backgroundImageSize(ImageSize.Cover)
  }
}
```
[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)