游逗网,重度移动游戏垂直门户!

最新游戏|最新软件|游戏更新|电脑软件|电脑游戏|专题合集|合集排行
您当前位置:首页 > 资讯教程 > 软件教程 >  怎么在微信小程序中制作记账小应用?

怎么在微信小程序中制作记账小应用?

作者:稚情发布时间:

  今天小编给大家分享的是怎么在微信小程序中制作记账小应用?对这个感兴趣的小伙伴们就和小编一起学习下吧,以下就是具体的内容。

  记账小应用

  var util = require("../../utils/util.js");//获取应用实例

  var app = getApp();

  Page({

  data: {

  userInfo: {},

  buttonLoading: false,

  accountData:[],

  accountTotal:0

  },

  onLoad: function () {

  console.log(\'onLoad\')

  var that = this;

  // 获取记录

  var tempAccountData = wx.getStorageSync("accountData") || [];this.caculateTotal(tempAccountData);

  this.setData({

  accountData: tempAccountData

  });

  },

  // 计算总额

  caculateTotal:function(data){

  var tempTotal = 0;

  for(var x in data){

  tempTotal += parseFloat(data[x].amount);

  }

  this.setData({

  accountTotal: tempTotal

  });

  },

  //表单提交

  formSubmit:function(e){

  this.setData({

  buttonLoading: true

  });

  var that = this;

  setTimeout(function(){

  var inDetail = e.detail.value.inputdetail;var inAmount = e.detail.value.inputamount;if(inDetail.toString().length <= 0 || inAmount.toString().length <= 0){console.log("can not empty");

  that.setData({

  buttonLoading: false

  });

  return false;

  }

  //新增记录

  var tempAccountData = wx.getStorageSync("accountData") || [];tempAccountData.unshift({detail:inDetail,amount:inAmount});wx.setStorageSync("accountData",tempAccountData);that.caculateTotal(tempAccountData);

  that.setData({

  accountData: tempAccountData,

  buttonLoading: false

  });

  },1000);

  },

  //删除行

  deleteRow: function(e){

  var that = this;

  var index = e.target.dataset.indexKey;

  var tempAccountData = wx.getStorageSync("accountData") || [];tempAccountData.splice(index,1);

  wx.setStorageSync("accountData",tempAccountData);that.caculateTotal(tempAccountData);

  that.setData({

  accountData: tempAccountData,

  });

  }

  })

  以上就是怎么在微信小程序中制作记账小应用的全部内容了,大家都学会了吗?

复制本文链接攻略文章为游逗网所有,未经允许不得转载。
系统教程更多
相关资讯更多
热门资讯更多
  1. 1如何在AutoCAD中选框选图形?在AutoCAD中选框选图形的方法
  2. 2QQ如何使用面对面快传?QQ使用面对面快传的方法
  3. 3怎么使用AutoCAD中的快速标注?
  4. 4如何在会声会影10中插入字幕?
  5. 5微信电脑版如何视频聊天?微信电脑版视频聊天的方法
  6. 6微信电脑版如何无限多开?微信电脑版无限多开的方法
  7. 7微信电脑版撤回消息的具体操作步骤介绍
  8. 8会声会影X7功能优势是什么?会声会影X7功能优势详解
火爆软件榜更多
精选资讯更多
热门专题全部>
热门分类全部>