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


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 相关文章推荐
javascript 框架小结 个人工作经验
Jun 13 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
js实现常见的工具条效果
Mar 02 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 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与C#分别格式化文件大小的代码
2011/05/14 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
在模板页面的js使用办法
2010/04/01 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
Sea.JS知识总结
2016/05/05 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
使用numba对Python运算加速的方法
2018/10/15 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
django rest framework 自定义返回方式
2020/07/12 Python
Python常用断言函数实例汇总
2020/11/30 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
班委竞选演讲稿
2014/04/28 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL