记账小程序

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

此文转载自：https://blog.csdn.net/weixin_45821421/article/details/110087114

现在是2020年11月23日

最近时间比较多，一直想整理一下本科这两年开发的一些小作品，考虑到年后要准备考研，于是决定最近完成这项工作。

首先发一个比较简单的，前段时间自己做的一个记账小程序，起因是觉得花钱太多，想记录一下日常花销，于是准备自己做一个自己专用的小程序，后来觉得只能自己用太没意思了，所以它最后面向了所有用户（如果有兴趣，欢迎体验）。

这个小程序现在怎么样了呢？我用了一两周后，发现天天记账也很麻烦，于是就放在那不用了。唉，看来记账还是不适合我这种人，所以我把它在这里发给大家，大家如果有兴趣可以自己做一个，记得点个赞就好了

先声明一下，我是数学专业的，做这个仅仅是因为如上所述，并非专业。所以有很多地方做的不是很成熟，还请大家见谅！好了，下面开始

小程序功能介绍

如果不想看，可以直接看下面的展示视频

一.记账页面

第一个页面，用于记账

1、价格显示
- 最顶端显示的是今日总价和本月总价，可以根据记账实时变化
2、记账功能
- 中间部分可以选择分类（只写了4类调试用）和支付方式。
- 名称和价格可以自行输入
- 输入完成后点击保存即完成一次记账，数据库会更新。清空则清除填入的内容。
- 点击保存会自动检测输入的内容是否为空和是否合法。
- 最下面的“今日已买”即显示今日已经记录的账单，可以实时变化。
- “今日”已买可以删除，点击对应删除按钮即从当前页面和数据库中删除这条账单记f录。

二、分析页面

第二个页面，主要用于账单分析，分为七日支出分析和本月分析

1、七日支出
- 记录了自昨日起的前七天的内容，包括七日平均日总价，七日总价，及七日账单价格走势图。
- 查看详情和收藏分享本来打算后期开发，结果因为自己都懒得记账了，所以也至今也没有开发。不过说不定等后面哪天心血来潮可以会完成这项工作（可能性不大），如果完成了我会来更新的。
2、本月总计
- 记录了本月总价和本月的平均日总价
- 饼状图显示了各个类别（记账时选择的类别）花销占的比例。

三、记账提醒功能

在小程序加载之初会向用户询问是否订阅用于每天向用户发送记账提醒。
我这里设定的是每天晚上9:30用个人服务器自动向用户推送订阅，订阅内容包括昨日支出，本月指出，本月收入（为了后续开发，在这里就提前加了）以及记账提醒。
以上基本就是小程序的全部功能，接下来的视频会展示这些功能。

展示视频

数据库架构

数据库集合分为12个月份
每条记录对应一个用户（openid）
每个用户下对应本月的每一天及本月总价及openid
每一天中，每条记账记录为一个对象，以随机生成的字符串作为id，以及本日总价
每一条记账记录包含了此条账单的各个属性：名称、价格、类别、支付方式等

源码

源码我就不一一介绍了，直接全部放在下面了。源码中页面设计用到了vant-weapp插件。

在这里简单介绍一下整个小程序的架构：

小程序加载页面通过openid查询数据库是否有历史信息，如果没有，自动初始化该用户的数据库信息，完成后跳转至首页。如过有，直接跳转至首页。
此过程中会询问用户是否订阅。

记账页面

从云数据库中获取本日本月信息，存放到本地用于显示。
每次保存账单会同时对数据库和本地信息进行更新。

分析页面

从云数据库中获取本日本月信息，存放到本地用于显示。

源码如下

1、APP

app.js

//app.js/*
/*
*/

var timestamp = Date.parse(new Date()),
date = new Date(timestamp),
//获取年份  
year = date.getFullYear(),
//获取月份  
month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1),
//获取当日日期 
day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
App({

  globalData:{
    mon :['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    dayNum : [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
    //获取年份  
    year : year,
    //获取月份  
    month : month,
    //获取当日日期 
    day : day,
  },

  onLaunch: function () {
    var that = this;
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        // env: 'my-env-id',
        traceUser: true,
      })
      wx.cloud.callFunction({
        name: 'login',
        data: {},
        success: res => {
          console.log("云函数 [login] user openid: ", res.result.openid)
          that.globalData.openid = res.result.openid;
        },
        fail: res => {
          console.log("云函数 [login] 调用失败")
        }
      })
    }
   
  }
  
})

app.json

