HarmonyOS鸿蒙Next《伴时匣》app开发技术分享--用户登陆页静态(1)

HarmonyOS鸿蒙Next《伴时匣》app开发技术分享–用户登陆页静态(1)

技术栈

Appgallery connect

开发准备

大家好,今天给大家带来一个全新的鸿蒙应用,名字叫做伴时匣,意思就是一个陪伴度过时光的匣子,首先来介绍关于伴时匣的整个功能设想,首先呢,就是应用的功能,这个应用主要用来进行倒计时提醒的功能,在这里我们可以发布一些日子作为目标日,通过设置正数倒数来展示我们设置的对应日子,大多数的应用同样也做得到这些,所以我们以用户为主导的思想肯定不仅限于此,我们还要实现关系的绑定,实现我们“伴”的主体思想,我们可以通过绑定已有的关系,查看不同角色之间我们创建的内容。这样我们就兼顾实现了个人,多人共同使用的一个场景。同时在app中还会实现留言功能,让我们的记录多一些小惊喜

功能分析

要实现这样一个应用,我们的技术选型标准就是需要有云端存储功能,并且实现不同设备的数据交互,并且保证数据的实时同步。所以在技术上我们选择使用云数据库来实现

功能开发

话不多说,现在我们就来开始我们伴时匣app的开发,首先我们要实现的是用户相关功能,有了用户,我们才能实现用户信息的处理,从而实现后续的其他功能

我们先进行表的创建

{
  "CloudDBZoneName": "casket",
  "objectTypeName": "user",
  "fields": [
    {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true},
    {"fieldName": "bind_user_id", "fieldType": "Integer"},
    {"fieldName": "bind_type", "fieldType": "Integer"},
    {"fieldName": "user_id", "fieldType": "Integer"},
    {"fieldName": "user_name", "fieldType": "String"},
    {"fieldName": "psw", "fieldType": "String"},
    {"fieldName": "nike_name", "fieldType": "String"},
    {"fieldName": "url", "fieldType": "String"},
    {"fieldName": "sex", "fieldType": "String"},
    {"fieldName": "birthday", "fieldType": "String"},
    {"fieldName": "phone", "fieldType": "String"}
  ],
  "indexes": [
    {"indexName": "field1Index", "indexList": [{"fieldName":"id","sortType":"ASC"}]}
  ],
  "permissions": [
    {"role": "World", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Authenticated", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]},
    {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]}
  ]
}

创建实体类

class User {
  id: number;
  bind_user_id: number;
  bind_type: number;
  user_id: number;
  user_name: string;
  psw: string;
  nike_name: string;
  url: string;
  sex: string;
  birthday: string;
  phone: string;

  constructor() {}

  setId(id: number): void {
    this.id = id;
  }

  getId(): number  {
    return this.id;
  }

  setBind_user_id(bind_user_id: number): void {
    this.bind_user_id = bind_user_id;
  }

  getBind_user_id(): number  {
    return this.bind_user_id;
  }

  setBind_type(bind_type: number): void {
    this.bind_type = bind_type;
  }

  getBind_type(): number  {
    return this.bind_type;
  }

  setUser_id(user_id: number): void {
    this.user_id = user_id;
  }

  getUser_id(): number  {
    return this.user_id;
  }

  setUser_name(user_name: string): void {
    this.user_name = user_name;
  }

  getUser_name(): string  {
    return this.user_name;
  }

  setPsw(psw: string): void {
    this.psw = psw;
  }

  getPsw(): string  {
    return this.psw;
  }

  setNike_name(nike_name: string): void {
    this.nike_name = nike_name;
  }

  getNike_name(): string  {
    return this.nike_name;
  }

  setUrl(url: string): void {
    this.url = url;
  }

  getUrl(): string  {
    return this.url;
  }

  setSex(sex: string): void {
    this.sex = sex;
  }

  getSex(): string  {
    return this.sex;
  }

  setBirthday(birthday: string): void {
    this.birthday = birthday;
  }

  getBirthday(): string  {
    return this.birthday;
  }

  setPhone(phone: string): void {
    this.phone = phone;
  }

  getPhone(): string  {
    return this.phone;
  }
}

export { User };

创建db类

import { cloudDatabase } from '@kit.CloudFoundationKit';

class user extends cloudDatabase.DatabaseObject {
  public id: number;
  public bind_user_id: number;
  public bind_type: number;
  public user_id: number;
  public user_name: string;
  public psw: string;
  public nike_name: string;
  public url: string;
  public sex: string;
  public birthday: string;
  public phone: string;

