【鸿蒙应用】理财App

目录

    • 第一节项目讲解
      • 项目介绍
    • 第二节：项目创建+登录静态框架编写
      • 登录页面设稿
      • 新建项目
      • 控制台添加项目
      • Login页面
      • 封装标题组件
    • 第三节：登录页静态表单编写
    • 第四节—内容页架构分析+底部栏组件
    • 第五节—底部栏组件切换
    • 第六节：首页静态页编写
    • 第七节：钱包+银行卡静态页
    • 第八节：个人中心静态页编写
    • 第九节：编辑资料+二维码生成
    • 第十节：支付页静态编写
    • 第十一节：邮箱认证服务开通流程
      • 选择一个认证服务
      • 下载文件agconnect- services.json
      • 添加应用配置文件
      • 配置SDK依赖
    • 第十二节：发送验证码+校验
    • 第十三节：云函数+云数据库基本使用
    • 第十四节：注册功能实现
    • 第十五节：登录+自动登录功能实现
    • 第十六节：添加银行卡功能实现
    • 第十七节：银行卡内容获取
    • 第十八节：个人数据获取
    • 第十九节：修改个人资料
    • 第二十节：流程梳理+支付事务编写
    • 主要流程
    • 第二十一节：支付功能走通
    • 第二十二节：交易信息查询
    • 第二十三节：上传头像
    • 第二十四节：Server端汇总数据实现
    • 第二十五节：WebView传值原理
    • 第二十六节：webView页面编写
    • 二十八七：分页功能

项目地址
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:20, right: 20, top: 12, bottom: 12 })
  }
}

Login


// 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 第十五节：登录+自动登录功能实现

/**
   * 登录
   */
  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 第二十一节：支付功能走通

如果你要本地调试请使用

  const {payload, action} = event.body

/**

  • 本地调试不需要序列化
  • 远程需要序列化
    */
    // const {payload, action} = JSON.parse(event.body)
    const {payload, action} = event.body
    在这里插入图片描述

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

如果使用

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 二十八七：分页功能
监听列表下拉刷新

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【中级软件设计师】上午题12-软件工程（2）：单元测试、黑盒测试、白盒测试、软件运行与维护

【中级软件设计师】上午题12-软件工程（2）：单元测试、黑盒测试、白盒测试、软件运行与维护

【中级软件设计师】上午题12-软件工程（2） 1 系统测试1.1 单元测试1.2 集成测试1.2.1 自顶向下1.2.2 自顶向上1.2.3 回归测试 2 测试方法2.1 黑盒测试2.1.1 McCabe度量法 2.2 白盒测试2.2.1 语句覆盖-“每个流程”执行一次2.2.2 判定覆盖2.2.3 条件覆盖-A…
阅读更多...
BGP的基本概念和工作原理

BGP的基本概念和工作原理

AS的由来 l Autonomous System 自治系统，为了便于管理规模不断扩大的网络，将网络划分为不同的AS l 不同AS通过AS号区分，AS号取值范围1－65535，其中64512－65535是私有AS号 l IANA机构负责AS号的分发 AS之…
阅读更多...
Ubuntu关闭防火墙、关闭selinux、关闭swap

Ubuntu关闭防火墙、关闭selinux、关闭swap

关闭防火墙 打开终端，然后输入如下命令，查看防火墙状态： sudo ufw status 开启防火墙命令如下： sudo ufw enable 关闭防火墙命令如下： sudo ufw disable 关闭selinux setenforce 0 && sed -i s/SELINUXe…
阅读更多...
Android kotlin 协程异步async与await介绍与使用

Android kotlin 协程异步async与await介绍与使用

一、介绍 在kotlin语言中，协程是一个处理耗时的操作，但是很多人都知道同步和异步，但是不知道该如何正确的使用，如果处理不好，看似异步，其实在runBloacking模块中使用的结果是同步的。 针对如何同步和如何异…
阅读更多...
鸿蒙应用ArkTS开发- 选择图片、文件和拍照功能实现

鸿蒙应用ArkTS开发- 选择图片、文件和拍照功能实现

前言 在使用App的时候，我们经常会在一些社交软件中聊天时发一些图片或者文件之类的多媒体文件，那在鸿蒙原生应用中，我们怎么开发这样的功能呢？ 本文会给大家对这个功能点进行讲解，我们采用的是拉起系统组件来进行图片…
阅读更多...
03-JAVA设计模式-备忘录模式

03-JAVA设计模式-备忘录模式

备忘录模式 什么是备忘录模式 Java中的备忘录模式（Memento Pattern）是一种行为型设计模式，它允许在不破坏封装性的前提下捕获一个对象的内部状态，并在该对象之外保存这个状态，以便以后可以将对象恢复到原先保存的状态…
阅读更多...
Ansible自动化

Ansible自动化

Ansible自动化 自动化的需求： 1. 在什么样的场景下需要自动化？ 批量化的工作： 装软件包、配置服务、升级、下发文件… 2. 为什么在自动化工具中选择ansible？ 对比shell脚本： 相对于用shell的脚本来实现自动化&#x…
阅读更多...
18.Nacos配置管理-微服务读取Nacos中的配置

18.Nacos配置管理-微服务读取Nacos中的配置

