微信小程序模拟支付宝账单的个人记账小程序

2024-05-13 16:56:39

微信小程序模拟支付宝账单的个人记账小程序

微信小程序模拟支付宝账单的个人记账小程序
- 一、准备阶段
- 二、写代码
- - 1、登录界面
  - 2、记账界面
  - 3、账单界面
  - 4、统计界面
  - 5、云数据库设计
- 三、总结

微信小程序模拟支付宝账单的个人记账小程序

初学微信小程序开发，为了锻炼自己的开发能力，一共写了两个小程序，一个是个人相册小程序，一个是这篇文章要介绍的模拟支付宝账单的个人记账小程序。

一、准备阶段

首先得了解支付宝账单的界面：

账单界面就是几个筛选分类的按钮和消费记录的列表，统计界面有一个一月的日消费、支出折线图和消费、收入的环形图，还有消费、支出的榜单。
所以用小程序模拟这个账单也是不难的，大致要用到tabBar、weui、选择器picker、icon、wx:for渲染和绘图插件echarts或者wx-charts，这里我选用了echarts。
其次就是icon的选用，weui里的icon不能满足消费类别图标的需求，可以使用阿里矢量图标库https://www.iconfont.cn/，搜索官方的支付宝图标。

二、写代码

1、登录界面

登录界面使用weui的From表单输入框，简单写一个页面就好了。

这里没有写注册界面，直接登录，识别到不在云数据库里的用户名就直接算作注册。

2、记账界面

记账界面和登录界面差不多，不过输入框旁边的变成了picker选择框，选择消费类别和支出/收入。

3、账单界面

账单界面要做到与支付宝账单界面相同还是用一定难度的，支付宝账单界面顶部的筛选、分类下拉栏要在微信小程序实现的话要写挺多的代码，所以这里我就改为了一个weui的navbar，然后用picker和九宫格嵌入弹出式菜单实现时间选择和类别选择。
账单列表使用wx:for渲染。

4、统计界面

统计界面需要用到echarts（在使用echarts时遇到一个坑，使用在echarts官方下载的精简版的插件时，真机调试图表无法显示，需要下载比较全的js包：https://github.com/WsmDyj/echarts-for-taro/tree/master/src/components/ec-canvas）
关于echarts的使用可以看下载的echarts包里的例子。在制作收入/支出日数据折线图时得要动态加载数据，教程可以参考：https://blog.csdn.net/hao_0420/article/details/80931339?utm_source=blogxgwz9，
多个图表的加载参考：https://www.jianshu.com/p/d71d8ea3cb1b

5、云数据库设计

三、总结

从开始到完成这个小程序共用了近4天，期间遇到各种bug，幸好都一一解决的，其中遇到的最大的问题就是云函数的使用，在测试云函数的时候获取到的都是undefine，怎么调整都搞不定，在快完成这个小程序时，发现应该是异步的问题，下次可以用promise设置返回时间试试。
最后项目地址：https://github.com/ccc-hhh/Wechat-MiniProgram-Personal-Accounting-Program

微信小程序模拟支付宝账单的个人记账小程序相关推荐

微信收款码和支付宝收款码二合一小程序
微信收款码和支付宝收款码二合一小程序一.前端是微信小程序,后端java 二.这里讲述后端客户扫描二维码区分来源是支付宝还是微信,然后做不同的处理: @GetMapping("/{open ...
微信小程序仿支付宝账单列表
支付宝是咋做的咱也不知道先把效果实现了再说效果图如下: js代码后端根据最后的时间向后查询size条数据 getData() {const params = {page: 1,size: 1 ...
c程序模拟抽奖流程图_c语言程序设计——抽奖程序
展开全部真不好玩,写好还62616964757a686964616fe4b893e5b19e31333234333366真不简单~ 中意的话,多加点分!测试过了- /* 预先将参加抽奖者的资料输入存 ...
java编写家庭收支记录,Java家庭收支记账小项目（java基础）
Java家庭收支记账小项目(java基础) Java家庭收支记账小项目(java基础) 需求说明: 模拟实现基于文本界面的<家庭记账软件>. 该软件能够记录家庭的收入.支出,并能够打印收支 ...
dedecms小程序插件升级到1.4.4（支持百度小程序，微信小程序，头条小程序，QQ小程序，支付宝小程序...）
从2019年6月份开发到现在 dede织梦小程序插件已经升级到1.4.4版本,现在已经支持:微信小程序,百度小程序,头条/抖音小程序,QQ小程序,支付宝小程序. dedecms小程序插件目前主要的功能 ...
微信支付宝扫一扫进入小程序的相关配置
需求: 微信小程序和支付宝小程序,用微信和支付宝扫同一个普通二维码,支付宝扫码进入支付宝小程序指定页面,微信扫码进入微信小程序的指定页面. 解决办法: 微信公众平台和支付宝开放平台都有自己的二维码配置 ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
实现微信小程序和支付宝小程序二维码合并
实现微信小程序和支付宝小程序二维码合并,这样用户就可以通过同一个二维码进入微信或者支付宝啦 1.需要准备可以通过公网访问的服务器 2.微信小程序打开微信小程序后台->开发(左边)->开发 ...
高德地图安卓拖拽选点_不止微信支付宝高德地图正式上线小程序入口
此前,即速应用发布的<小程序2019年行业年中增长研究报告>指出,小程序发展周期主要分为四个阶段:探索期.启动期.高速发展期和成熟期,目前处于高速发展后期,逐渐平稳发展. 2017年小程序 ...
uni-app跨端开发H5、微信小程序、支付宝小程序遇到的坑
文章目录微信支付宝小程序通用功能 1.checkbox样式 2.分享功能支付宝小程序参数微信小程序参数其他兼容问题 H5 微信小程序支付宝小程序持续更新中... 微信支付宝小程序通用功能 ...

最新文章

热门文章