【鸿蒙应用】理财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.mzph.cn/web/3296.shtml

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

相关文章

注释掉的代码们

注释掉的代码们

<!--从后端接受来的数据展示&#xff0c;所以vo中有什么这里可以选择写什么&#xff0c;所以可以写自定义的一些name--><!--数据需要返回后端所以数据库后端需要什么样的数据绑什么样的数据&#xff0c;存的是教师id不是name-->import {TreeSelect} from ‘bestvik…
阅读更多...
第十、十一章、十二章 折线图 + 地图 + 柱状图的绘制

第十、十一章、十二章 折线图 + 地图 + 柱状图的绘制

第十章 折线图的绘制 官网&#xff1a;pyecharts - A Python Echarts Plotting Library built with love. 画廊官网&#xff1a;Document 懒人工具&#xff1a;懒人工具-手机APP工具下载-手机软件下载大全 - 173软件站 (ab173.com) 导学 json 定义 &#xff08;1&#xff…
阅读更多...
js的算法-交换排序（冒泡）

js的算法-交换排序（冒泡）

交换排序 所谓交换排序&#xff0c;是指根据序列中两个元素关键字的比较结果来对换这两个记录在序列中的位置。基于交换的排序算法很多&#xff0c;本次介绍冒泡排序和快速排序。 冒泡 基本思想 从后往前&#xff08;或从前往后&#xff09;两两比较相邻元素的值&#xff0…
阅读更多...
开启医疗数据新纪元：山海鲸可视化智慧医疗解决方案

开启医疗数据新纪元：山海鲸可视化智慧医疗解决方案

在数字化浪潮席卷而来的今天&#xff0c;智慧医疗作为医疗行业的创新力量&#xff0c;正以其独特的技术优势&#xff0c;推动着医疗服务的升级和变革。而在这场变革中&#xff0c;山海鲸可视化以其出色的数据可视化能力&#xff0c;为智慧医疗提供了强大的技术支持&#xff0c;…
阅读更多...
Netbox 4 VMware OVF快速部署

Netbox 4 VMware OVF快速部署

介绍 为了方便大家安装部署&#xff0c;做了一个VMware虚拟机ovf镜像使用。 Netbox系列&#xff1a;https://songxwn.com/categories/NetBox/ 手动部署&#xff1a;https://songxwn.com/netbox4-CN/ 使用 使用ESXi 6.5作为基准兼容性版本&#xff0c;虚拟机配置为4C8G 80G硬…
阅读更多...
SpringBoot项目启动内存泄漏问题排查与解决

SpringBoot项目启动内存泄漏问题排查与解决

在今天的开发过程中&#xff0c;我遇到了一个SpringBoot项目启动时显示内存泄漏的问题。这个问题让我头疼了一段时间&#xff0c;但经过多次排查&#xff0c;最终成功解决了。现在我将这个过程分享给大家&#xff0c;希望能对遇到类似问题的朋友们有所帮助。 问题现象 在启动…
阅读更多...
PMP®考试的形式、题型、考试内容和趋势

PMP®考试的形式、题型、考试内容和趋势

PMP考试形式&#xff1a; 国内的PMP考试是由中国国际人才交流基金会和PMI共同组织举办&#xff0c;统一采取的都是线下笔试。一年考4次&#xff0c;今年的考试安排在3月、6月、8月、11月。3月10日的PMP考试已结束&#xff0c;接下来是6月份的考试&#xff0c;考试时间预计在6月…
阅读更多...
qt tcp 连接 秒断连

qt tcp 连接 秒断连

问题&#xff1a; tcp连接总是秒成功后断连 debug会出现下面这些 onecore\net\netprofiles\service\src\nsp\dll\namespaceserviceprovider.cpp(550)\nlansp_c.dll!00007FFDA2A1D93D: (caller: 00007FFDD8BEACF6) LogHr(1) tid(336c) 8007277C ¡£¡£ one…
阅读更多...
一例MFC文件夹病毒的分析

一例MFC文件夹病毒的分析

概述 这是一个MFC写的文件夹病毒&#xff0c;通过感染USB设备传播&#xff0c;感染后&#xff0c;会向c2(fecure.info:443)请求指令来执行。 样本的基本信息 Verified: Unsigned Link date: 19:52 2007/7/5 MachineType: 32-bit MD5: 4B463901E5858ADA9FED28FC5…
阅读更多...
CJSON工具类

CJSON工具类

4.4.3.CJSON工具类 OpenResty提供了一个cjson的模块用来处理JSON的序列化和反序列化。 官方地址&#xff1a; https://github.com/openresty/lua-cjson/ 1&#xff09;引入cjson模块&#xff1a; local cjson require "cjson"2&#xff09;序列化&#xff1a; …
阅读更多...
STM32学习和实践笔记（21）：定时器中断实验

