实战篇：带着大家用鸿蒙HarmonyOS做项目（鸿蒙真人）

前言

本文将会带着大家做一个完整的项目，但是不包含后端，如果需要后端云开发的话，后期再给大家补上

本来最开始是想带着大家做鸿蒙官方的CodeLabs的，但是我看现在网上已经出了很多教程，尤其是机构，他们到时候应该会以视频教学的方式带着大家做，所以我就不做CodeLabs了，决定自己做一个单出的Demo，因为自己做的话需要设计等因素，所以拖了蛮长时间的

最后的项目代码我传到了Gitee上供大家参考，因为我自己也懒得用Github...

好的，我们开始吧

登陆页面

我们新建项目，选择空模板就行了，创建完是这个样子的

我现在需要添加一个登录页和注册页，就直接新建两个Page

我现在想新建一个常量的文件，用来存放一些常量，例如一些文字大小，颜色等等

于是新建一个common并且新建一个Constant.ets

然后我先定义一下我登陆页面标题的内容数据，这种数据的格式推荐是大写，然后多个单词用_进行分割

然后在登陆页面使用

然后输入框我们用TextInput组件来完成

我们先简单做成这种效果，然后我们把一些别的地方也会用到的公共的常量拿出来

然后我们在Login中使用

这里可能有人会说，为什么不封装一个Form组件呢？其实我最开始也是这么想的，因为登陆和注册都需要一个表单，但是在写的过程中我发现其实也并不怎么省事，而且我设想的后期的登陆和注册页面可能区别较大

当然，如果这里你想封装一个Form组件的话是完全可以的~

现在我们想获取到输入框的值，并且希望点击Button进行页面跳转，跳转到Index

这里顺便传了个参数，其实这个用户名密码应该存在应用里的，但是这里就当是复习一下传参吧

然后Index接收

现在的效果是这样的

然后我们同样的逻辑，搞一下注册页面

注册页面

我们先在这里加一行，可以跳转到注册

然后页面和Login一个逻辑

import router from '@ohos.router' import Constant from '../common/Constant' @Entry @Component struct Register { @State message: string = 'Please Register' @State username: string = '' @State password: string = '' @State email: string = '' build() { Row() { Column() { Text(this.message) .fontColor(Constant.LOGIN_COLOR) .fontSize(Constant.LOGIN_SIZE) .fontWeight(FontWeight.Bold) TextInput({ placeholder: 'Username' }) .margin({ top: 20 }) .width(Constant.INPUT_WIDTH) .height(Constant.INPUT_HEIGHT) .onChange((value: string) => { this.username = value }) TextInput({ placeholder: 'Email' }) .margin({ top: 20 }) .width(Constant.INPUT_WIDTH) .height(Constant.INPUT_HEIGHT) .onChange((value: string) => { this.email = value }) TextInput({ placeholder: 'Password' }) .type(InputType.Password) .margin({ top: 20 }) .width(Constant.INPUT_WIDTH) .height(Constant.INPUT_HEIGHT) .onChange((value: string) => { this.password = value }) Button('Register') .width(Constant.BUTTON_WIDTH) .height(Constant.BUTTON_HEIGHT) .margin({ top: 30 }) .backgroundColor(Constant.BUTTON_COLOR) .onClick(() => { router.pushUrl({ url: 'pages/Login', params: { username: this.username, password: this.password, email: this.email } }) }) } .width('100%') } .height('100%') } }