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


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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
mocha的时序规则讲解
Feb 16 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
js转换对象为xml
2017/02/17 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
详解VUE 数组更新
2017/12/16 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Python秒算24点实现及原理详解
2019/07/29 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
如何写毕业求职自荐信
2013/11/06 职场文书
文秘求职信范文
2014/04/10 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
python+opencv实现目标跟踪过程
2022/06/21 Python