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


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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
js 加载时自动调整图片大小
May 28 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
Jquery解析json数据详解
Dec 26 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
整理一下常见的IE错误
Nov 18 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
Protoss兵种介绍
2020/03/14 星际争霸
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
php报错502badgateway解决方法
2019/10/11 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
手机端转换rem适应
2017/04/01 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
JavaScript实现单例模式实例分享
2017/12/22 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
Python的动态重新封装的教程
2015/04/11 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
爱心捐书活动总结
2014/07/05 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
车辆委托书范本
2014/10/05 职场文书
高一军训决心书
2015/02/05 职场文书
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang