【鸿蒙应用】理财App

pacong2024-05-01 21:53

目录

项目地址

https://gitee.com/cheng_yong_xu/managemoney

第一节项目讲解

项目介绍

这款专为个人财务管理而设计的强大应用。通过智能化的技术和用户友好的界面,我们致力于帮助您轻松管理

财务、掌握支出和收入,从而更好地规划您的财务未来。课程中内容包括页面搭建以及服务端编写。服务端完

全使用鸿蒙提供的serverless也就是端云-体化的能力。课程中这款应用部分页面采用webView ,可以详细了

解鸿蒙中使用webView相关注意点。

设计稿

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

登录页面设稿

新建项目





控制台添加项目








需要安装模拟器

根据设计搞写页面

Login页面

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

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

封装标题组件

javascript 复制代码 
// 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:20, right: 20, top: 12, bottom: 12 })
  }
}

Login

javascript 复制代码 
// src/main/ets/pages/Login.ets

import TitleComponent from '../components//TitleComponent'

@Entry
@Component
struct Login {
  @State message: string = '你好'

  build() {
    Flex({wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Center}){
      // 标题
      TitleComponent({ title: '登录' })
      // 表单内容
      Column(){
        // 钱币Logo浮在上面层叠布局
        Stack(){
          Image($r('app.media.Login_icon'))
            .width(88)
            .height(88)
            .offset({ y: -44 })  // 向上偏移
        }
      }
      .width('90%')
      .height('100%')
      .borderRadius(20)
      .backgroundColor(Color.White)
      .margin({top:44})
      .padding({left:14, right:14})
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.base_background'))
  }
}

效果

第三节：登录页静态表单编写

详细修改查看git分支 03 【第三节：登录页静态表单编写】

  1. 创建Input组件
  2. 在Login页面中使用

效果

第四节---内容页架构分析+底部栏组件

详细修改查看git分支 04 【第四节---内容页架构分析+底部栏组件】

效果

第五节---底部栏组件切换

详细修改查看git分支 05 【第五节---底部栏组件切换】

效果

第六节：首页静态页编写

详细修改查看git分支 06 【第六节：首页静态页编写】

效果

第七节：钱包+银行卡静态页

详细修改查看git分支 07 【第七节：钱包+银行卡静态页】

钱包页面设计稿

银行卡静态页计稿

效果

第八节：个人中心静态页编写

详细修改查看git分支 08 【第八节：个人中心静态页编写】

设计稿

效果

第九节：编辑资料+二维码生成

详细修改查看git分支 09 【第九节：编辑资料+二维码生成】

效果


第十节：支付页静态编写

详细修改查看git分支 10【第十节：支付页静态编写】

设计稿

效果

第十一节：邮箱认证服务开通流程

按照官网流程走

官网指南里有文档

选择一个认证服务

下载文件agconnect- services.json

添加应用配置文件

配置SDK依赖

第十二节：发送验证码+校验

12 发送验证码+校验

验证登录



错误信息显示用户已经注册过了


新增存储区

第十三节：云函数+云数据库基本使用

查看云函数

在本地创建云函数


本地调试

查看云函数

可以看到日志





调试

可以看到data是个空数组

我们开始在数据库里添加数据

再次查询

第十四节：注册功能实现

分支 14 【第十四节：注册功能实现】

目前还没有了解怎么配置忽略文件导致git提交的变化太多，主要是一些包可以忽略

变化的是这4个文件

使用邮箱注册，注册成功会看到新增用户

注意你如果只有一个邮箱账号测试，现在认证服务，用户里把邮箱删了再运行注册代码

第十五节：登录+自动登录功能实现

分支15 第十五节：登录+自动登录功能实现

javascript 复制代码 
/**
   * 登录
   */
  async doLogin() {
    // 使用APPGallery connect 进行用户身份登录

    // 多使用try catch app开发程序崩溃直接闪退，使用try catch及时发现原因
    try {
      // 使用邮箱密码登录
      const credential = EmailAuthProvider.credentialWithPassword(this.email, this.password)
      // 执行登录
      const user = await agconnect.auth().signIn(credential)
      // 如果用户已经登录那么可以你直接进入app
      if (user) {
        this.goMain()
      }
    }catch(err){
      console.error(err, '登录失败')
    }

  }

  goMain () {
    try {
      router.replaceUrl({url: 'pages/MainPage/MainPage'})
    } catch (err) {
      console.log(err, '错误')
    }
  }
  /**
   * 判断当前用户是否登录
   * @returns
   */

  async checkIfLogin () {
    const user = await agconnect.auth().getCurrentUser()
    return user !== null
  }

