微信小程序开发之实现记账本

这篇文章主要为大家详细介绍了如何通过微信小程序开发一个简单的记账本，文中的示例代码讲解详细，感兴趣的小伙伴可以和小编一起学习一下

一、项目展示

这是一款简易的记账本小程序

用户可以记录自己平日里的借入和借出的金额

此外可以手动删除记录（右滑记录）

二、首页

首页划分为资产金额和资产记录两部分组成

相关代码如下：

  ￥{{totalMoney}}总资产  -￥{{outMoney}}借出{{outNumber}}笔 +￥{{inMoney}}借入{{inNumber}}笔  记一笔 空空如也，快去记上一笔吧    {{item.inputPeople}}{{item.inputInfo}} {{item.radioGroup+"￥ "+item.inputMoney}}{{item.radioGroup+"￥ "+item.inputMoney}}{{"["+item.date+"]"}} 删除

var util = require("../../utils/util.js") Page({ data: { detailInfo: true, data: "", totalMoney: 0, outMoney: 0, outNumber: 0, inMoney: 0, inNumber: 0, detailOut: 'out', detailIn: 'in', startX: 0, moveX: 0, endX: 0, slideX: 0, }, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, onEditTap: function () { wx.navigateTo({ url: 'edit/edit' }) }, onDetailTap: function (ev) { var idName = ev.currentTarget.id; wx.navigateTo({ url: 'detail/detail?idName=' + idName }) }, onReady: function () { // 页面渲染完成 }, onShow: function () { // 页面显示 this.dataShow(); this.count(); util.setListStatus; //list列表删除按钮close }, onHide: function () { // 页面隐藏 }, onUnload: function () { // 页面关闭 }, dataShow: function () { var value = wx.getStorageSync('key'); //用不了异步 if (value == "") { this.setData({ detailInfo: true }) } else { this.setData({ detailInfo: false, data: value }) } }, count: function () { console.log("开始计算") console.log(this.data) var totalMoney = 0, outMoney = 0, outNumber = 0, inMoney = 0, inNumber = 0; var data = this.data.data; for (var i = 0; i