HarmonyOS个人项目案例——综合开发过程记录（终）

已于 2024-06-25 23:49:44 修改
阅读量245 收藏 1
点赞数 3
文章标签： harmonyos 华为
于 2024-06-25 23:48:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tokoniec/article/details/139972967
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

        此篇内容是以前四篇开发过程为基底的一个总结。

一、整体代码介绍

        程序经过一个弹窗询问用户是否接受隐私协议，如果是则进入登录界面，否则退出程序，进入登陆界面后，可以输入账号密码点击注册来注册账号，注册成功会有注册成功提示，也可点击忘记密码来更改密码，更改成功后会有更改成功提示，输入账号密码以进行登录进入第一个小游戏，在第一个小游戏中可通过上下左右箭头来控制海马的移动，点击下一个项目按钮则进入创建文档页面，点击创建文档来新建一个文档，单击此文档来进入编写文档内容页面，可在此页面进行编写文档标题和文档的内容。

二、程序代码

1.代码

/弹窗/

@CustomDialog
export default struct tanchuang {
  controller: CustomDialogController
  confirm: () => void
  cancel: () => void

  build() {
    Column({ space: 10 }) {
      Text('欢迎使用此app').fontSize(20).fontWeight(20)
      Text('本应用尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本应用会按照本隐私权政策的规定使用和披露您的个人信息。但本应用将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，本应用不会将这些信息对外披露或向第三方提供。本应用会不时更新本隐私权政策。 您在同意本应用服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于本应用服务使用协议不可分割的一部分。')
      Button('同意')
        .width(150)
        .backgroundColor($r('app.color.welcome_color'))
        .onClick(() => {
          this.confirm()
          this.controller.close()
        })
      Button('不同意')
        .width(150)
        .backgroundColor($r('app.color.color2'))
        .fontColor($r('app.color.color3'))
        .onClick(() => {
          this.cancel()
          this.controller.close()
        })
        .width('100%')
        .padding(10)
    }
  }
}

/欢迎页面/
import userAuth from '@ohos.userIAM.userAuth'
import tanchuang from '../view/tanchuang'
import preferences from '@ohos.data.preferences'
import router from '@ohos.router'
import systemDateTime from '@ohos.systemDateTime'
import app from '@system.app';
@Extend(Text) function opacityWhitetext(opacity: number,fontSize: number=10){
  .fontSize(fontSize)
    .opacity(opacity)
    .fontColor(Color.White)
}
@Entry
@Component
struct Welcome {
  controller:CustomDialogController=new CustomDialogController({
    builder: tanchuang({
      confirm: () => this.onConfirm(),
      cancel: () => app.terminate()
    })
  })
  aboutToAppear(){
    this.controller.open()
  }
  onConfirm(){
  this.jumpToIndex()
  }
  jumpToIndex(){
    setTimeout(()=>{
      router.replaceUrl({
        url:'pages/Index'
      })
    },1000)
  }

