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


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 相关文章推荐
JS基础之undefined与null的区别分析
Aug 08 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
最简单的tab切换实例代码
May 13 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
微信小程序实现留言板
Oct 31 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
关于尾递归的使用详解
2013/05/02 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
Python制作数据导入导出工具
2015/07/31 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
python 删除非空文件夹的实例
2018/04/26 Python
Django Rest framework频率原理与限制
2019/07/26 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
python logging 日志的级别调整方式
2020/02/21 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
计算机通信专业推荐信
2014/02/22 职场文书
党员查摆剖析材料
2014/10/10 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
2015年暑假生活总结
2015/07/13 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript