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


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多重继承示例
Mar 13 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
javascript实现连续赋值
Aug 10 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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中定时计划任务的实现原理
2013/01/08 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
详解JavaScript的变量
2019/04/04 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python 实现堆排序算法代码
2012/06/05 Python
Python中使用PIPE操作Linux管道
2015/02/04 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python实现把数字转换成中文
2015/06/29 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
工程承诺书怎么写
2014/05/24 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
增值税发票丢失证明
2015/06/19 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书