微信小程序计算器

index.js

// index.js
// 引入calc.js文件，获取计算器对象 （calculator）
const calc = require('../../utils/calc')
Page({
  // 页面所需数据
  data: {
    sub: '', //当前计算式
    num: '0' //当前计算结果
  },

  // 设置变量标识
  numChangeFlag: false, //值为false，标识当前尚未发生数字切换，值为true，表示切换到第二个数字，切换后在将值设置为false
  execFlag: false, //值为false,表示尚未输入第二个数字，值为true，表示已经输入第二个数字
  resultFlag: false, //值为false，表示当前处于等待输入状态，值为true，表示当前处于计算结果状态

  // 数字按钮点击事件处理函数
  btnNum(e) {
    // 获取数字按钮对应的数字，赋值给Num
    var num = e.target.dataset.val //dataset.val对应按钮的自定义属性data-val

    // 如果是结果状态，那么计算器重置
    if (this.resultFlag) {
      this.btnReset()
    }

    // 判断是否该输入第二个数字
    if (this.numChangeFlag) {
      // 将数字切换标识设置为假
      this.numChangeFlag = false
      // 将execFlag标识设置为真
      this.execFlag = true
      // 将data.num设置为'0'，避免第二个数字拼接到第一个数字后面，而是直接替换
      this.data.num = '0'
      //切换到第二个数字
      calc.changeNum2()
    }

    //设置输入的数字(条件运算符避免0打头的数字或者一串0的数字出现)
    calc.setNum(this.data.num === '0'? num:this.data.num + num) 
    //在页面显示输入的数字
    this.setData ({
      num: calc.getNum()
    })
  },

  //运算符按钮的点击事件处理函数
  btnOperate(e) {
    // 保存上前的运算符
    if (calc.op != '') {
      var opOld = calc.op
    }
    //获取运算符按钮对应的运算符，赋给运算器对象的op属性
    calc.op = e.target.dataset.val //dataset.val对应按钮的自定义属性data-val
    // 将数字切换标识设置为真
    this.numChangeFlag = true

    // 判断是否已经输入第二个数字
    if (this.execFlag) {
      // 将输入第二个数字标识变量设置为假
      this.execFlag = false
      //判断是否为结果状态
      if (this.resultFlag) {
        // 将结果状态标识变量设置为假
        this.resultFlag = false
        //TODO
      } else { //用户没有点击等号按钮，而是连续点击了运算符按钮
        // 此时做连续计算，将计算结果作为第一个数字来处理
        // 保存本次运算符
        var opNew = calc.op
        // 恢复上次运算符来进行计算
        calc.op = opOld
        calc.num1 = calc.getResult()
        // 恢复成本次运算符
        calc.op = opNew
      }
    }

    // 刷新页面结果区域的两个数据
    this.setData ({
      sub: calc.num1 + ' ' + calc.op + ' ' , //当前计算式 ,此时第二个数字为空，等待用户输入
      num: calc.num1 //当前计算结果，为什么是第一个数字呢？因为尚未输入第二个数字并且点击等号按钮
    })
  },

  // 等号按钮的点击事件处理函数
  btnCalculate () {
    // 判断数字是否切换到第二个数字，尚未输入第二个数字
    if (this.numChangeFlag) {
      // 将数字切换标识变量设置为假
      this.numChangeFlag = false
      // 准备输入第二个数字，将输入第二个数字的标志变量设置为真
      this.execFlag = true
      // 将用户输入的第一个数字（显示在结果区域第二行的数字 - 结果）作为第二个数字参与计算
      calc.num2 = this.data.num
    }

    // 判断是否已经输入第二个数字
    if(this.execFlag) {
      // 设置结果标识为真
      this.resultFlag = true
      // 调用计算器对象的getResult()函数获取计算结果
      var result = calc.getResult() 
      // 属性页面结果区域的两个数据
      this.setData({
        sub: calc.num1 + ' ' + calc.op + calc.num2 + ' = ', //当前计算式
        num: result //当前计算结果
      })
    }
    // 将运算结果作为第一个数字
    calc.num1 = result
  },

  // 重置按钮的点击事件处理函数
  btnReset() {
    // 调用计算器模块的事件重置函数
    calc.reset()
    // 初始化三个变量标识
    this.numChangeFlag = false
    this.execFlag = false
    this.resultFlag = false
    this.setData({
      sub:'',
      num:'0',
    })
  },

  // 小数点按钮的点击事件处理函数
  btnDot() {
    // 判断是否为结果状态，重置计算器
    if (this.resultFlag) {
      this.btnReset()
    }
    // 切换到第二个数字等待输入，设为“0”
    if (this.numChangeFlag) {
      // 将数字切换标识设置为假
      this.numChangeFlag = false
      // 将execFlag标识设置为真
      this.execFlag = true
      // 目标切换到第二个数字
      calc.changeNum2()
      // 将数字设置为“0.”
      calc.setNum('0.')
    } else if (this.data.num.indexOf('.') < 0) {
      // 当前数字没有“.”，那么将拼接“.”
      calc.setNum(this.data.num + '.')
    }
    // 更新数据，刷新页面
    this.setData({
      num:calc.getNum()
    })
  },
  // 删除按钮的点击事件处理函数
  btnDel() {
    // 判断是否为结果状态，重置计算器
    if (this.resultFlag) {
      this.btnReset()
    }
    // 非计算状态，将删除当前数字中最右边的一个字符
    var num = this.data.num.substring(0,this.data.num.length - 1)
    // 判断是否已经删除完有效数字，删完之后，继续按删除按钮，数字将置为0
    calc.setNum(num === '' || num === '-' || num === '-0.' ? '0' : num) 
    // 更新数据，刷新页面
    this.setData({
      num:calc.getNum()
    })
  },


    // 正负号按钮的点击事件处理函数
    btnPosNeg() {
      // 针对“0”，不加正负号
      if (this.data.num === '0' || this.data.num === '0.') {
        return 
      }
      // 如果是结果状态，重置计算器
      if (this.resultFlag) {
        this.btnReset();
      } else if (this.data.num.indexOf('-') < 0) { //数字前没有负号
        // 在数字前添加一个“-”号
        calc.setNum('-' + this.data.num)
      } else { //数字前有负号
        // 去掉数字的第一位
        calc.setNum(this.data.num.substring(1))
      }
      // 更新数据，刷新页面
      this.setData ({
        num:calc.getNum()
      })
    }
})

index.json

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  }
}

index.wxml

<!--index.wxml-->
<view class="result">
  <!--当前计算式-->
  <view class="result-sub">{{sub}}</view>
  <!--当前计算结果-->
  <view class="result-num">{{num}}</view>
</view>
<!--按钮区域-->
<view class="btns">
  <!--第一行按钮-->
  <view>
    <!--清除按钮-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnReset">C</view>
    <!--删除按钮-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnDelete">DEL</view>
    <!--正负号切换按钮（+：Positive，-：Negative-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnPosNeg">+/-</view>
    <!--除号按钮-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnOperate" data-val="÷">÷</view>
  </view>
  <!--第二行按钮-->
  <view>
	<!--7按钮-->
	<view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="7">7</view>
    <!--8按钮-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="8">8</view>
    <!--9按钮（+：Positive，-：Negative-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="9">9</view>
    <!--乘号按钮-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnOperate" data-val="×">×</view>
  </view>
  <!--第三行按钮-->
  <view>
    <!--4按钮-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="4">4</view>
    <!--5按钮-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="5">5</view>
    <!--6按钮（+：Positive，-：Negative-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="6">6</view>
    <!--减号按钮-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnOperate" data-val="-">-</view>
  </view>
  <!--第四行按钮-->
  <view>
    <!--1按钮-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="1">1</view>
    <!--2按钮-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="2">2</view>
    <!--3按钮（+：Positive，-：Negative-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="3">3</view>
    <!--加号按钮-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnOperate" data-val="+">+</view>
  </view>
	<!--第五行按钮-->
  <view>
    <!--0按钮-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="0">0</view>
    <!--点按钮-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnDot">.</view>
    <!--等于按钮——进行计算-->
    <view hover-class="bg" hover-stay-time="50" bind:tap="btnCalculate">=</view>
  </view>
</view>

index.wxss

page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: black;
}
/* 结果区域样式 */
.result{
  flex: 1;/* 垂直均分手机屏幕，因为flex-direction：column */
  background: #f3f6f6;
  position: relative;
}
/* 当前计算式样式 */
.result-sub{
  font-size: 52rpx;
  position: absolute;
  bottom: 16vh;
  right: 3vw;
}
/* 当前计算结果样式 */
.result-num{
  font-size: 100rpx;
  position: absolute;
  bottom: 3vh;
  right: 3vw;
}
/* 按钮区域样式 */
.btns{
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 48rpx;
  border-top: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;
}
/* 按钮区域中每一行的样式 */
.btns>view{
  flex: 1;
  display: flex;
}
/* 按钮区域每一行中每个按钮的样式 */
.btns>view>view{
  flex-basis: 25%;/* 四个按钮均分一行的空间 */
  border-right: 1rpx solid #ccc;/* 右边框线 */
  border-bottom: 1rpx solid #ccc;/* 底边框线 */
  box-sizing: border-box;/* 控制盒模型的尺寸计算方式 */
  display: flex;/* 弹性布局，默认方向：水平 */
  align-items: center;/* 交叉轴居中-垂直居中 */
  justify-content: center;/*  */
}
/* 0按钮占两列 */
.btns > view:last-child>view:first-child{
  flex-basis: 50%;
}
/* 清除按钮样式 */
.btns > view:first-child > view:first-child{
  color: #ff0000;
}
/* 最后一列按钮样式 */
.btns > view > view:last-child{
  color: #fc8e00;
}
/* 按钮的盘旋样式类 */
.bg{
  background: #aaaaaa;
}