HarmonyOS APP应用开发项目- MCA助手(Day01持续更新中~)

简言:

gitee地址:https://gitee.com/whltaoin_admin/money-controller-app.git
端云一体化开发在线文档:
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/agc-harmonyos-clouddev-view-0000001700053733-V5

注:此App参照此教程进行二次修改:https://www.bilibili.com/video/BV1q5411v7o7

一、简介

moneyControllerApp(MCA)

这款精心打造的个人财务管理应用,是您理财路上的智慧伙伴。凭借前沿的智能化技术与直观易用的界面设计,它将化繁为简,让您的财务状况一目了然。无论是日常收支的记录,还是复杂财务的分析,都能轻松应对。它不仅帮助您有效掌控每一笔收入与支出,更助您洞悉财务趋势,科学规划未来,让财富增长之路更加清晰可见。从此,财务管理不再是难题,而是通往财务自由的桥梁。
在鸿蒙HarmonyOS Next版本的加持下,这款个人财务管理应用的性能与体验再度升级,成为您理财旅程中的超级智慧伙伴。鸿蒙系统的分布式技术,使得应用运行更加流畅稳定,数据同步更加快速准确,即使在多设备间切换,也能无缝衔接,确保您的财务信息实时更新,安全无忧。

二、什么是端云一体化开发

为丰富HarmonyOS对云端开发的支持、实现端云联动,DevEco Studio以Cloud Foundation Kit(云开发服务)为底座、在传统的“端开发”基础上新增“云开发”能力,开发者在创建工程时选择合适的云开发工程模板,即可在DevEco Studio内同时完成HarmonyOS应用的端侧与云侧开发,体验端云一体化协同开发。

三、开发环境介绍

编辑器DevEco Studio NEXT Developer Beta1
SDK11
操作系统Window 10 专业版
模拟器HarmonyOS Emulator Version: 5.0.3.405
HarmonyOS Version: HarmonyOS NEXT Developer Beta1

四、项目初始化

  • 步骤一:
/*
1 create project
2 application选择>>>[cloudDev] Empty Ability>>>Next
*/
  • 步骤二:输入图中信息后>>>点击Finish
    • 注意:存放路径不建议使用中文字符

image.png

  • 步骤三:进入项目主页>>>点击右上角的头像进行用户登录。

image.png

  • 步骤四:
// 1 进入网址并进行登录:https://developer.huawei.com/consumer/cn/
// 2 登录后在网站首页点击管理中心
// 3 点击左侧边栏(生态服务-应用服务)>>>点击AppGallery Connect
// 4 进入到以下页面

image.png

  • 步骤四:
// 1 点击我的项目>>>新建项目
// 2 数据处理位置选择中国并设置为默认
// 3 点击完成后并添加应用
// 4 注意:创建应用时如果想要自定义包名的话,定义的包名必须和新建项目时写的包名一致。
// 5 创建应用完成后,点击Next后,新建项目既可创建完成。

image.png

五、项目构建静态页面

登录注册页面

  • 效果图

image.png
image.png
结构:

// 一个页面:Login.etc
// 两个组件:
// 头部标题组件:titleComponent.ets
// 表单组件:InputComponent.ets

image.png

  • 代码
