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


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脚本
Dec 03 Javascript
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
JQuery 学习笔记 选择器之一
Jul 23 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 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下使用iconv需要注意的问题
2010/11/20 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
Python多图片合并PDF的方法
2019/01/03 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
大学生毕业求职的自我评价
2013/09/29 职场文书
移交协议书
2014/08/19 职场文书
七一建党节演讲稿
2014/09/11 职场文书
法人身份证明书
2014/10/08 职场文书
大学生实训报告总结
2014/11/05 职场文书
长江三峡导游词
2015/01/31 职场文书
上班迟到检讨书
2015/05/06 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android