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


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异步传输json数据格式实例代码
Nov 23 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 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
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
ES6的新特性概览
2016/03/10 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
python使用7z解压apk包的方法
2015/04/18 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
构建Python包的五个简单准则简介
2015/06/15 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
基于python操作ES实例详解
2019/11/16 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
预防艾滋病宣传标语
2014/06/25 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
应急管理工作总结2015
2015/05/04 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
Python Matplotlib绘制条形图的全过程
2021/10/24 Python