【鸿蒙应用】理财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: 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.rhkb.cn/news/315485.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

STM32与OLED显示屏通信(四针脚和七阵脚)

STM32与OLED显示屏通信(四针脚和七阵脚)

系列文章目录 STM32单片机系列专栏 C语言术语和结构总结专栏 文章目录 1. 单片机调试 2. OLED简介 3. 接线 4. OLED驱动函数 4.1 四针脚版本 OLED.c OLED.h OLED_Font.h 4.2 七针脚版本 引脚连接 OLED.c OLED.h OLED_Font.h 5. 主函数 工程文件模板 1. 单片机…
阅读更多...
Spark和Hadoop的安装

Spark和Hadoop的安装

实验内容和要求 1．安装Hadoop和Spark 进入Linux系统，完成Hadoop伪分布式模式的安装。完成Hadoop的安装以后，再安装Spark（Local模式）。 2．HDFS常用操作 使用hadoop用户名登录进入Linux系统，启动…
阅读更多...
CSS 之 transition过渡动画

CSS 之 transition过渡动画

一、简介 ​ CSS 制作 Web 动画有两种方式： 帧动画（Keyframe Animation）和过渡动画（Transition Animation）。针对不同的业务场景中，我们应该选择不同的动画方式，通常来说：对于交互元…
阅读更多...
从虚拟化走向云原生，红帽OpenShift“一手托两家”

从虚拟化走向云原生，红帽OpenShift“一手托两家”

汽车行业已经迈入“软件定义汽车”的新时代。吉利汽车很清醒地意识到，只有通过云原生技术和数字化转型，才能巩固其作为中国领先汽车制造商的地位。 和很多传统企业一样，吉利汽车在走向云原生的过程中也经历了稳态业务与敏态业务并存带来的前所…
阅读更多...
微信第三方开放平台，实现代公众号保留排版样式和图片发布文章

微信第三方开放平台，实现代公众号保留排版样式和图片发布文章

大家好，我是小悟 要想实现代公众号发布文章的功能，就得接入富文本编辑器，市面上富文本编辑器有很多，轻量的、重量的都有。 从开发者的角度，自然把轻量作为第一选择，因为好对接，怎么方便怎么来…
阅读更多...
【Python】爬虫-基础入门

【Python】爬虫-基础入门

目录 一、什么是爬虫 二、爬虫的主要用途 三、学会爬虫需要掌握的技能 四、爬虫使用的语言 五、编写爬虫需要的库，以python为例 六、爬虫示例-python 示例一 示例二 示例三 一、什么是爬虫 爬虫，又称网络爬虫或网页爬虫，是一种用来自…
阅读更多...
Windows电脑中护眼（夜间）模式的开启异常

Windows电脑中护眼（夜间）模式的开启异常

我的电脑是联想小新16pro，Windows11版本。之前一直可以正常使用夜间模式，但是经过一次电脑的版本更新之后，我重启电脑发现我的夜间模式不能使用了。明明显示开启状态，但是却不能使用，电脑还是无法显示夜间模式。 询问…
阅读更多...
Drive Scope for Mac：硬盘健康监测分析工具

Drive Scope for Mac：硬盘健康监测分析工具

Drive Scope for Mac是一款专为Mac用户设计的硬盘健康监测与分析工具，致力于保障用户的数据安全。这款软件功能强大且操作简便，能够实时检测硬盘的各项指标，帮助用户及时发现并解决潜在问题。 Drive Scope for Mac 1.2.23注册激活版下载 Driv…
阅读更多...
图像处理：乘法滤波器（Multiplying Filter）和逆FFT位移

图像处理：乘法滤波器（Multiplying Filter）和逆FFT位移

