微信小程序项目实例——记账本

简介: 微信小程序项目实例——记账本

微信小程序项目实例——记账本

文章目录

项目代码见文字底部,点赞关注有惊喜


一、项目展示

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

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

此外可以手动删除记录(右滑记录)

二、首页

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

相关代码如下:

<import src="list/list.wxml" />
<view class="container">
  <view class="total">
    <view class="total-money">¥{{totalMoney}}</view>
    <span class="total-word">总资产</span> 
    <view class="total-list">
      <view id="totalOut" class="total-out" catchtap="onDetailTap">
        <view class="total-out-money">-¥{{outMoney}}</view>
        <view class="total-out-number">借出{{outNumber}}笔</view>
      </view>
      <span class=" shuxian"></span> 
      <view id="totalIn" class="total-in" catchtap="onDetailTap">
        <view class="total-in-money">+¥{{inMoney}}</view>
        <view class="total-in-number">借入{{inNumber}}笔</view>
      </view>
    </view>
  </view>
  <view class="add" catchtap="onEditTap">
    <view class="image"></view>
    记一笔</view>
  <view class="show ">
    <span wx:if="{{detailInfo}}">空空如也,快去记上一笔吧</span> 
    <view class="list-container" wx:else>
      <block wx:for="{{data}}" wx:for-item="item" wx:for-index="index">
        <view class="outter">
          <view class="list" catchtouchstart="onTouchStart" catchtouchend="onTouchEnd" catchtouchmove="onTouchMove" style="right:{{item.slideX}}" data-listId="{{index}}">
            <view class="list-people ">{{item.inputPeople}}</view>
            <view class="list-info ">{{item.inputInfo}}</view>
            <view class="list-money-date ">
              <view class="list-money colorRed" wx:if="{{item.radioGroup=='-'?true:false}}">{{item.radioGroup+"¥ "+item.inputMoney}}</view>
              <view class="list-money colorGreen" wx:else>{{item.radioGroup+"¥ "+item.inputMoney}}</view>
              <view class="list-date ">{{"["+item.date+"]"}}</view>
            </view>
          </view>
          <view class="delete" catchtap="onDeleteTap" data-deleteId="{{index}}">
            <text class="delete-text ">删除</text>
          </view>
        </view>
      </block>
    </view>
  </view>
</view>
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 < data.length; i++) {
      if (data[i].radioGroup == "-") {
        outNumber++;
        outMoney += parseFloat(data[i].inputMoney);
      } else {
        inNumber++;
        inMoney += parseFloat(data[i].inputMoney);
      }
    }
    totalMoney = inMoney - outMoney;
    inMoney = inMoney.toFixed(1);
    outMoney = outMoney.toFixed(1);
    totalMoney = totalMoney.toFixed(1)
    this.setData({
      totalMoney: totalMoney,
      outMoney: outMoney,
      outNumber: outNumber,
      inMoney: inMoney,
      inNumber: inNumber
    })
    console.log(inNumber)
  }, onTouchStart: util.touchStart, //手指触摸开始
  onTouchMove: util.touchMove, // 手指触摸滑动
  onTouchEnd: util.touchEnd, //手指触摸结束
  onDeleteTap: util.deleteData, //删除数据
})

三、效果图

效果图功能下


文末

具体的介绍就到这里了

有兴趣的同学可以继续研究

代码放到下面链接里了

点击下载 小程序


相关文章
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
349 3
|
2月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
46 1
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
116 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
|
2月前
|
JavaScript
vue尚品汇商城项目-day06【43.微信支付业务】
vue尚品汇商城项目-day06【43.微信支付业务】
38 0
|
4月前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
96 1
|
4月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
4月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
4月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
4月前
|
移动开发 开发框架 小程序
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试