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

最新推荐文章于 2024-08-16 10:35:55 发布

愿天堂没有996

最新推荐文章于 2024-08-16 10:35:55 发布

阅读量5.1k

点赞数 52

分类专栏：移动开发鸿蒙开发 HarmonyOS 文章标签： harmonyos 移动开发鸿蒙开发 openharmony 项目实战

本文链接：https://blog.csdn.net/m0_70748458/article/details/138193139

版权

鸿蒙开发同时被 3 个专栏收录

578 篇文章 20 订阅

订阅专栏

移动开发

425 篇文章 3 订阅

订阅专栏

HarmonyOS

177 篇文章 0 订阅

订阅专栏

本来最开始是想带着大家做鸿蒙官方的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

①全方位，更合理的学习路径：
路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入理解鸿蒙开发原理！

②多层次，更多的鸿蒙原生应用：
路线图将包含完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正理解并应用鸿蒙的核心技术和理念。

③实战化，更贴合企业需求的技术点：
学习路线图中的每一个技术点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正理解和掌握。

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