微信小程序-计算器小程序《从零开始学微信小程序》

主界面的代码块

<!--pages/tabbar2/complexCalc/complexCalc.wxml-->
<view class="container"><view class="screen">{{result}}</view><view class="rowBox"><button class="item orange" hover-class="other-button-hover" id="{{history}}" bindtap="clickButton">◀</button><button class="item orange" hover-class="other-button-hover"  id="{{clearnum}}" bindtap="clickButton">AC</button><button class="item orange" hover-class="other-button-hover" id="{{back}}" bindtap="clickButton">←</button><button class="item gery" hover-class="other-button-hover" id="{{divide}}" bindtap="clickButton">÷</button></view><view class="rowBox"><button class="item blue" hover-class="button-hover-num" id="{{id7}}" bindtap="clickButton">7</button><button class="item blue" hover-class="button-hover-num" id="{{id8}}" bindtap="clickButton">8</button><button class="item blue" hover-class="button-hover-num" id="{{id9}}" bindtap="clickButton">9</button><button class="item gery" hover-class="other-button-hover" id="{{multiply}}" bindtap="clickButton">×</button></view><view class="rowBox"><button class="item blue" hover-class="button-hover-num" id="{{id4}}" bindtap="clickButton">4</button><button class="item blue" hover-class="button-hover-num" id="{{id5}}" bindtap="clickButton">5</button><button class="item blue" hover-class="button-hover-num" id="{{id6}}" bindtap="clickButton">6</button><button class="item gery" hover-class="other-button-hover" id="{{subtract}}" bindtap="clickButton">-</button></view><view class="rowBox"><button class="item blue" hover-class="button-hover-num" id="{{id1}}" bindtap="clickButton">1</button><button class="item blue" hover-class="button-hover-num" id="{{id2}}" bindtap="clickButton">2</button><button class="item blue" hover-class="button-hover-num" id="{{id3}}" bindtap="clickButton">3</button><button class="item gery" hover-class="other-button-hover" id="{{plus}}" bindtap="clickButton">+</button></view><view class="rowBox"><button class="item orange" hover-class="other-button-hover" id="{{negative}}" bindtap="clickButton">±</button><button class="item blue" hover-class="other-button-hover" id="{{id0}}" bindtap="clickButton">0</button><button class="item gery" hover-class="other-button-hover" id="{{dot}}" bindtap="clickButton">.</button><button class="item gery" hover-class="other-button-hover" id="{{equal}}" bindtap="clickButton">=</button></view><view class="btnGroup"><switch checked="{{record}}" bindchange="RecordHistory"><view>保存历史记录</view></switch></view>
</view>

// pages/tabbar2/complexCalc/complexCalc.jsvar calculate = function(data1,oper,data2){  //计算函数var data;data1 = parseFloat(data1);data2 = parseFloat(data2);switch(oper){case "+":data = data1 + data2;break;case "-":data = data1 - data2;break;case "×":data = data1 * data2;break;case "÷":if(data2 !== 0){data = data1 / data2;}else{data = 0;}break;}return data;
}
//保存数据到本地缓存的数组中
var saveExprs = function (expr){var exprs = wx.getStorageSync('exprs') || [] //获取本地缓存exprs.unshift(expr); //在该数组开头增加一个元素wx.setStorageSync('exprs', exprs); //保存到本地存储console.log('exprs', exprs);
}
Page({/*** 页面的初始数据*/data: {result: '0',temp: "0",history: 'history',     //历史clearnum: 'clearnum',    //清除back: 'back',//回退divide: 'divide',   //除id7: 'id7',id8: 'id8',id9: 'id9',multiply: 'multiply',   //乘id4: 'id4',id5: 'id5',id6: 'id6',subtract: 'subtract',   //减id1: 'id1',id2: 'id2',id3: 'id3',plus: 'plus',   //加negative: 'negative', //取负id0: 'id0',dot: 'dot', //小数点equal: 'equal', //等于lastoper: "+",flag: true,expr: '', //表达式record: true,// var1:"开",// var2:"关"},RecordHistory:function(e){console.log(e);this.setData({record: e.detail.value})// wx.setStorage({//     key:"key",//     data:"value",//     success:function(e){//         console.log("success",e);//     },//     fail:function(err){//         console.log("fail",err);//     },//     complete:function(e){//         console.log("complete",e)//     }// })try{wx.setStorageSync('key', 'value')}catch(e){console.log(e);}},// 单击事件处理函数clickButton:function(e){// console.log(e)// console.log(e.target.id)var data = this.data.result;            //获取上一个结果值var tmp = this.data.temp;              //取上次的临时结果var lastoper1 = this.data.lastoper;    //上一次的运算符var noNumFlag = this.data.flag;         //上一次的非数字按钮标志var expr1 = this.data.expr; //获取前面的表达式if(e.target.id >='id0' && e.target.id <='id9'){  //判断按钮按下的是否是数字键// console.log('你按的是'+ e.target.id)     //打印一下id数// console.log('你按的数字是'+ e.target.id.substr()[2]) //是则提取id后面的数字data += e.target.id.substr()[2]  //将拼接data和id 即输入的值// console.log( data,'datat1');if(this.data.result == '0' || noNumFlag){    //如果原先的值是0或者是非数字按钮，则用键入值代替data =  e.target.id.substr()[2]; }noNumFlag = false;}else{ //不是数字按钮noNumFlag = true;// console.log('你按的控制键是'+e.target.id)if(e.target.id == "dot"){  //小数点-按钮noNumFlag = false;if(data.toString().indexOf(".") == -1){ //如果输入的值中不好含小数点，键入一个小数点data += '.';}}else if(e.target.id == "clearnum"){  //清除按钮expr1 = expr1.substr(0,expr1.length-1) + '=' + tmp; //删除最后的运算符// if(this.data.record){//     wx.setStorageSync('expr', expr1)// }saveExprs(expr1);expr1 ="";data = 0; //数据清0tmp = 0; //清楚中间结果lastoper1 = "+" //设置上次的运算符为加}else if(e.target.id == "negative"){ //数字取负data = -1 * data;}else if(e.target.id == "back"){ //回退一个字符if(data.toString().length>1){ //长度超过1位数data = data.substr(0,data.toString().length -1);  //去掉最后一位数}else{data = 0; //置0}}else if(e.target.id == 'plus'){ //加法expr1 = data.toString() + "+";data = calculate(tmp,lastoper1,data);tmp = data;lastoper1 = "+";}else if(e.target.id == 'subtract'){ //减法expr1 += data.toString() + "-";     //生成表达式data = calculate(tmp,lastoper1,data)tmp = data;lastoper1 = "-";}else if(e.target.id == "multiply"){ //乘法expr1 += data.toString() + "×"; //生成表达式data = calculate(tmp,lastoper1,data)tmp = data;lastoper1 = "×";}else if(e.target.id == "divide"){ //除法expr1 += data.toString() + "÷"; //生成表达式data = calculate(tmp,lastoper1,data)tmp = data;lastoper1 = "÷";}else if(e.target.id == "equal"){ //等号expr1 += data.toString();       //生成表达式data = calculate(tmp,lastoper1,data)expr1 += "=" + data;       //生成表达式  // if(this.data.record){//     wx.setStorageSync('expr', expr1);// }saveExprs(expr1);expr1 = "";tmp = 0;lastoper1 = "+";}else if(e.target.id == "history"){console.log(wx.getStorageSync('exprs'),'wx.getStorageSync')wx.navigateTo({url: './history/history',})}}this.setData({  //更新结果值result:data,//更新的结果值lastoper: lastoper1,temp: tmp,flag: noNumFlag,expr: expr1})// console.log(this.data.result,'result')},   // switch1Change:function(e){//     console.log('switch1发生change事件，携带值为',e.detail.value);//     this.setData({//         var1:e.detail.value?"开":"关"//     })// },// switch2Change:function(e){//     console.log('switch2发生change事件，携带值为',e.detail.value);//     this.setData({//         var1:e.detail.value?"开":"关"//     })// },})

{"usingComponents": {},"navigationBarTitleText": "计算器小程序"
}

/* pages/tabbar2/complexCalc/complexCalc.wxss */
/* 外层容器 */
.container{height: 1206rpx;display: flex;flex-direction: column;align-items: center;box-sizing: border-box;padding-top: 10rpx;background-color: #000;
}
/* 按钮组 */
.rowBox{display: flex;flex-direction: row;
}
/* 按钮 */
.rowBox button{width: 130rpx;height: 130rpx;margin: 10rpx;text-align: center;line-height: 120rpx;border-radius: 50%;
}
/* 计算结果 */
.screen{text-align: right;width: 650rpx;height: 250rpx;line-height: 250rpx;padding: 0 20rpx;font-size: 100rpx;color: #fff;
}
/* 控制按钮 */
.orange{background-color: #b5b5b5;
}
.gery{background-color: #fe9d12;color: #fef4e9;
}/* 数字按钮 */
.blue{background-color: #414141;color: #d9eef7;
}
/* 按下数字按钮的状态 */
.button-hover-num{background-color: #414140;opacity: 0.7;
}
/* 按下控制按钮的状态 */
.other-button-hover{background-color: #f78d1d;
}
.btnGroup switch{display: flex ;align-items: center;color: #fff;padding: 30rpx 0;
}

历史记录

<!--pages/tabbar2/complexCalc/history/history.wxml--><view><block wx:for="{{exprs}}" wx:key="index"><view>{{item}}</view></block></view>

// pages/tabbar2/complexCalc/history/history.js
Page({/*** 页面的初始数据*/data: {// expr:"历史记录"exprs:[]},/*** 生命周期函数--监听页面加载*/onLoad(options) {// console.log(options,'op ioi')// console.log('getloal',wx.getStorageSync('exprs'))this.setData({// expr: wx.getStorageSync('expr')exprs: wx.getStorageSync('exprs') || [],})try {wx.clearStorageSync()} catch (error) {console.log(error)}// console.log('getloal',wx.getStorageSync('exprs'))},})

{"usingComponents": {},"navigationBarTitleText": "查看历史记录"
}

上面的代码主要参考从零开始学微信小程序开发！

微信小程序-计算器小程序《从零开始学微信小程序》相关推荐

《从零开始学微信小程序开发》.pdf
关注"Java后端技术全栈" 回复"000"获取大量电子书 2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关 ...
从零开始学微信小程序开发：1
1.1.安装 1.2.创建项目登录开发工具: 添加项目:有本地小程序项目和公众号网页开发无AppID的开发者也可以使用开发工具主要文件:如果创建时选中"quick start项目&qu ...
从零开始学微信小程序（初步界面制作3-文章列表）
接着我们来搞定文章列表之前咱们主页"展览"主打展示因此暂时不用考虑进一步的修改我们先来解决第二主页"展文"的界面也就是文章列表那么目前我们先尝试做一个 ...
从零开始学微信小程序开发：6 旅行计划调查
小程序对HTML5表单及表单元素进行了封装,提供了丰富的表单组件. 6.1 用form组件收集信息 form(表单)也是前端视图层与后端服务层交互过程中最重要的信息来源. 小程序的form组件具有一些 ...
从零开始学微信小程序（不是教程·网络请求Request·GET）
好像文章变得越来越长了于是决定每个主题单开一个文章省的多图杀猫接口 2018·10·21 其实后台和前台的对接对我来说一直是一个很玄学的东西可能是因为缺乏基本全面的https知识完全没办法理 ...
python 窗口程序开发课程_从零开始学Python - 第019课：使用PyCharm开发Python应用程序...
坚持学习完前18课的小伙伴应该已经感受到了,随着我们对Python语言的认知在逐步加深,我们写的代码也越来越复杂了."工欲善其事,必先利其器",如果希望能够更快更好的写出代码,选择 ...
从零开始的微信小程序入门教程
之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程, ...
从零开始学前端：形变（小游戏：3D翻滚盒子） --- 今天你学习了吗？（CSS：Day21）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:过渡和动画 - 今天你学习了吗?(CSS:Day20) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
热搜！刚博士毕业的女教师看着比学生还小，网友：这种老师教课嘎嘎猛
点击下方卡片,关注"CVer"公众号 AI/CV重磅干货,第一时间送达点击进入->[计算机视觉]微信技术交流群本文转载自:募格学术 | 参考资料:抖音@无线衢州.软科.南 ...

微信小程序-计算器小程序《从零开始学微信小程序》

主界面的代码块

微信小程序-计算器小程序《从零开始学微信小程序》相关推荐

最新文章

热门文章