一、乘法滤波器（Multiplying Filter） 乘法滤波器是一种以像素值为权重的滤波器，它通过将滤波器的权重与图像的像素值相乘，来获得滤波后的像素值。具体地，假设乘法滤波器的权重为h(i,j)，图像的像素值为f(m,…
阅读更多...
基于CANoe从零创建以太网诊断工程（2）—— TCP/IP Stack 配置的三种选项

基于CANoe从零创建以太网诊断工程（2）—— TCP/IP Stack 配置的三种选项

🍅 我是蚂蚁小兵，专注于车载诊断领域，尤其擅长于对CANoe工具的使用🍅 寻找组织 ，答疑解惑，摸鱼聊天，博客源码，点击加入👉【相亲相爱一家人】🍅 玩转CANoe&…
阅读更多...
经典的目标检测算法有哪些？

经典的目标检测算法有哪些？

一、经典的目标检测算法有哪些？ 目标检测算法根据其处理流程可以分为两大类：One-Stage（单阶段）算法和Two-Stage（两阶段）算法。以下是一些经典的目标检测算法： 单阶段算法: YOLO (You Only Loo…
阅读更多...
前端三大件速成 01 HTML

前端三大件速成 01 HTML

文章目录 一、前端基础知识二、标签1、什么是标签2、标签的属性3、常用标签（1）声明（2）注释（3）html 根标签（3）head标签（4）body标签 三、特殊字符四、其他标签1…
阅读更多...
xhEditor实现WORD粘贴图片自动上传

xhEditor实现WORD粘贴图片自动上传

1.下载示例： 从官网下载 http://www.ncmem.com/webapp/wordpaster/versions.aspx 从gitee中下载 https://gitee.com/xproer/wordpaster-php-xheditor1x 2.将插件目录复制到项目中 3.引入插件文件 定义插件图标 初始化插件，在工具栏中添加插件按钮 效果…
阅读更多...
Kafka源码分析(四) - Server端-请求处理框架

Kafka源码分析(四) - Server端-请求处理框架

系列文章目录 Kafka源码分析-目录 一. 总体结构 先给一张概览图： 服务端请求处理过程涉及到两个模块：kafka.network和kafka.server。 1.1 kafka.network 该包是kafka底层模块，提供了服务端NIO通信能力基础。 有4个核心类：…
阅读更多...
PotatoPie 4.0 实验教程(24) —— FPGA实现摄像头图像中心差分变换

PotatoPie 4.0 实验教程(24) —— FPGA实现摄像头图像中心差分变换

为什么要对图像进行中心差分变换？ 对图像进行中心差分变换的主要目的是计算图像中每个像素点的梯度。梯度在图像处理中是一个非常重要的概念，它可以用来描述图像中灰度变化的快慢和方向，常用于边缘检测、特征提取和图像增强等任务中。 具体…
阅读更多...
【GitHub】2FA认证（双重身份验证）

【GitHub】2FA认证（双重身份验证）

GitHub 2FA认证（双重身份验证） 写在最前面一、使用 TOTP 应用程序配置双2FA（双因素身份验证）1. 介绍2. github3. 认证 官网介绍小结 & 补充 ：权限不足or验证码错误问题 🌈你好呀！我是 是Yu欸…
阅读更多...
CCS项目持续集成

CCS项目持续集成

​ 因工作需要，用户提出希望可以做ccs项目的持续集成，及代码提交后能够自动编译并提交到svn。调研过jenkins之后发现重新手写更有性价比，所以肝了几晚终于搞出来了，现在分享出来。 ​ 先交代背景： 1. 代码分两部分&am…
阅读更多...
C++设计模式：适配器模式（十四）

C++设计模式：适配器模式（十四）

1、定义与动机 定义：将一个类的接口转换成客户希望的另外一个接口。Adapter模式使得原本由于接口不兼容而不能一起工作的哪些类可以一起工作。 动机： 在软件系统中，由于应用环境的变化，常常需要将“一些现存的对象”放在新的环境…
阅读更多...
【前端缓存】localStorage是同步还是异步的？为什么？

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

写在开头 点赞 收藏 学会 首先明确一点，localStorage是同步的 一、首先为什么会有这样的问题 localStorage 是 Web Storage API 的一部分，它提供了一种存储键值对的机制。localStorage 的数据是持久存储在用户的硬盘上的，而不是内存。这意…
阅读更多...
Professional CUDA C Programming

Professional CUDA C Programming

2023/4/28 1.使用nvfrof时，报错 解决方法： 将路径 C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v12.4\extras\CUPTI\lib64 下的文件cupti64_2020.2.0.dll复制到路径 C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.1\bin下即可。 2…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023