【鸿蒙应用】理财App

news/2024/5/15 2:54:00

目录

    • 第一节项目讲解
      • 项目介绍
    • 第二节：项目创建+登录静态框架编写
      • 登录页面设稿
      • 新建项目
      • 控制台添加项目
      • 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: stringisBack = falsebuild() {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.etsimport 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)// 如果用户已经登录那么可以你直接进入appif (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 二十八七：分页功能
监听列表下拉刷新


http://www.mrgr.cn/p/87748142

相关文章

upload-labs通关

upload-labs通关

前记： 在这里面我们使用一句话木马时使用php里的一个函数phpinfo（），该函数能显示出网页具体的php版本和有关的信息。 pass-01（js前端验证） 方法1：禁用js/删除js验证 1.禁用js 按f12&#xff…
阅读更多...
【前端缓存】localStorage是同步还是异步的？为什么？

【前端缓存】localStorage是同步还是异步的？为什么？

写在开头 点赞 收藏 学会 首先明确一点，localStorage是同步的 一、首先为什么会有这样的问题 localStorage 是 Web Storage API 的一部分，它提供了一种存储键值对的机制。localStorage 的数据是持久存储在用户的硬盘上的，而不是内存。这意…
阅读更多...
新装电脑Flutter环境部署坑汇总(持续更新)

新装电脑Flutter环境部署坑汇总(持续更新)

1.本地安装，安装fvm的坑 本人电脑使用windows ，安装fvm则一般使用choco安装，那么首先需要安装choco,打开powershell/或者cmd运行以下命令： Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager…
阅读更多...
C#设计树形程序界面的方法：创建特殊窗体

C#设计树形程序界面的方法：创建特殊窗体

目录 1.TreeView控件 2.实例 （1）Resources.Designer.cs （2）Form1.Designer.cs （3）Form1.cs （4）生成效果 以树形来显示程序的菜单，可以更直观、更快捷地对窗体进行…
阅读更多...
Kafka 3.x.x 入门到精通（02）——对标尚硅谷Kafka教程

Kafka 3.x.x 入门到精通（02）——对标尚硅谷Kafka教程

Kafka 3.x.x 入门到精通（02）——对标尚硅谷Kafka教程 2. Kafka基础2.1 集群部署2.1.1 解压文件2.1.2 安装ZooKeeper2.1.3 安装Kafka2.1.4 封装启动脚本 2.2 集群启动2.2.1 相关概念2.2.1.1 代理：Broker2.2.1.2 控制器：Controller …
阅读更多...
【论文阅读】互连网络的负载平衡路由算法 (RLB RLBth)

【论文阅读】互连网络的负载平衡路由算法 (RLB RLBth)

前言Oblivious Load Balancing 不经意路由负载平衡 1. oblivious routing 不经意/无关路由的背景知识 1. oblivious routing, adaptive routing & minimal/non-minimal routing algorithms 2. RLB and RLBth 1. Motivation of Balancing load 平衡负载的动机2. 一维 ring 的…
阅读更多...
【论文阅读】ViTAE:Vision transformer advanced by exploring intrinsic inductive bias

【论文阅读】ViTAE:Vision transformer advanced by exploring intrinsic inductive bias

ViTAE:Vision transformer advanced by exploring intrinsic inductive bias 论文地址摘要：简介：3 方法论3.1 重温视觉变压器3.2 ViTAE3.3 缩减单元3.4 Normal cell3.5 模型细节 4 训练4.1 Implementation details4.2 Comparison with the state-of-the-…
阅读更多...
Python高阶--闭包

Python高阶--闭包

闭包作用：可以用来在一个函数与一组私有变量之间创建关联关系，在给定函数被多次调用的过程中，这些私有变量能够保持其持久性（保存运行环境与变量的状态） 闭包的特征：1.必须要有函数的嵌套，而且外层函数必须返回内层函数。外层函数相当于给内层函数提供了一个包装起来的运…
阅读更多...
实验五 Spark SQL编程初级实践

实验五 Spark SQL编程初级实践

