【鸿蒙应用】理财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 二十八七：分页功能

监听列表下拉刷新

相关推荐
zhongcx5 小时前
鸿蒙应用示例：镂空效果实现教程
harmonyos
训山6 小时前
【11】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-模块化语法与自定义组件
笔记·学习·华为·harmonyos·鸿蒙系统
helloxmg7 小时前
鸿蒙harmonyos next flutter混合开发之开发package
flutter·华为·harmonyos
zhongcx1 天前
鸿蒙应用示例：ArkTS UI框架中的文本缩进技巧
harmonyos
东林知识库1 天前
鸿蒙NEXT开发-自定义构建函数（基于最新api12稳定版）
华为·harmonyos
裴云飞1 天前
鸿蒙性能优化之布局优化
性能优化·harmonyos
zhongcx1 天前
鸿蒙应用示例：ArkTS中设置颜色透明度与颜色渐变方案探讨
harmonyos
真正的醒悟1 天前
华为资源分享
运维·服务器·华为
PlumCarefree2 天前
mp4(H.265编码)转为本地RTSP流
音视频·harmonyos·h.265
鸿蒙自习室2 天前
鸿蒙网络管理模块04——网络连接管理
华为·harmonyos·鸿蒙·媒体
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache