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

主界面的代码块

<!--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": "查看历史记录"
}

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