手把手教你写一个鸿蒙APP登录功能项目_ar

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

登陆页面

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

我现在需要添加一个登录页和注册页，就直接新建两个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%')
  }
}

这是最后效果，最终调到login页面

目前较为简洁哈，后面会改善一下

index

我们首先先通过tabs将底部导航栏搞出来

现在代码太乱了，我们希望index干净一些，所以需要封装一下

我们先将tabs的内容封装成一个组件，叫做tabbar

ets下新建一个views文件夹用来存放组件，然后新建一个tabbar.ets

然后把tabs下的内容都放在tabbar组件下，并导出

然后在index中引入并使用

效果是一样的

然后我们关注每个tabcontent即可

首页home

先从我们的首页开始

我们把首页的内容也做成一个组件，叫做home

然后在tabbar引入并使用

ok，好的，我们开始专心开发home的内容吧

search搜索框

首先在顶部，我想有一个搜索框

现在搜索框完事了，但是代码也有点冗余了，所以我把这部分也抽出去，万一以后别的地方会用呢

这里的@preview是我为了能够单独预览组件用的

ok，效果是一样的，我们继续往下了

这里注意，你完全可以去用自带的search组件

但是对我来说，其实写的没差太多，而且我想更自由化一点，具体选择看你的场景即可

我先加上一个标题

list

然后下面是一个列表，那我就要去用list组件了

list是一个容器组件，它里面的内容需要用listitem进行填充，同时又需要多个listitem，这就用到了之前学过的列表的循环渲染foreach

现在的效果是这样的

同时拉到最底部的时候会触发onreachend事件，可以用来做一些操作

显然，我们这个list不能直接放在这里，于是封装一个productlist组件

在home中引用

效果是一样的

刷新refresh

然后正常的列表应该是可以下拉刷新的，下拉刷新我们有两种方式

封装一个刷新组件
用arcui的组件

这里我们就用arc提供给我们的组件了，之后我看看优化的时候可以考虑封装一个

其实在官网的codelabs中就有一个封装的刷新组件了，大家可以看看

链接给大家自定义下拉刷新动画（arkts） (huawei.com)

好的，那我们这里用自带的刷新组件refresh

这是效果

listitem

好的，现在我们专注于listitem的内容

我们先看看效果，显然，里面有很多数据，这时候我们就需要去写数据了

我们在ets下新建一个viewmodel文件夹，用来存放数据

然后我们新建一个productdata.ets用来放商品数据

这里的resource是指去拿资源里的数据，这里我拿的是图片，其实一些数据名或者是颜色在element里面都可以进行设置

这里大家知道就好，并不是什么难的东西，目前我先不放在这里

然后我进行使用，并设计一下每个listitem

目前的效果是这样的

这里的过期提示我设置的是一个button，因为我打算后期加一些功能

然后过期、新鲜两种状态我设置了不同的颜色，我现在想要做一个判断，用来让按钮显示不同的颜色，那么就需要用条件渲染了

这样就可以进行动态的判断了

我的页面

现在我们来做mine模块

ok，我们新建了一个mine.ets并且在tabbar里面进行引用，现在我们专注于mine模块即可

我现在想要这种类型的输入框，但是arc原生并没有提供，所以需要我们封装一下

然后我们通过传参的形式在mine给textpro赋值

ok，效果出来了

然后我们再加上一行个性签名

现在我们需要功能更加复杂的输入框

然后可以点击弹出弹出框

ok，我们来搞一下

我们这回封装一个textplus组件

大部分和之前的都一样，不过是多了一个箭头，然后多出了一个事件，这个事件将会用来触发弹窗

然后我们来做弹窗部分

这里我们需求和官方的文本滑动选择器弹窗大体是一致的，于是我们就采用这种方案

然后我们写一下

现在的效果就是这样了

码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（harmonyos next）全栈开发技术的学习路线。大家可以进行参考学习：https://qr21.cn/fv7h05

为了能让大家更好的学习鸿蒙（harmonyos next）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/fv7h05

《鸿蒙开发学习手册》：`https://qr21.cn/fv7h05`

如何快速入门：

基本概念
构建第一个arkts应用
……

开发基础知识：https://qr21.cn/fv7h05

应用基础知识
配置文件
应用数据管理
应用安全管理
应用隐私保护
三方应用调用管控机制
资源分类与访问
学习arkts语言
……

基于arkts 开发：https://qr21.cn/fv7h05

ability开发
ui开发
公共事件与通知
窗口管理
媒体
安全
网络与链接
电话服务
数据管理
后台任务(background task)管理
设备管理
设备使用信息统计
dfx
国际化开发
折叠屏系列
……

鸿蒙开发面试真题（含参考答案）：`https://qr21.cn/fv7h05`

大厂鸿蒙面试题：：`https://qr18.cn/f781ph`

鸿蒙开发面试大盘集篇（共计319页）：`https://qr18.cn/f781ph`

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

手把手教你写一个鸿蒙APP登录功能项目

2024年08月06日 • ar •我要评论

登陆页面