主界面的代码块
<!--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.jsPage({/*** 页面的初始数据*/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": "查看历史记录"}
上面的代码主要参考从零开始学微信小程序开发！
如果觉得《微信小程序-计算器小程序《从零开始学微信小程序》》对你有帮助，请点赞、收藏，并留下你的观点哦！
