【鸿蒙应用】理财App

项目地址
https://gitee.com/cheng_yong_xu/managemoney

第一节项目讲解

项目介绍

这款专为个人财务管理而设计的强大应用。通过智能化的技术和用户友好的界面,我们致力于帮助您轻松管理
财务、掌握支出和收入,从而更好地规划您的财务未来。课程中内容包括页面搭建以及服务端编写。服务端完
全使用鸿蒙提供的serverless也就是端云-体化的能力。课程中这款应用部分页面采用webView ,可以详细了
解鸿蒙中使用webView相关注意点。

设计稿

第二节：项目创建+登录静态框架编写

登录页面设稿

新建项目

控制台添加项目

需要安装模拟器

根据设计搞写页面

Login页面

先写个Login页面，修改程序入口

删除一些初始化的文件，并引入一些资源（图片图标）

封装标题组件

// src/main/ets/components/TitleComponent.ets

@Component
export default struct TitleComponent {
   
  @Prop title: string
  isBack = false

  build() {
   
    Flex({
     justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
   
      Image(this.isBack ? $r('app.media.Button_left') : "")
        .width(44)
        .height(44)
        .objectFit(ImageFit.ScaleDown)
      Text(this.title)
        .fontColor('rgb(1,23,73)')
        .fontWeight(700)
        .fontSize(20)
      Text('')
        .width(44)
        .height(44)
    }
    .padding({
   left