  public naturalbase_ClassName(): string {
    return 'user';
  }
}

export { user };

然后我们先来实现一个基础的登陆页面

import promptAction from '@ohos.promptAction';
import { router } from '@kit.ArkUI';
import { CommonTopBar } from '../widget/CommonTopBar';

@Entry
@Component
struct LoginPage {
  aboutToAppear(){}

  @State acc:string = ''
  @State psw:string = ''
  controller: TextInputController = new TextInputController()

  async login(): Promise<void>{
    if (this.acc===''&&this.psw==='') {
      promptAction.showToast({message:"请输入账号或密码"})
      return
    }else {}
  }

  build() {
    Column({space:20}) {
      CommonTopBar({ title: "登录", alpha: 0, titleAlignment: TextAlign.Center ,backButton:false})
      Column() {
        Image($r("app.media.logo"))
          .width(120).height(120).borderRadius(60)
        TextInput({text:this.acc,
          placeholder: '请输入账号'
        })
          .backgroundColor("#f6f6f6")
          .placeholderColor("#ff999595")
          .fontColor("#333333")
          .maxLength(11)
          .type(InputType.Number)
          .onChange((value: String) => {
            this.acc = value.toString()
          }).margin(20)
        TextInput({text:this.psw,
          placeholder: '请输入密码'
        })
          .backgroundColor("#f6f6f6")
          .placeholderColor("#ff999595")
          .fontColor("#333333")
          .type(InputType.Password)
          .onChange((value: String) => {
            this.psw = value.toString()
          }).margin(20)
        Row() {
          Text('用户注册')
            .fontColor("#ff65c8ee")
            .fontSize(14)
            .margin(30)
            .onClick(()=>{
              router.pushUrl({url:'pages/user/RegisterPage'})
            })
        }
          .width('100%')
          .justifyContent(FlexAlign.End)
        Button('登陆',{type:ButtonType.Capsule,stateEffect:false})
          .onClick(()=>{
            this.login()
          })
          .fontColor(Color.White)
          .width('80%')
          .height(40)
          .backgroundColor("#ff65c8ee")
      }
        .width('100%')}
      .height('100%')
      .backgroundColor('#FFFFFF')
      .justifyContent(FlexAlign.Start)
  }
}

到这里我们就实现了用户的静态登陆页


更多关于HarmonyOS鸿蒙Next《伴时匣》app开发技术分享--用户登陆页静态(1)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

鸿蒙Next开发《伴时匣》登录页静态页面可使用ArkUI框架实现。主要技术点:

  1. 使用@Component装饰器创建自定义登录组件
  2. 布局采用Column+Flex+Text等基础组件构建
  3. 样式通过@Styles@Extend装饰器统一管理
  4. 输入框使用TextInput组件
  5. 按钮使用Button组件并绑定点击事件
  6. 图片资源通过Image组件加载
  7. 使用资源限定词适配不同设备
  8. 通过@State管理界面状态变化

页面结构建议包含:Logo区、账号密码输入区、登录按钮、第三方登录选项等基础元素。

更多关于HarmonyOS鸿蒙Next《伴时匣》app开发技术分享--用户登陆页静态(1)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


很高兴看到您分享的HarmonyOS Next应用开发经验!关于《伴时匣》的登录页面实现,我有几点技术补充:

  1. 云数据库设计方面,您定义的user表结构很完整,但建议考虑:
  • 密码字段(psw)应该加密存储
  • 可以增加create_time等时间戳字段
  • 索引设计可以优化,比如user_name字段可能需要查询索引
  1. 在UI实现上,登录页面的几点优化建议:
  • 可以使用@State装饰器管理表单状态
  • 密码输入建议增加明文/密文切换功能
  • 可以添加记住密码和自动登录选项
  1. 安全性考虑:
  • 建议实现防暴力破解机制
  • 考虑添加图形验证码
  • 登录请求应该使用HTTPS加密
  1. 性能优化:
  • 可以使用@Link共享状态
  • 考虑使用LazyForEach优化列表渲染
  • 图片资源建议使用WebP格式

您的代码结构清晰,遵循了HarmonyOS的开发规范,特别是正确使用了ArkUI的组件化开发思想。期待看到您后续关于关系绑定和数据同步的实现分享!

回到顶部