{
  "usingComponents": {
    "van-dropdown-menu": "../components/dist/dropdown-menu/index",
    "van-dropdown-item": "../components/dist/dropdown-item/index",
    "van-field": "../components/dist/field/index",
    "van-button": "../components/dist/button/index",
    "van-cell": "../components/dist/cell/index",
    "van-cell-group": "../components/dist/cell-group/index",
    "van-card": "../components/dist/card/index",
    "van-radio": "../components/dist/radio/index",
    "van-radio-group": "../components/dist/radio-group/index",
    "van-sidebar": "../components/dist/sidebar/index",
    "van-sidebar-item": "../components/dist/sidebar-item/index",
    "van-tab": "../components/dist/tab/index",
    "van-tabs": "../components/dist/tabs/index",
    "van-dialog": "../components/dist/dialog/index",
    "van-grid": "../components/dist/grid/index",
    "van-grid-item": "../components/dist/grid-item/index",
    "van-divider": "../components/dist/divider/index",
    "van-image": "../components/dist/image/index",
    "van-notify": "../components/dist/notify/index"  
  },
  "pages": [
    "pages/onLoad/onLoad",
    "pages/analysis/analysis",
    "pages/index/index"
  ],
  "tabBar": {
    "color":"#000000",  
    "selectedColor": "#1CBBB4",
    "backgroundColor": "white",
    
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "/images/icon/bookkeeping_off.png",
        "selectedIconPath": "/images/icon/bookkeeping_on.png"
      },
      {
        "pagePath": "pages/analysis/analysis",
        "iconPath": "/images/icon/analysis_off.png",
        "selectedIconPath": "/images/icon/analysis_on.png"
      }
    ]
  },
  "sitemapLocation": "sitemap46.json"
}

app.wxss 未用到

2、加载页面

onLoad.wxml

<view class='begin'>
<van-button
  type="default"
  bind:click="start"
>开始使用
</van-button>
</view>
<view class='text_container'>
<text>如出现问题或者有更好的建议欢迎联系</text>
<text>[email protected]</text>
</view>

onLoad.js

const app = getApp()
const db = wx.cloud.database()
var mon = app.globalData.mon
var year = app.globalData.year
var month = app.globalData.month
var day = app.globalData.day
var dayNum = app.globalData.dayNum



Page({
  data: {
    openid:''
  },
  start(){
    
    db.collection(mon[month - 1]).where({
      _openid: app.globalData.openid  //进行筛选
    }).get({
      success: res => {
        console.log(res.data.length)
        // 无信息初始化
        if (res.data.length == 0) {
          var j = 0
          // 增加每月天数
          for (var i = 0; i < dayNum[month - 1]; i++) {
            if (i < 9) {
              j = '0' + (i + 1)
            }
            else {
              j = i + 1
            }
            wx.cloud.callFunction({
              name: 'update',
              data: {
                collect: mon[month - 1],
                openid: app.globalData.openid,
                data: {
                  [mon[month - 1] + j]: { dayPrice: 0.0 }
                }
              },
              success: res => {
                //console.log(res.result)
              },
              fail: res => {
                console.log("调用失败", res)
              }
            })
          }
          // 增加月总价
          db.collection(mon[month - 1]).add({
            data: {
              monPrice: 0.0,

            },
            success: res => {
            },
            fail: err => {
              wx.showToast({
                icon: 'none',
                title: '新增记录失败'
              })
              console.error('[数据库] [新增记录] 失败：', err)
            }
          })
          wx.switchTab({
            url: '../index/index',
          })
          
        }
        else {
            wx.switchTab({
              url: '../index/index',
            })
          
        }
      }
    })
  },
  subscribe() {
    var that = this
    wx.requestSubscribeMessage({
      tmplIds: [
        '5izIuACRUSIMs8eES-Drl92yVQI52fVypgRslHyk1W8'],
      success(res) { that.start()}
    })
  },
  onLoad: function () {
  }
})

onLoad.wxss

Page{
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url('base64格式图片，由于过长，故不在这里展示了，可以自行转码粘贴')
}

.begin{
  position:fixed;
  bottom:23%;
  display:flex;
  width:100%;
  justify-content:center;
}

.text_container{
    display: flex;    /*设置显示样式**/
    align-items: center;    /**子view垂直居中*/
    vertical-align: center; /**垂直居中*/
    justify-content: center; /**内容居中*/
    flex-direction:column;
    font-size: 25rpx;
    color: #666666;
    position:fixed;
    bottom:4%;
    left: 25%
}

3、记账页面

index.wxml

<van-dialog  />
<van-notify  />