STM32学习和实践笔记（21）：定时器中断实验

通用定时器配置步骤如下&#xff1a; 第一步&#xff1a;使能定时器时钟 RCC_APB1PeriphClockCmd(RCC_APB1Periph_TIM4,ENABLE);//使能TIM4时钟 第二步&#xff1a;初始化定时器参数,包含自动重装值&#xff0c;分频系数&#xff0c;计数方式等 voidTIM_TimeBaseInit(TIM_T…
阅读更多...
YJW-10000微机控制电液伺服压剪试验机

YJW-10000微机控制电液伺服压剪试验机

一、项目概述 YJW-10000微机控制电液伺服压剪试验机采用油缸下置式、四立柱结构&#xff0c;机架刚度强度高&#xff0c;变形小&#xff0c;满足公路、铁路桥梁板式、盆式、球型支座的检测要求&#xff0c;试验空间无级可调&#xff0c;方便不同高度的试验需求。采用试金自主研…
阅读更多...
怎样快速插入数据

怎样快速插入数据

1、30万条数据插入插入数据库验证 1.1、表结构&#xff1a; CREATE TABLE t_user (id int(11) NOT NULL AUTO_INCREMENT COMMENT 用户id,username varchar(64) DEFAULT NULL COMMENT 用户名称,age int(4) DEFAULT NULL COMMENT 年龄,PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT…
阅读更多...
基于binlog实现数据加工处理

基于binlog实现数据加工处理

场景举例: 为了查询方便性&#xff0c;目前订单中存在好多冗余字段&#xff0c;例如用户昵称&#xff0c;但是当昵称对应表变化时候&#xff0c;好多同学可能就直接在修改昵称的地方手 动调用订单接口更新昵称&#xff0c;但这样不仅代码结构混乱而且耦合严重 使用说明: 下面…
阅读更多...
如何设置微信自动回复？教你快速上手！

如何设置微信自动回复？教你快速上手！

自动回复对于需要在微信上洽谈业务的人来说&#xff0c;无疑是非常实用的一个功能。 下面就一起来看看微信管理系统的机器人自动回复都有哪些设置吧&#xff01; 1、自动通过好友 只要有新的好友请求发送到你的微信账号&#xff0c;系统会自动通过该请求&#xff0c;无需手动…
阅读更多...
vue flvjs 播放视频

vue flvjs 播放视频

写在前面&#xff1a; 之前使用过vodiejs插件播放过mp4视频格式的视频&#xff1b; 此次需要使用flvjs插件播放rtsp视频格式的视频&#xff1b; 因为视频的数据格式不同&#xff0c;所以对应的插件不同。 思维导图&#xff1a; 参考链接&#xff1a;rtmp、rtsp、flv、m3u8、 …
阅读更多...
【活动汇总】纽约大学AI Meets Science；第十六届生物信息学和生物医学技术国际会议；Bio-IT World2024

【活动汇总】纽约大学AI Meets Science；第十六届生物信息学和生物医学技术国际会议；Bio-IT World2024

HyperAI超神经将网罗海内外 AI for Science 垂类会议&#xff0c;并整理会议信息与链接&#xff0c;一键直达官方主页&#xff0c;不错过任何一场重量级活动&#xff01; 未来活动预告&#xff1a; 4 月 26 日&#xff0c;纽约大学「AI Meets Science」会议 5 月 16 日&#…
阅读更多...
Linux制作docker镜像

Linux制作docker镜像

一、制作镜像 1.在/home/data/images目录下编写Dockerfile文件 Dockerfile&#xff1a;是制作镜像的文件 vi Dockerfile FROM java:8 ENV JAVA_HOME/usr/lib/jvm/jdk1.8.0_181 ENV PATH$PATH:$JAVA_HOME/bin ENV LC_ALLen_US.utf8 ENV LANGen_US.utf8 ENV LANGUAGEen_US.utf…
阅读更多...
锁 synchronized和lock

锁 synchronized和lock

Synchronized 原理&#xff1a; 方法级的同步是隐式&#xff0c; 即无需通过字节码指令来控制的&#xff0c; 它实现在方法调用和返回操 作之中。JVM 可以从方法常量池中的方法表结构(method_info Structure) 中的 ACC_SYNCHRONIZED 访问标志区分一个方法是否同步方法 。当方法…
阅读更多...
uiautomation 监控 Discord客户端的聊天记录 附python代码

uiautomation 监控 Discord客户端的聊天记录 附python代码

一个Python脚本，用于监控和抓取Discord客户端的聊天记录。它使用了`uiautomation`库来模拟用户界面操作， 定义了一个名为`discord`的类，它初始化了几个变量，包括一个用于控制UI自动化的`UiaAPI`对象，以及一个用于存储会话项目的列表`SessionItemList`。 通过UI自动化获取名…
阅读更多...
最新文章

Copyright @ 2022~2023