主界面的代码块
<!--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.js
var 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; //数据清0
tmp = 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": "查看历史记录"
}
上面的代码主要参考从零开始学微信小程序开发!