【鸿蒙应用】理财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，一经查实，立即删除！

相关文章

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

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

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

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

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

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

在数字化浪潮席卷而来的今天，智慧医疗作为医疗行业的创新力量，正以其独特的技术优势，推动着医疗服务的升级和变革。而在这场变革中，山海鲸可视化以其出色的数据可视化能力，为智慧医疗提供了强大的技术支持，…
阅读更多...
PMP®考试的形式、题型、考试内容和趋势

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

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

qt tcp 连接 秒断连

问题： 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写的文件夹病毒，通过感染USB设备传播，感染后，会向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的序列化和反序列化。 官方地址： https://github.com/openresty/lua-cjson/ 1）引入cjson模块： local cjson require "cjson"2）序列化： …
阅读更多...
STM32学习和实践笔记（21）：定时器中断实验

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

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

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

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

怎样快速插入数据

1、30万条数据插入插入数据库验证 1.1、表结构： 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…
阅读更多...
如何设置微信自动回复？教你快速上手！

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

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

vue flvjs 播放视频

写在前面： 之前使用过vodiejs插件播放过mp4视频格式的视频； 此次需要使用flvjs插件播放rtsp视频格式的视频； 因为视频的数据格式不同，所以对应的插件不同。 思维导图： 参考链接：rtmp、rtsp、flv、m3u8、 …
阅读更多...
深度学习与目标检测：从卷积神经网络到YOLOv8概念介绍

深度学习与目标检测：从卷积神经网络到YOLOv8概念介绍

深度学习与目标检测：从卷积神经网络到YOLOv8的深入探索 随着人工智能技术的迅猛发展，深度学习和计算机视觉领域取得了举世瞩目的成果。在目标检测这一关键任务中，卷积神经网络（CNN）和YOLO系列模型发挥着至关重要的作用…
阅读更多...
Redis中的Lua脚本(六)

Redis中的Lua脚本(六)

Lua脚本 清空repl_scriptcache_dict字典 每当主服务器添加一个新的从服务器时，主服务器都会清空自己的repl_scriptcache_dict字典，这是因为随着新从服务器的出现，repl_scriptcache_字典里面记录的脚本已经不再被所有从服务器载入过&#xf…
阅读更多...
使用 pytorch训练自己的图片分类模型

使用 pytorch训练自己的图片分类模型

如何自己训练一个图片分类模型，如果一切从头开始，对于一般公司或个人基本是难以实现的。其实，我们可以利用一个现有的图片分类模型，加上新的分类，这种方式叫做迁移学习，就是把现有的模式知识，转…
阅读更多...
Python实战 | 只需“4步”入门网络爬虫（小白也会）

Python实战 | 只需“4步”入门网络爬虫（小白也会）

文章目录 Python实战 | 只需“4步”入门网络爬虫（小白也会）1：确定目标网站和数据2：安装必要的库3：编写爬虫代码4.目标网站的URL5.发送HTTP请求并获取响应内容6.使用BeautifulSoup解析HTML内容7.查找包含新闻标题和链接…
阅读更多...
【golang学习之旅】Go 的基本数据类型

【golang学习之旅】Go 的基本数据类型

系列文章 【golang学习之旅】报错：a declared but not used 目录 系列文章总览布尔型（bool）字符串型（string）整数型（int、uint、byte、rune）浮点型（float32、float64）复…
阅读更多...
【C++】——类与对象引入和认识

【C++】——类与对象引入和认识

创作不易，多多支持！ 前言 有了上一篇博客的基础以后，就正式进入C类和对象的领域了，如果看完本篇文章对你有用，还请多多支持！！😘😘 一 面向过程和面向对象 1.面向过程 …
阅读更多...
单链表实现通讯录

单链表实现通讯录

不过多赘述了 顺序表的增删查改-CSDN博客https://blog.csdn.net/bkmoo/article/details/137566495?spm1001.2014.3001.5502 使用顺序表实现通讯录-CSDN博客https://blog.csdn.net/bkmoo/article/details/137676561?spm1001.2014.3001.5502这里没有使用文件操作只是简单的使…
阅读更多...
全程免费的ssl证书申请——七步实现网站https

全程免费的ssl证书申请——七步实现网站https

全程免费的ssl证书申请步骤如下： 1 准备工作 首先确定好需要的证书类型，如单域名证书、通配符证书和多域名证书，准备好需要安装证书的域名。 2 选择CA 选择提供免费证书的服务商——JoySSL，并访问其官方网站，创建一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023