  build() {
    Column({ space: 10 }) {
      Row() {
        Image($r('app.media.ic_main')).width(260)
      }
      .layoutWeight(1)

      Row() {
        Text('用心生活').opacityWhitetext(0.8, 12)
        Text('IPV6')
          .opacityWhitetext(0.8)
          .border({ style: BorderStyle.Solid, width: 1, color: Color.White, radius: 15 })
          .padding({ left: 5, right: 5 })
        Text('网络').opacityWhitetext(0.8, 12)
      }

      Text('科技带来崭新生活方式，此app将用心帮助用户')
        .opacityWhitetext(0.6)
      Text('浙ICP备00000000号-36D')
        .opacityWhitetext(0.4)
        .margin({ bottom: 35 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.welcome_color'))
  }
}

/登录界面/
import router from '@ohos.router'
@Extend(Text) function opacityWhitetext(opacity: number,fontSize: number=10){
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
@Entry
@Component
struct Index {
  build() {
    Column({ space: 10 }) {
      Row() {
      }

      Row() {
      }

      Row() {
        Image($r('app.media.ic_main')).width(150)
      }

      Row() {
        Text('用户登录').opacityWhitetext(1.5, 35)
      }

      Row() {
        Text('登录账号以提供更多服务').opacityWhitetext(1, 18)
      }

      Row() {
        TextInput({ placeholder: "邮箱/手机号/用户名" })
          .backgroundColor('#ffffff')
          .width(300)
          .type(InputType.Normal)
      }

      Row() {
        TextInput({ placeholder: "密码" })
          .backgroundColor('#ffffff')
          .width(300)
          .type(InputType.Password)
      }

      Row() {
        Button('登录').width(150).backgroundColor('#808080').onClick(()=>{
          router.pushUrl({
            url:'pages/page1'
          })
        })

      }
      Row() {
        Button('忘记密码').onClick(()=>{
          router.pushUrl({
            url:'pages/forget'
          })
        })
          .fontColor(Color.Black)
          .backgroundColor($r('app.color.welcome_color'))
        Button('注册').onClick(()=>{
          router.pushUrl({
            url:'pages/zhuce'
          })
        })
          .fontColor(Color.Black)
          .backgroundColor($r('app.color.welcome_color'))
      }
    }

        .width('100%')
        .height('100%')
        .backgroundColor($r('app.color.welcome_color'))
    }
  }

/注册成功界面/
import router from '@ohos.router'
@Extend(Text) function opacitytext(opacity: number,fontSize: number=10){
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
@Entry
@Component
struct zhuce {
  build() {
    Column() {
      Row() {
        Image($r("app.media.ic_public_back"))
          .width(24)
          .height(24)
          .onClick(() => {
            router.back();
          })
        Text('注册成功').opacitytext(0.8, 20)
          .fontColor(Color.Black)
      }
      Row(){
        Image($r("app.media.ic_registration_success"))
          .objectFit(ImageFit.Contain)
          .width(72)
          .height(72)
          .position({x:130,y:300})
      }
      Row(){
          Text('注册成功').textAlign(TextAlign.Center).position({y:400,x:130})
      }
      Row(){
        Button('点我返回首页').position({y:420,x:105}).onClick(()=>{
          router.back();
        })
          .fontColor(Color.Black)
          .backgroundColor(Color.White)
      }
    }
  }
}

/忘记密码/
import router from '@ohos.router'
@Extend(Text) function opacitytext(opacity: number,fontSize: number=10){
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
@Entry
@Component
struct forget {
  build() {
    Column({space:10}) {
      Row() {
        Image($r("app.media.ic_public_back"))
          .width(24)
          .height(24)
          .onClick(() => {
            router.back();
          })
        Text('忘记密码').opacitytext(0.8, 20)
          .fontColor(Color.Black)
      }
      .alignSelf(ItemAlign.Start)
      Row(){}
      Row() {
        TextInput({ placeholder: "邮箱/手机号/用户名" })
          .backgroundColor('#ffffff')
          .width(300)
          .type(InputType.Normal)
      }
      Row() {
        TextInput({ placeholder: "更改密码" })
          .backgroundColor('#ffffff')
          .width(300)
          .type(InputType.Password)
      }
      Row() {
        Button('提交').width(150).backgroundColor('#808080').onClick(()=>{
          router.pushUrl({
            url:'pages/changepassword'
          })
        })

      }
    }
  }
}

/更改密码成功/
import router from '@ohos.router'
@Extend(Text) function opacitytext(opacity: number,fontSize: number=10){
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
@Entry
@Component
struct changepassword {
  build() {
    Column() {
      Row() {
        Image($r("app.media.ic_public_back"))
          .width(24)
          .height(24)
          .onClick(() => {
            router.back();
          })
        Text('更改成功').opacitytext(0.8, 20)
          .fontColor(Color.Black)
      }
      Row(){
        Image($r("app.media.ic_registration_success"))
          .objectFit(ImageFit.Contain)
          .width(72)
          .height(72)
          .position({x:130,y:300})
      }
      Row(){
        Text('更改成功').textAlign(TextAlign.Center).position({y:400,x:130})
      }
      Row(){
        Button('点我返回首页').position({y:420,x:105}).onClick(()=>{
          router.pushUrl({
            url:'pages/Index'
          });
        })
          .fontColor(Color.Black)
          .backgroundColor(Color.White)
      }
    }
  }
}

/简单小游戏/
import router from '@ohos.router'
@Extend(Text) function opacityWhitetext(opacity: number,fontSize: number=10){
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
@Entry
@Component
struct Page1 {
  @State fishX: number = 200
  @State fishY: number = 180
  @State angle: number = 0
  @State src: Resource = $r('app.media.haima')

  @State isBegin: boolean = false

  build() {
    Row() {
      Stack(){
        Button('下一个项目')
          .position({x:130, y: 730})
          .backgroundColor('#201010')
          .onClick(() => {
            router.pushUrl({
              url:'pages/page2'
            })
          })

        if(!this.isBegin){
          Button('开始游戏')
            .onClick(() => {
              animateTo(
                {duration: 1000},
                () => {
                  this.isBegin = true
                }
              )
            })
        }else{
          Image(this.src)
            .position({x: this.fishX - 20, y: this.fishY - 20})
            .rotate({angle:this.angle, centerX: '50%', centerY: '50%'})
            .width(40)
            .height(85)
            .transition({
              type: TransitionType.Insert,
              opacity: 0,
              translate: {x: -250}
            })
        }
        Row(){
          Button('←').backgroundColor('#20101010')
            .onClick(() => {
              animateTo(
                {duration: 500},
                () => {
                  this.fishX -= 20
                  this.src = $r("app.media.haima")
                }
              )
            })
          Column({space: 40}){
            Button('↑').backgroundColor('#20101010')
              .onClick(() => {
                animateTo(
                  {duration: 500},
                  () => {
                    this.fishY -= 20
                  }
                )
              })
            Button('↓').backgroundColor('#20101010')
              .onClick(() => {
                animateTo(
                  {duration: 500},
                  () => {
                    this.fishY += 20
                  }
                )
              })
          }
          Button('→').backgroundColor('#20101010')
            .onClick(() => {
              animateTo(
                {duration: 500},
                () => {
                  this.fishX += 20
                  this.src = $r('app.media.haima')
                }
              )
            })
        }
        .height(240)
        .width(240)
        .justifyContent(FlexAlign.Center)
        .position({x:50,y:500})
      }
      .height('100%').width('100%')
    }
    .height('100%')
    .width('100%')
    .backgroundImage($r('app.media.sea'))
    .backgroundImageSize({height: '105%', width: '100%'})
  }
}

/创建文档/
import router from '@ohos.router'
@Entry
@Component
struct page2 {
  private index: number = 1
  @State docs: number[] = []
  build() {
    Row() {
      Column({space: 10}) {
        Button('回到第一个游戏')
          .backgroundColor('#201010')
          .onClick(() => {
            router.pushUrl({
              url: 'pages/page1'
            })
          })
        Divider()
        Button('新建文档')
          .onClick(() => {
            this.docs.push(this.index)
          })
        ForEach(this.docs, id => {
          Row({space:10}){
            Image($r('app.media.ic_files_doc'))
              .width(20)
            Text(`文档${id}`)
              .fontSize(18)
              .onClick(() => {
                router.pushUrl({
                  url:'pages/Page3'
                })
              })
          }
          .width('100%')
        })
      }
      .width('100%')
      .height('100%')
      .padding(20)
    }
  }
}


/编写文档内容/
import router from '@ohos.router'
@Entry
@Component
struct Page3 {
  @State editTitle: boolean = true
  @State title: string = '标题'
  @State content: string = ''

  build() {
    Row() {
      Column({ space: 10 }) {
        Row({ space: 10 }) {
          Image($r('app.media.ic_public_back'))
            .width(30)
            .onClick(() => {
              router.back()
            })
          if (!this.editTitle) {
            Text(this.title)
              .fontSize(30)
              .fontWeight(FontWeight.Bold)
              .onClick(() => this.editTitle = true)
          } else {
            TextInput({
              placeholder: '请输入标题',
              text: this.title
            })
              .layoutWeight(1)
              .onChange(val => this.title = val)
            Button('确定')
              .onClick(() => this.editTitle = false)
          }
        }
        .width('100%')

        Divider()
        TextArea({
          placeholder: '请输入文档内容',
          text: this.content
        })
          .layoutWeight(1)
          .onChange(val => this.content = val)
      }
      .padding(10)
      .width('100%')
      .height('100%')
    }
  }
}

2.运行效果(流程)

HarmonyOS个人项目演示流程

总结

        总体来说此程序相对较为简单基础，但代码部分简洁不繁杂，条理清晰不混乱，简单而不杂乱，对于本人初学者来说是相对综合的一个考察。

tokoniec
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HarmonyOS开发实例（附项目源码）
weixin_73390993的博客
07-24 435
Deveco Studio开发（仿大麦app）
HarmonyOS开发学习：项目案例展示—页面跳转
maniu110的博客
07-08 599
提供通过不同的url访问不同的页面，包括跳转到应用内的指定页面、用应用内的某个页面替换当前页面、返回上一页面或指定的页面等。
HarmonyOS 应用开发案例
you4580的专栏
03-21 1581
该组件多用于可视化等场景。TabBar在大部分的APP当中都能够使用到，不同的APP可能存在不一样的TabBar样式，Tab组件自带的TabBar属性对于部分效果无法满足，如页签中间显示一圈圆弧外轮廓等， 因此我们需要去自己定义一个TabBar页签来满足开发的需要。本示例提供组件实例在页面间共享的解决方案：通过Stack容器，下层放地图组件，上层放Navigation组件来管理页面，页面可以共享下层的地图组件，页面中需要显示地图的区域设置为透明，并参考触摸交互控制，设置事件透传及响应区域。
HarmonyOS实战开发-一次开发，多端部署-视频应用
m0_70749039的博客
03-31 1074
根据设备尺寸形态设计不同的页面布局。使用栅格布局实现“一次开发，多端部署”能力。
HarmonyOS开发实例：【数字管家app】
鸿蒙的技术博客
04-11 848
本应用是基于RK3399开发板，使用OpenHarmony3.1-Release开发的应用。通过OpenHarmony的分布式技术，使多人能够一起画画。
HarmonyOS个人项目（第一周）
06-19
HarmonyOS个人项目（第一周）
HarmonyOS云开发基础认证自刷题库
09-13
总的来说，掌握HarmonyOS云开发基础认证的相关知识点，不仅能够提升个人技能，也有助于在职业发展中占据优势。通过系统学习和实践，开发者可以为构建更高效、更安全的HarmonyOS应用程序打下坚实的基础。
HarmonyOS开发案例：抽奖转盘
最新发布
07-27
基于画布组件、动画样式，实现的一个自定义抽奖圆形转盘。包含如下功能： 通过画布组件canvas，画出抽奖圆形转盘。 通过动画样式设置动画，实现抽奖功能。 通过自定义弹窗dialog弹出抽中的奖品。...
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
HarmonyOS 移动应用开发（ArkTS版）是面向开发者的一门课程，旨在教授如何使用 ArkTS 语言在 HarmonyOS 上构建高效、跨平台的应用。本课程由刘安战、余雨萍、陈争艳三位专家编著，由清华大学出版社出版。 ArkTS 是 ...
HarmonyOS应用开发-关系型数据库案例练习.zip
05-20
在 HarmonyOS 应用开发中，关系型数据库的使用是构建功能丰富、数据持久化应用程序的关键环节。本案例练习主要围绕 HarmonyOS 平台上如何利用关系型数据库进行数据存储和管理，以提升应用的用户体验和数据可靠性。让...
HarmonyOS Next应用开发案例大全-(持续更新中……)(1)
2401_84181911的博客
04-11 1246
前者的优点在于使用简单，但是在大文件场景下，内存占用较高，影响应用性能；在应用开发中，我们通常需要使用相同功能和样式的ArkUI组件，例如购物页面中会使用相同样式的Button按钮、Text显示文字，我们常用的方法是抽取公共样式或者封装成一个自定义组件到公共组件库中以减少冗余代码。本示例提供组件实例在页面间共享的解决方案：通过Stack容器，下层放地图组件，上层放Navigation组件来管理页面，页面可以共享下层的地图组件，页面中需要显示地图的区域设置为透明，并参考触摸交互控制，设置事件透传及响应区域。
HarmonyOS 开发-底部抽屉滑动效果案例
maniuT的博客
04-09 555
本示例主要介绍了利用List实现底部抽屉滑动效果场景，并将界面沉浸式（全屏）显示，及背景地图可拖动。
鸿蒙HarmonyOS 2系统开发实例
Android 值得拥有
06-03 1345
上一篇介绍了HarmonyOS 2系统，这次咱们来点儿干货，直接上开发实战，废话不说，上图
HarmonyOS开发10：案例——统计点击次数
GeniusAng的博客
07-21 178
修改ability_main.xml文件 <?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="verti
HarmonyOS鸿蒙应用开发 (一、环境搭建及第一个Hello World)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-17 3884
2024年1月16日，华为目前开启已HarmonyOS NEXT开发者预览版Beta招募，报名周期为1月15日-1月22日。HarmonyOS NEXT开发者预览版将不再兼容安卓开源应用，仅支持鸿蒙内核和系统的应用，因此被称为“纯血鸿蒙”。
全网最细节的sds讲解，两个案例五分钟轻松入门Harmony（鸿蒙
m0_56146626的博客
08-06 439
| element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。 boolean.json color.json float.json intarray.json integer.json pattern.json plural.json strarray.json string.json | | media | 示媒体资源，包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义，例如：icon.png | | animation
鸿蒙OS应用（HarmonyOS Application）开发常见示例源码
weimin217的博客
12-02 2804
https://my.oschina.net/herryzhang/blog/4761061
HarmonyOS开发初体验
不止于代码
09-10 7159
下载IDE HUAWEI DevEco Studio 2.0：https://developer.huawei.com/consumer/cn/deveco_studio 获取下载资源时需要实名认证 HarmonyOS开发文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/harmonyos-overview-0000000000011903 配置开发环境 / 安装DevEco 目前HarmonyOS支持用Java
HarmonyOS手机通讯录开发实验手册
首先，你需要熟悉并掌握HarmonyOS的开发环境——DevEco Studio，这是构建HarmonyOS应用的基础。DevEco Studio提供了全面的工具集，用于项目的创建、调试和打包。 实验的核心内容围绕着UI组件展开，包括基础的Text、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值