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


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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
Java无向树分析 实现最小高度树
Apr 09 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
使用python实现rsa算法代码
2016/02/17 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
python实现简单文件读写函数
2021/02/25 Python
CSS3 边框效果
2019/11/04 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
行政文员岗位职责
2013/11/08 职场文书
公司薪酬管理制度
2014/01/31 职场文书
火锅店的活动方案
2014/08/15 职场文书
学校个人对照检查材料
2014/08/26 职场文书
教师工作表现评语
2014/12/31 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
工程款申请报告
2015/05/15 职场文书
CentOS安装Nginx并部署vue
2022/04/12 Servers
vue如何清除浏览器历史栈
2022/05/25 Vue.js
hive数据仓库新增字段方法
2022/06/25 数据库