<view class='qs'>
  <view class = 'container'style="height: 150rpx">
    <view class='container_head'>
      <view class='container_head_main'>

        <view>

          <view class='main_Ttitle'>今日总价</view>

          <view class='main_main'>{{dayPrice}}</view>

          <!--<view class='main_mintitle'>元</view> -->

        </view>

        <view>

          <view class='main_Ttitle'>本月总价</view>

          <view class='main_main'>{{monPrice}}</view>

          <!--<view class='main_mintitle'>次/分钟</view> -->

        </view>

      </view>
    </view>

  </view>

  <view class='container'style="height: 350rpx">
    <van-dropdown-menu>
      <van-dropdown-item value="{{ categroyIndex }}" options="{{ categroy }}" bind:change="switchValue1" />
      <van-dropdown-item value="{{ paymentIndex }}" options="{{ payment }}" bind:change="switchValue2" />
    </van-dropdown-menu>

    <van-cell-group>
      <van-field
        value="{{ goodsName }}"
        label="名称"
        placeholder="请输入名称"
        border="{{ false }}"
        bind:blur="nameBlur"
      />

      <van-field
      value="{{ goodsPrice }}"
      label="价格"
      border="{{ false }}"
      placeholder="请输入价格"
      bind:change="onChange"
      type="digit"
      maxlength="6"
      />
    </van-cell-group>
  </view>
  
  <view class='btn_container' >
    <van-button class='btn' type="default" round bind:click='post'> 保 存 </van-button>
    <van-button class='btn' type="default" round bind:click='clear'> 清 空 </van-button>
  </view>

  <view class='container' style="height: auto">

    <van-divider contentPosition="center">今日已买</van-divider>
      <view  wx:for="{{today}}" wx:for-index="id" wx:for-item="value">
        <van-card
        tag="{{value.categroy}}"
        price="{{value.price}}"
        desc="支付方式:{{value.payment}}"
        title="{{value.name}}"
        thumb="{{img[value.categroy]}}"
        >
        <view slot="footer">
          <van-button size="mini"  data->删除</van-button>
        </view>
        </van-card>
        <text>\n</text>
      </view>
  </view>

</view>

index.js


const app = getApp()
const db = wx.cloud.database()
const _ = db.command
var mon = app.globalData.mon
var year = app.globalData.year
var month = app.globalData.month
var day = app.globalData.day
var dayNum = app.globalData.dayNum
var myDate = new Date()
var time = myDate.toLocaleTimeString()
import Dialog from '../../components/dist/dialog/dialog'
import Notify from '../../components/dist/notify/notify'

Page({
  data: {
    img: {
      '饮食': 'cloud://bookkeeping-ywonchall.626f-bookkeeping-ywonchall-1303847606/icon/饮食.png',
      '淘宝': 'cloud://bookkeeping-ywonchall.626f-bookkeeping-ywonchall-1303847606/icon/淘宝.png',
      '娱乐': 'cloud://bookkeeping-ywonchall.626f-bookkeeping-ywonchall-1303847606/icon/娱乐.png',
      '其他': 'cloud://bookkeeping-ywonchall.626f-bookkeeping-ywonchall-1303847606/icon/其他.png'
    },
    categroy: [
      { text: '饮食', value: 0 },
      { text: '淘宝', value: 1 },
      { text: '娱乐', value: 2 },
      { text: '其他', value: 3 },
    ],
    categroyIndex: 0,
    name:'',
    price:'',
    openid:'',
    today:{},
    goodsName:'',
    goodsPrice:'',
    monPrice:'',
    dayPrice:0,
    payment:[
      { text: '微信', value: 0 },
      { text: '支付宝', value: 1 },
      { text: '银行卡', value: 2 },
      { text: '校园卡', value: 3 },
    ],
    paymentIndex:0
  },
  onClick(event) {
    const { name } = event.currentTarget.dataset;
    this.setData({
      radio: name,
    });
  },
  onClose() {
    this.setData({ show: false });
  },
  /*
  onChose(event) {
    this.setData({
      radio: event.detail,
    });
  },*/
  deleteData(event){
    var dayPrice = this.data.today[event.target.dataset.id]['price']
    //delete this.data.today[event.target.dataset.id]
    this.setData({
      dayPrice: parseFloat((this.data.dayPrice - this.data.today[event.target.dataset.id]['price']).toFixed(2)),
      monPrice: parseFloat((this.data.monPrice - this.data.today[event.target.dataset.id]['price']).toFixed(2)),
    })

    var dayBook = this.data.today
    delete dayBook[event.target.dataset.id]
    console.log(dayBook)
    dayBook['dayPrice'] = this.data.dayPrice
    
    wx.cloud.callFunction({
      name: 'remove',
      data: {
        collect: mon[month - 1],
        openid: this.data.openid,
        data: [mon[month - 1] + day]
          //Oct01:123// 获取到当天数据 从更新当天数据开始
        },
      success: res => {
        console.log("delete success1")
        //console.log(dayBook)
        this.updata(dayBook).then(result => {
          delete dayBook['dayPrice']
          console.log("delete success2")
          this.setData({
            today: dayBook
          })
        })
        
      },
      fail: res => {
        console.log("调用失败", res)
      }
    })
    
    //console.log(this.data.today[event.target.dataset.id])
  },
  // 类型切换
  clear(){
    this.setData({
      goodsName: '',
      goodsPrice: '',
      name: '',
      price: ''
    })
  },
  updata(event){
    return new Promise(resolve => {
      console.log(mon[month - 1]