需要解决的问题 1.实现配置更改热更新，而不是改动了配置文件还要去重启服务才能生效。 2.对多个微服务的配置文件统一集中管理。而不是需要对每个微服务逐一去修改配置文件，特别是公共通用的配置。 配置管理服务中的配置发生改变后，回去立…
阅读更多...
主成分分析（PCA）：揭秘数据的隐藏结构

主成分分析（PCA）：揭秘数据的隐藏结构

在数据分析的世界里，我们经常面临着处理高维数据的挑战。随着维度的增加，数据处理、可视化以及解释的难度也随之增加，这就是所谓的“维度的诅咒”。主成分分析（PCA）是一种强大的统计工具，用于减少数据的维度…
阅读更多...
python爬虫插件XPath的安装

python爬虫插件XPath的安装

概要 XPath Helper是一款专用于chrome内核浏览器的实用型爬虫网页解析工具。XPath可以轻松快捷地找到目标信息对应的Xpath节点，获取xpath规则，并提取目标信息，并进行校对测试；可对查询出的xpath进行编辑，正确编辑的结…
阅读更多...
计算机网络和因特网

计算机网络和因特网

Internet: 主机/端系统（end System / host）： 硬件 操作系统 网络应用程序 通信链路： 光纤、网络电缆、无线电、卫星 传输效率：带宽（bps） 分组交换设备：转达分组 包括&#…
阅读更多...
DAP-seq助力揭示转录因子在草地贪夜蛾Bt抗性中重要作用

DAP-seq助力揭示转录因子在草地贪夜蛾Bt抗性中重要作用

2024年4月6日，武汉生物工程学院生命科学与技术学院刘磊磊课题组在International Journal of Biological Macromolecules（中科院一区，影响因子8.2）期刊在线发表了“Contribution of the transcription factor SfGATAe to Bt Cry to…
阅读更多...
# 从浅入深 学习 SpringCloud 微服务架构（六）Feign（3）

# 从浅入深 学习 SpringCloud 微服务架构（六）Feign（3）

从浅入深 学习 SpringCloud 微服务架构（六）Feign（3） 一、组件的使用方式总结 1、注册中心 1） Eureka 搭建注册中心 引入依赖 spring-cloud-starter-netflix-eureka-server。 配置 EurekaServer。 通过 EnableEure…
阅读更多...
Delta模拟器：iOS上的复古游戏天堂

Delta模拟器：iOS上的复古游戏天堂

Delta模拟器：iOS上的复古游戏天堂 在数字时代，我们有时会怀念起那些早期的电子游戏，它们简单、纯粹，带给我们无尽的乐趣。虽然现在的游戏在画质和玩法上都有了巨大的提升，但那种复古的感觉却始终无法替代。幸运的是&a…
阅读更多...
Pytorch迁移学习训练病变分类模型

Pytorch迁移学习训练病变分类模型

划分数据集 1.创建训练集文件夹和测试集文件夹 # 创建 train 文件夹 os.mkdir(os.path.join(dataset_path, train))# 创建 test 文件夹 os.mkdir(os.path.join(dataset_path, val))# 在 train 和 test 文件夹中创建各类别子文件夹 for Retinopathy in classes:os.mkdir(os.pa…
阅读更多...
抽象工厂模式（Redis 集群升级）

抽象工厂模式（Redis 集群升级）

目录 定义 Redis 集群升级 模拟单机服务 RedisUtils 模拟集群 EGM 模拟集群 IIR 定义使⽤接⼝ 实现调⽤代码 代码实现 定义适配接⼝ 实现集群使⽤服务 EGMCacheAdapter IIRCacheAdapter 定义抽象⼯程代理类和实现 JDKProxy JDKInvocationHandler 测试验证 定义 …
阅读更多...
ClickHouse 如何实现数据一致性

ClickHouse 如何实现数据一致性

文章目录 ReplacingMegreTree 引擎数据一致性实现方式1.ReplacingMegreTree 引擎2.ReplacingMegreTree 引擎 手动合并3.ReplacingMegreTree 引擎 FINAL 查询4.ReplacingMegreTree 引擎 标记 GroupBy5.允许偏差 前言：在大数据中，基本上所有组件都要求…
阅读更多...
硬件玩物 | 性价比超高的NAS，威联通【TS-464-C2】快速上手初体验!

硬件玩物 | 性价比超高的NAS，威联通【TS-464-C2】快速上手初体验!

[ 知识是人生的灯塔，只有不断学习，才能照亮前行的道路。] 大家好，我是【WeiyiGeek/唯一极客】一个正在向全栈工程师(SecDevOps)前进的技术爱好者 作者微信：WeiyiGeeker 公众号/知识星球：全栈工程师修炼指南 主页博…
阅读更多...
1、k8s问题pod从service中剔除

1、k8s问题pod从service中剔除

一、起因 redis原来由两服务器的集群变为三服务器的集群，通过statefulset扩展了两节点，并把redis-app-0和redis-app-3从集群中去除，但是由于service路由后端不变，导致程序连接后端仍然可能到redis-app-0和redis-app-3 二、处理 …
阅读更多...
【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效，描边及阴影特效

【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效，描边及阴影特效

前言 【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效，描边及阴影特效一、UGUI特效插件：UIEffect1.1 介绍 二、组件属性面板三、代码操作组件 总结 前言 在Unity中 UGUI 的使用几乎是必不可少的，虽然也有NGUI、FGUI等可以使用&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023