微信小程序 实例应用(记账)详解


Posted in Javascript onSeptember 28, 2016

 微信小程序-记账小应用

github地址:  https://github.com/HowName/account-note

微信小程序 实例应用(记账)详解

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,
   });
 }
})

通过此文,希望大家对微信小程序了解,并应用,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
Move.js入门
Feb 08 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
vue实现淘宝购物车功能
Apr 20 Javascript
JavaScript 闭包详细介绍
Sep 28 #Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 #Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 #Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 #Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 #Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 #Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 #Javascript
You might like
第一节--面向对象编程
2006/11/16 PHP
PHP开发需要注意的安全问题
2010/09/01 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
vue实现搜索功能
2019/05/28 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
地雷战观后感
2015/06/09 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
使用Python获取字典键对应值的方法
2022/04/26 Python