历时一个月，我发布了一款多人记账小程序

在日常生活中，我们总是会遇到各种金额的支出和收入，随着理财习惯培养得不断深入，我们会寻求一款能够帮助我们记录金额收支的程序。在使用过市场上的各大记账APP和小程序后，再加上个人共享记账的一些需求，我便研发了这款可以多人实时共享记账小程序。

“共同记账本”小程序为多人共享记账本，主要提供多人同时记账、资产列表清单、各时间段图表显示收支等。

代码技术

服务端：使用PHP+MySQL编写服务端接口

前端：使用UniApp开发并封装成微信小程序

图片存储：使用七牛云存储图片

界面截图介绍

一、首页记账

默认显示当月的收支数据，账单可支持关键字搜索、分类、标签、成员和按月、按年、自定义时间段查询数据

二、资产列表

支持银行卡、信用卡、支付宝微信和投资理财等类型资产添加，清晰显示拥有的资产金额

三、图表统计

支持按月、按年、自定义时间段查询收支情况，折线图和饼图显示收支趋势和收支排行等

饼图显示收支排行

图片统计这块这块的数据图表生成，我并没有使用他人封装好的echarts相关组件，而是选择echart官方提供的一个小程序版本的echarts-for-weixin组件。饼状图生成代码如下：

<template>
    <uni-ec-canvas class="uni-ec-canvas" id="day-canvas" ref="dayCanvas" canvas-id="day-canvas" :ec="ec"></uni-ec-canvas>
</template>
<script>
export default {
    data() {
        ec: {
                lazyLoad: true
        },
        optionDay: {
            series: [{
                    type: 'pie',
                    data: [],
                    label: {
                            formatter: params => {
                                    // console.log(params);
                                    let data = params.data;
                                    return data.name + '\n' + data.percent

                            }
                    },
                    radius: '70%'
            }]
        },
    },
    
    methods: {
        getDetails() {
            this.$nextTick(() => {
                // ajax请求数据并绘图
                setTimeout(() => {
                        this.$refs.dayCanvas.init(this.initDayChart);
                }, 300);
        });
        }
    }
}
</script>

四、AA结算清帐

适用于旅游费用记录，每个人记下自己的支出费用，结束后进行计算，向多支出的朋友进行清帐。

1. 邀请好友加入，分别记账支出的明细

2. 点击“AA结算”按钮，获取清账结算列表

五、其他功能

个人中心提供其他更多功能，如支付宝微信账单导入、帮助手册等