// Login.ets
import InputComponent from '../components/InputComponent';
import TitleComponent from '../components/TitleComponent';
import { typeNode } from '@ohos.arkui.node';
import { TESTTYPE } from '@ohos/hypium/src/main/Constant';@Entry
@Component
struct Login {@State message: string = 'Login';// 倒计时@State countDown :number = 60timer :number=0@State isRegister:boolean= false// 发送验证码sendCode(){this.startCountDown()}// 开始倒计时startCountDown(){this.timer =   setInterval(()=>{this.countDown--if(this.countDown===0){this.countDown=60clearInterval(this.timer)}},1000)}build() {Column(){// titleTitleComponent({title:"登录"})// login_contentStack({alignContent:Alignment.Top}){Image($r("app.media.Login_icon")).width(88).height(88).offset({y:-44}).zIndex(999)Column({space:10}){// emialInputComponent({title:"电子邮箱",inputIcon:$r("app.media.mail_icon"),placeholder:"请输入邮箱信息"})// pwdInputComponent({title:"密码",inputIcon:$r("app.media.pwd_icon"),placeholder:"请输入密码",inputType:InputType.Password})// VCodeif(this.isRegister){Column(){Text("验证码").width("100%").textAlign(TextAlign.Start).fontWeight(500).fontSize(16).fontColor(Color.Black).margin({bottom:14})Row(){TextInput({placeholder:"请输入验证码"}).layoutWeight(1).backgroundColor(Color.Transparent).border({width:1,color:"#ff9b9b9b"}).borderRadius(10)Button(this.countDown==60?"点击获取验证码":`${this.countDown}s`).fontSize("10").margin({left:10}).width(100).padding(0).onClick((event: ClickEvent) => {if(this.countDown===60){this.sendCode()}else{AlertDialog.show({message:"正在获取验证码,请等待..."})}})}.width("100%").height(50)}}// login_btnButton(this.isRegister?"注册":"登录").width(228).backgroundColor("#ff09b19d").margin({top:50}).onClick(()=>{// 登录方法})// re_btnRow(){Text(this.isRegister?"去登录":"去注册").fontSize(12).onClick(()=>{this.isRegister= !this.isRegister})Text("|").padding({left:10,right:10})Text("忘记密码").fontSize(12)}.width("100%").layoutWeight(1).justifyContent(FlexAlign.Center)}.width("100%").height("100%").padding({left:14,right:14}).margin({top:44})}.width("90%").backgroundColor(Color.White).margin({top:44}).layoutWeight(1).borderRadius(20)}.width("100%").height("100%").backgroundColor($r("app.color.page_Color"))}
}
// InputComponent.ets@Component
export  default struct InputComponent {@Prop title:string@Prop inputIcon:Resource@Prop placeholder:string@Prop  inputType:InputType=InputType.Normal@State changeStatus:boolean =falsebuild() {Column(){Text(this.title).width("100%").textAlign(TextAlign.Start).fontWeight(500).fontSize(16).fontColor(Color.Black).margin({bottom:14})Row(){Image(this.inputIcon).width(40).aspectRatio(1)TextInput({placeholder:this.placeholder}).onFocus(()=>{// 聚焦this.changeStatus=trueconsole.log("result>>>",this.changeStatus)}).onBlur(()=>{// 失去this.changeStatus=falseconsole.log("result>>>",this.changeStatus)}).layoutWeight(1).backgroundColor(Color.Transparent).type(this.inputType)}.width("100%").height(50).padding({left:10,right:10}).borderRadius(10).border({width:2,color:this.changeStatus?"#002884":Color.White})}}
}
// 页面标题组件 TitleComponent.ets@Component
export  default struct TitleComponent {@Prop title :stringbuild() {Row(){Image($r("app.media.Button_left")).width("44").height(41).objectFit(ImageFit.ScaleDown)Text(this.title).fontColor("#ff403f3f").fontWeight(700).fontSize(20).height(40)Text("")}.width("100%").justifyContent(FlexAlign.SpaceBetween).padding({left:20,right:20,top:12,bottom:12})}
}

主页框架及底部导航栏

  • 效果图(点击底部图标后,可以切换到对应页面并修改选中图标的底色。)

image.png
image.png

  • 功能点及编写思路
1 看着效果图像是多个页面编写而成的,其实就只有一个页面,通过tabs组件框架,嵌套其他组件从而形成多页面效果
2 框架编写思路:
整理和页面通用的数据并提取,在主页定义一个tabs组件,
分别定义5个页面的组件,和底部导航栏的组件
3 图标切换状态思路:
因为底部导航栏的数据是封装到了一个数组中,可以给每个对象定义一个ID属性,同时在主框架中定义一个
装饰器变量来监听tabs的onchange事件,因为ongchange事件会传递tab的下标,所有可以将传递的下标赋值给装饰器变量,
再将装饰器变量传递给底部导航栏图标组件,从而判断是否选中切换图标。
  • 结构:
  • image.png
实体类:BtnNavData
页面:MainPage
组件:CBtnNavImageDataStatisticsHomeMyWallet

代码:

// MainPage
import CBtnNavImage from './components/CBtnNavImage'
import { createBtnNavDataList,BtnNavData } from './model/BtnNavData'
@Entry
@Component
struct MainPage {@State btnNavItemid :number=0@State btnNavDataList:BtnNavData[] =createBtnNavDataList()// tabBar@BuildertabItemBar(item :BtnNavData){CBtnNavImage({btnNavData:item,isSelect:this.btnNavItemid})}build() {Tabs({barPosition:BarPosition.End}){ForEach(this.btnNavDataList,(item:BtnNavData,index)=>{TabContent(){Text(this.btnNavItemid.toString())}.tabBar(  this.tabItemBar(item))})}.onChange((index)=>{// 切换图标// console.log("result>>>>",index)if(index !=2){this.btnNavItemid =index}}).backgroundImage($r("app.media.Subtract")).backgroundImagePosition(Alignment.BottomEnd).backgroundImageSize({width:"100%",height:50})}
}
// BtnNavData
interface  IBtnNavData{selectIcon:ResourcenowIcon:Resourcetitle:stringid:number}
export   class BtnNavData{selectIcon:ResourcenowIcon:Resourcetitle:stringid:numberisQrcode:booleanconstructor(obj:IBtnNavData,isQrcode=false) {this.selectIcon=obj.selectIconthis.nowIcon=obj.nowIconthis.title=obj.titlethis.id=obj.idthis.isQrcode =isQrcode}
}export  const createBtnNavDataList =():BtnNavData[]=>{return [new BtnNavData({id:0,title:"首页",nowIcon:$r("app.media.home_icon_unselect"),selectIcon:$r("app.media.home_icon_select"),}),new BtnNavData({id:1,title:"数据展示",nowIcon:$r("app.media.data_icon_unselect"),selectIcon:$r("app.media.data_icon_select"),}),new BtnNavData({id:2,title:"扫一扫",nowIcon:$r("app.media.qrcode_icon"),selectIcon:$r("app.media.qrcode_icon"),},true),new BtnNavData({id:3,title:"钱包",nowIcon:$r("app.media.wallet_icon_unselect"),selectIcon:$r("app.media.wallet_icon_select"),}),new BtnNavData({id:4,title:"我的",nowIcon:$r("app.media.my_icon_unselect"),selectIcon:$r("app.media.my_icon_select"),})]
}
// CBtnNavImage
import { createBtnNavDataList,BtnNavData } from '../model/BtnNavData'
@Componentexport default struct CBtnNavImage {@Prop btnNavData:BtnNavData@Prop isSelect :number =0build() {Column(){Image(this.isSelect ==this.btnNavData.id ?this.btnNavData.selectIcon:this.btnNavData.nowIcon).width(20).height(20).offset({ y:this.btnNavData.isQrcode? -15 :0 })}.width("100%").justifyContent(FlexAlign.Center).height("100%")}
}
//  其余文件均为占位,并未编写

day01持续更新中…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/39485.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL 9.0 悄悄上线,支持面向AI的向量数据库

MySQL狂热粉丝群已经发现MySQL官网上MySQL9.0这两天悄然上线,已经可以下载体验了,目前被定义为创新版本(Innovation)。 下载地址:https://dev.mysql.com/downloads/mysql/ 支持主流的操作系统,安装后可以直…

DDD学习笔记六

基类与继承 领域模型中何时发掘和应用基类与继承: 1)基类概念必须是通用语言的一部分,并且对应领域中的一个抽象概念。 2)这个概念必须被进一步细化,才能具备实际业务含义。 3)基类概念被细化的子类存在着不…

QT 线程计时器

qt自带的计时器QTimer是与界面主线程绑定在一起的&#xff0c;如果操作界面有可能会影响计时器的执行&#xff0c;所以查找一些资料写了一个长期运行的线程计时器。 1.线程类的头文件 #ifndef WORKTH_H #define WORKTH_H#include <QDebug> #include <QThread> #i…

分布式服务——注册中心

介绍 想象一下&#xff0c;一个繁忙的周末&#xff0c;阳光明媚&#xff0c;公园里的孩子们在尽情玩耍&#xff0c;大人们则坐在长椅上享受着难得的闲暇时光。突然&#xff0c;一个小女孩跑到一位陌生的先生面前&#xff0c;甜甜地说&#xff1a;“叔叔&#xff0c;你能不能帮…

论坛入门与提升

前言 明确设计思路&#xff0c;精准定位问题&#xff0c;对于我们后期理解迭代工程有很大的帮助。 这就是我们常说的40%设计&#xff0c;20%编写和剩下的40%时间进行调试优化。 今天为大家带来的是通过对论坛的深入了解&#xff0c;来解决大家遇到问题时的迷茫&#xff0c;合…

基于字符和词特征融合的恶意域名检测

传统的恶意域名检测方法在检测由域名生成算法&#xff08;DGA&#xff09;随机生成的恶意域名方面性能不佳&#xff0c;尤其是对于那些由随机单词组成的域名。文章提出了一种新的检测算法&#xff0c;通过融合字符和词特征来提高对恶意域名的检测能力&#xff0c;特别是对于更具…

SpringCloud基础篇

文章目录 创建新模块拷贝yml配置文件修改配置文件的信息修改pom.xml文件启动入口拷贝相关文件接口文档配置配置启动项注册中心原理Nacos注册中心创建nacos数据库存储数据部署nacos在docker容器中 服务注册引入依赖配置Nacos地址启动 服务发现(调用)引入依赖配置nacos地址发现并…

文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《面向电网调峰的电动汽车聚合商多层级实时控制策略》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

通过docker overlay2 目录名查找占用磁盘空间最大的容器名和容器ID

有时候经常会有个别容器占用磁盘空间特别大&#xff0c; 这个时候就需要通过docker overlay2 目录名查找占用磁盘空间最大的容器名和容器ID&#xff1a; 1、 首先进入到 /var/lib/docker/overlay2 目录下,查看谁占用的较多 [rootPPS-97-8-ALI-HD1H overlay2]# cd /var/lib/doc…

Linux基础 - MariaDB 数据库管理系统

目录 零. 简介 一. 安装 二. 基本使用 1. 设置root密码 2. 创建库 3. 创建表 4.添加数据 5. 查看数据 三. 管理表单及数据 四. 数据库的备份及恢复 零. 简介 MariaDB 是一种流行的开源数据库管理系统&#xff0c;它是 MySQL 的一个分支。 MariaDB 保留了与 MySQL 的…

CesiumJS【Basic】- #045 绘制流动线(Entity方式)- 需要自定义着色器

flow 文章目录 绘制流动线(Entity方式)- 需要自定义着色器1 目标2 代码2.1 main.ts绘制流动线(Entity方式)- 需要自定义着色器 1 目标 使用Entity方式绘制流动线 2 代码 2.1 main.ts import * as Cesium from cesium;const viewer = new Cesium

独一无二的设计模式——单例模式(python实现)

1. 引言 大家好&#xff0c;今天我们来聊聊设计模式中的“独一无二”——单例模式。想象一下&#xff0c;我们在开发一个复杂的软件系统&#xff0c;需要一个全局唯一的配置管理器&#xff0c;或者一个统一的日志记录器&#xff1b;如果每次使用这些功能都要创建新的实例&…

IDEA中Maven的配置

目录 1. 安装maven 2. 配置环境变量 3. IDEA中配置Maven 4. 配置仓库目录 1. 安装maven 官网下载地址&#xff1a;Maven – Download Apache Maven 下载后&#xff0c;将zip压缩包解压到某个目录即可。 2. 配置环境变量 变量名称随意&#xff0c;通常为M2_HOME&#xff…

【INTEL(ALTERA)】nios调试器中的重新启动按钮不起作用

目录 说明 解决方法 说明 在 Nios II SBT 调试Eclipse时&#xff0c;如果单击 重新启动 图标&#xff0c; 执行被暂停&#xff0c; 以下错误消息&#xff1a; Dont know how to run. Try "help target." 解决方法 终止程序&#xff0c;再次下载&#xff0c;并启…

MySQL/SqlServer 跨服务器 增删改查(CRUD) 的一种方法

前言&#xff1a;主要是利用SqlServer 的链接服务器功能 1.准备一台 SqlServer Server&#xff0c;服务如下图&#xff1a; 这台服务器专门用于 链接服务器 IP&#xff1a;10.x.x.3 和数据源服务器&#xff08;10.x.x.5&#xff09; 在一个局域网 1.1 版本 是 2017 2.在 10.…

Linux中AWK命令的高级应用与案例分析

Linux中AWK命令的高级应用与案例分析 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; AWK简介与基础概念 AWK是一种强大的文本处理工具&#xff0c;它在Unix和…

吴晓波:企业出海的最佳时间窗口只有5-10年,中国企业如何把握出海机遇?

鼓励企业参与绿色“一带一路”建设&#xff0c;带动先进的环保技术、装备、产能走出去。 出海计划&#xff01;马来西亚水环境项目国际考察暨2024中马水务合作论坛

开通虚拟公户需要哪些条件?有什么优势?

概念&#xff1a;银行虚拟公户&#xff0c;也称为银行虚拟户&#xff0c;是指企业或机构在银行开设的一种特殊类型的银行账户。它与普通银行账户不同&#xff0c;虚拟公户通常不涉及实际的资金流动&#xff0c;而主要用于管理和监控资金流向&#xff0c;以及实现特定的业务和财…

初试总分409分,专业课143,西电821专业

非常感谢自己考研409分上岸西安电子科技大学&#xff0c;杭州研究院&#xff0c;专业课143分&#xff0c;跟的研梦&#xff0c;讲课以及答疑还是非常专业的。 821专业课课本总共有四本&#xff0c;都在官网考纲的参考书里写了&#xff0c;不过主要参考其中两本&#xff0c;一本…

网络爬虫基础知识

文章目录 网络爬虫基础知识爬虫的定义爬虫的工作流程常用技术和工具爬虫的应用1. 抓取天气信息2. 抓取新闻标题3. 抓取股票价格4. 抓取商品价格5. 抓取博客文章标题 网络爬虫基础知识 爬虫的定义 网络爬虫&#xff08;Web Crawler 或 Spider&#xff09;是一种自动化程序&…