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


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 异步页面查询实现代码(asp.net)
May 26 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
js实现简单抽奖功能
Nov 24 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 的异常处理程序
2014/06/22 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
环保倡议书
2014/04/14 职场文书
小学一年级学生评语
2014/04/22 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
经理聘任证明
2015/03/02 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server