Spark SQL编程初级实践 Spark SQL基本操作 将下列JSON格式数据复制到Linux系统中，并保存命名为employee.json。 { "id":1 , "name":" Ella" , "age":36 } { "id":2, "name":"Bob","a…
阅读更多...
数据结构和算法：贪心

数据结构和算法：贪心

贪心算法 贪心算法是一种常见的解决优化问题的算法，其基本思想是在问题的每个决策阶段，都选择当前看起来最优的选择，即贪心地做出局部最优的决策，以期获得全局最优解。 贪心算法和动态规划都常用于解决优化问题。它们之间存在一…
阅读更多...
【数据结构】最小生成树（Prim算法、Kruskal算法）解析+完整代码

【数据结构】最小生成树（Prim算法、Kruskal算法）解析+完整代码

5.1 最小生成树 定义 对一个带权连通无向图 G ( V , E ) G(V,E) G(V,E)，生成树不同，每棵树的权（即树中所有边上的权值之和）也可能不同。 设R为G的所有生成树的集合，若T为R中边的权值之和最小的生成树，则T称…
阅读更多...
使用大卫的k8s监控面板（k8s+prometheus+grafana）

使用大卫的k8s监控面板（k8s+prometheus+grafana）

问题 书接上回，对EKS（AWS云k8s）启用AMP（AWS云Prometheus）监控AMG(AWS云 grafana)，上次我们只是配通了EKSAMPAMG的监控路径。这次使用一位大卫老师的grafana的面板，具体地址如下： ht…
阅读更多...
【idea】idea 中 git 分支多个提交合并一个提交到新的分支

【idea】idea 中 git 分支多个提交合并一个提交到新的分支

一、方法原理讲解 我们在 dev 分支对不同的代码文件做了多次提交。现在我们想要把这些提交都合并到 test 分支。首先我们要明白四个 git 操作， commit：命令用于将你的代码变更保存到本地代码仓库中，它创建了一个新的提交（commit…
阅读更多...
干货整理：好用的文件加密软件有哪些

干货整理：好用的文件加密软件有哪些

说到文件加密，想必大家都很熟悉，文件加密已经普遍应用，文件加密是一种重要的安全措施，可以确保数据的机密性、完整性和可用性，降低因数据泄露或丢失带来的风险。 下面小编给大家分享几款常用的加密软件，大…
阅读更多...
Spark和Hadoop的安装

Spark和Hadoop的安装

实验内容和要求 1．安装Hadoop和Spark 进入Linux系统，完成Hadoop伪分布式模式的安装。完成Hadoop的安装以后，再安装Spark（Local模式）。 2．HDFS常用操作 使用hadoop用户名登录进入Linux系统，启动…
阅读更多...
【Flink入门修炼】2-3 Flink Checkpoint 原理机制

【Flink入门修炼】2-3 Flink Checkpoint 原理机制

如果让你来做一个有状态流式应用的故障恢复，你会如何来做呢？ 单机和多机会遇到什么不同的问题？ Flink Checkpoint 是做什么用的？原理是什么？ 一、什么是 Checkpoint？ Checkpoint 是对当前运行状态的完整记…
阅读更多...
IDM下载器_Internet Download Manager 6.42.7

IDM下载器_Internet Download Manager 6.42.7

网盘下载 IDM下载器是一款针对互联网所打造的下载管理器。IDM下载器能将下载速度提高5倍，恢复因丢失的连接，网络问题，计算机关闭或意外断电而重新启动中断或中断的下载。IDM下载器还可支持所有流行的浏览器，以使用独特的“高级浏…
阅读更多...
论文解读：(VPT)Visual Prompt Tuning

论文解读：(VPT)Visual Prompt Tuning

文章汇总 要解决的问题 大型模型应用于下游任务本身就存在挑战。最明显的(通常也是最有效的)适应策略是对预先训练好的模型进行全面的端到端微调。 动机 只微调参数的一个子集 解决的办法 只在输入空间中引入少量特定于任务的可学习参数，而在下游训练期间冻结…
阅读更多...
03-JAVA设计模式-策略模式

03-JAVA设计模式-策略模式

策略模式 什么是策略模式 策略模式（Strategy Pattern）是行为设计模式之一，它使你能在运行时改变对象的行为。在策略模式中，一个类的行为或其算法可以在运行时更改。这种类型的设计模式属于行为模式。 在策略模式中，…
阅读更多...
Matlab 使用subplot绘制多个子图，一元拟合

Matlab 使用subplot绘制多个子图，一元拟合

实现效果： clc; clear;filename sri.xlsx; % 确认文件路径data readtable(filename); datavalue data{:,2:end}; datavalue datavalue;fig figure(Position, [0, 0, 1500, 900]); indexString ["(a)","(b)","(c)","(d)&qu…
阅读更多...
推荐文章

Copyright @ 2022~2023