  async onPageShow() {
    try {
      const ifLogin = await this.checkIfLogin()
      if (ifLogin) {
        // 已经登录
        this.goMain()
      }
    } catch (err) {
      console.log(err, '未登录')
    }
  }

第十六节：添加银行卡功能实现

新建表

字段

注意： 这里amount 的类型，我设置错了，导致后面加减计算出现问题

创建云函数并添加配置文件，下载对应的包

上传云函数

端侧使用云函数

控制台查看数据

第十七节：银行卡内容获取

分支 17 第十七节：银行卡内容获取

云侧：编写查询数据库的代码

端侧：获取云测给的数据，渲染到页面

注意：云侧代码写完后接的上传云函数

效果

第十八节：个人数据获取

分支 18 第十八节：个人数据获取

云侧：编写查询数据库的代码

端侧：获取云测给的数据，渲染到页面

注意：云侧代码写完后接的上传云函数

第十九节：修改个人资料

分支19 第十九节：修改个人资料

第二十节：流程梳理+支付事务编写

主要流程

  • 现在有两个用户分别称为用户A和用户B
  • 用户A和用户B都通过邮箱注册账号
  • 注册完后都可以去个人页面进行名称修改
  • 去钱包页面通过添加按钮进行银行卡的添加
  • 用户A和用户B都添加完银行卡后，去往用户A的个人页面
  • 打开A的二维码，进行扫码获取到用户的uid
  • 切换到B，在用户B主页-转账 把跳转参数修改为用户A的uid
  • 点击转账此时会显示支付弹框
  • 支付弹框内会显示A的姓名、邮箱、银行卡信息
  • 点击支付支付完成后回到主页
  • 此时、用户B的卡片余额会减少，切换到 数据页面 可以看到 最近联系人 支付记录 收入支出汇总
  • 切换到用户A 切换到 数据页面 可以看到 最近联系人 支付记录 收入支出汇总

添加支付记录表

第二十一节：支付功能走通

分支21 第二十一节：支付功能走通

如果你要本地调试请使用

javascript 复制代码 
  const {payload, action} = event.body

/**

  • 本地调试不需要序列化
  • 远程需要序列化
    */
    // const {payload, action} = JSON.parse(event.body)
    const {payload, action} = event.body

注意: 只要修改云函数，必须上传云函数

如果使用

javascript 复制代码 
const {payload, action} = JSON.parse(event.body)

在本地调试，会报错

第二十二节：交易信息查询

分支22 第二十二节：交易信息查询

查询两个用户的信息，分页，排序

第二十三节：上传头像

分支 23 第二十三节：上传头像

需要从文件里读取图片，转成base64

第二十四节：Server端汇总数据实现

分支 24 二十四节：Server端汇总数据实现

第二十五节：WebView传值原理

分支 25 第二十五节：WebView传值原理、页面编写

  1. 在WebView里无法操作外部数据，所以我们需要将外部数据传给WebView所在的页面，再从页面传给WebView

  2. 使用vue,js不能用cdn，所以在项目中直接放的vue,js源码

  3. 我们不可以使用浏览器调试，所以调试的时候需要监听onConsole，才能在日志打印调试信息

第二十六节：webView页面编写

分支 25 第二十五节：WebView传值原理、页面编写

和我们正常的写前端页面是一样的

有个bug

由于在数据库设置字段的时候，amount设置成String类型

导致操作数据库，拿到amount进行加减的时候出现了字符加减的情况，

试图将amount设置成integer，但是在获取数据的时候拿不到amount，拿到的是null，不知道是为什么

二十八七：分页功能

分支 26 二十八七：分页功能

监听列表下拉刷新

相关推荐
沈剑心5 小时前
如何在鸿蒙系统上实现「沉浸式」页面？
前端·harmonyos
Georgewu6 小时前
【HarmonyOS】鸿蒙应用加载读取csv文件
前端·harmonyos
Georgewu6 小时前
【HarmonyOS】 鸿蒙图片或视频保存相册
前端·harmonyos
准橙考典10 小时前
如何考驾照？
物联网·安全·华为·自动驾驶·汽车
川石教育12 小时前
鸿蒙开发-ArkTS 中使用 filter 组件
harmonyos·鸿蒙·鸿蒙应用开发·鸿蒙开发·鸿蒙开发培训·arkts语言
李洋-蛟龙腾飞公司12 小时前
HarmonyOS Next 应用元服务开发-分布式数据对象迁移数据权限与基础数据
分布式·华为·harmonyos
Damon小智12 小时前
HarmonyOS NEXT 技术实践-实现音乐服务卡片
华为·harmonyos·鸿蒙·harmonyos next·服务卡片
play_big_knife12 小时前
鸿蒙项目云捐助第十七讲云捐助我的页面上半部分的实现
华为·harmonyos·鸿蒙·云开发·鸿蒙开发·鸿蒙next·华为云开发
枫叶丹418 小时前
【HarmonyOS之旅】HarmonyOS开发基础知识(三)
华为od·华为·华为云·harmonyos
SoraLuna1 天前
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
开发语言·macos·ui·华为·harmonyos
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07构建高效的广告投放系统：应用架构的设计与实现08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10【一文读懂】NTN（非地面网络）技术介绍