1、计算器小程序

    点击页面数字按键可以计算简单的加减乘除数据运算。

2、大概结构

页面显示

  大概逻辑是当点第一次击数字键的时候要有个变量来存储这个点击的数，然后再来个记录点击运算符的变量，等要算的数全输入后，最后“=”后把前面输入的数字和运算符以字符串的形式显示在上屏幕上，同时把这个字符串以实参传入计算的函数里开始计算。

  计算时先乘除再加减，出问题最大的是的时减法和除法，加法和乘法可以交换前后两个数的顺序，但是减法和除法不行，需要把第一个数先取出来再往后取第二个数，将这两个数计算完后得出的结果再和数组遍历的下一个数进行计算。有加（减）和乘（除）时，for双层循环，第一层循环遍历取出含有第二级运算的式子，再将含有第二级式子开始第二层循环先进行计算（先乘除后加减）。

    刚开始写的时候全凭自己的想法，一股脑写了很多，没有概念和逻辑思路，运行之后一堆报错，以前学过的函数方法无法使用到我想要实现的逻辑上，WXML和WXSS还好，可以直接看到页面相应的去修改添加页面的结构样式；但是WXJS的各种逻辑、要注意的条件、判断需要一个个写出来，整个计算器还只能进行简易的运算，还存在很多需要要改进和优化的地方。

  不会实现的功能逻辑去参考别人的思路，想不到用不熟的函数一个个去查阅，边学边写边看边走，整个过程花费了好几天，好在最后能把思路理清，把不熟的函数搞明白并且会用，写好一个程序整体的结构，要学的还有很多很多，道阻且长,行则将至吧。

3、WXML

  上屏幕：

<view class='screen'>
{{result}}
</view>

 数字运算符号按键：

<view class='box'>
  <view class='btnGroup'>
//1
    <view class='item pink' bindtap='clickButton' id="{{back}}">退格</view>
    <view class='item pink' bindtap='clickButton' id="{{C}}">AC</view>
    <view class='item pink' bindtap='clickButton' id="{{addSub}}">+/-</view>
    <view class='item pink' bindtap='clickButton' id="{{div}}">÷</view>
//2
    <view class='item green' bindtap='clickButton' id="{{number1}}">1</view>
    <view class='item green' bindtap='clickButton' id="{{number2}}">2</view>
    <view class='item green' bindtap='clickButton' id="{{number3}}">3</view>
    <view class='item pink' bindtap='clickButton' id="{{add}}">+</view>
//3
    <view class='item green' bindtap='clickButton' id="{{number4}}">4</view>
    <view class='item green' bindtap='clickButton' id="{{number5}}">5</view>
    <view class='item green' bindtap='clickButton' id="{{number6}}">6</view>
    <view class='item pink' bindtap='clickButton' id="{{sub}}">-</view>
//4
    <view class='item green' bindtap='clickButton' id="{{number7}}">7</view>
    <view class='item green' bindtap='clickButton' id="{{number8}}">8</view>
    <view class='item green' bindtap='clickButton' id="{{number9}}">9</view>
    <view class='item pink' bindtap='clickButton' id="{{mut}}">×</view>
//5
    <view class='item green' bindtap='clickButton' id="{{percent}}">%</view>
    <view class='item green' bindtap='clickButton' id="{{number0}}">0</view>
    <view class='item green' bindtap='clickButton' id="{{dot}}">.</view>
    <view class='item pink' bindtap='clickButton' id="{{equ}}">=</view>
  </view>
 
</view>

4、WXSS

页面宽度：

page {
  width: 100%;
  height: 100%;
}

上屏幕：

.screen {
  width: 730rpx;
  text-align: right;
  position: fixed;
  font-size: 30px;
  bottom: 780rpx;
  
}

按键排列布局：

.btnGroup {
  display: flex;
  flex-direction: row;
}

单个按键样式：

.item {
  width: 190rpx;
  line-height: 150rpx;
  text-align: center;
  border-radius: 15rpx;
}

5、WXJS

Data对象 每个按键对应属性对应的值 

data: {
    result: '0',
    back: 'back',
    C: 'C',
    add: '+',
    sub: '-',
    mut: '×',
    div: '÷',
    equ: '=',
    percent: '%',
    dot: '.',
    number0: '0',
    number1: '1',
    number2: '2',
    number3: '3',
    number4: '4',
    number5: '5',
    number6: '6',
    number7: '7',
    number8: '8',
    number9: '9'
  },

clickButton: function (event) {}点击事件

判断点击运算符和数字的显示

  clickButton: function (event) {
    if (this.data.result == '0') {
      this.setData({
        result: event.target.id
      });
      }else if (event.target.id == 'back') {
      this.setData({
        result: this.data.result.length == 1 ? '0' : this.data.result.substring(0, this.data.result.length - 1)
      });
    }
    else if (event.target.id == 'C') {
      this.setData({
        result: '0'
      });
    }
    else if (event.target.id == '=') {
      this.setData({
        result: this.calculate(this.data.result)
      });
    }else {
      this.setData({
        result: this.data.result + event.target.id
      });
    }
  },

初步计算

split('+') 方法用于把一个含有'+'字符串分割成不含字符串数组。

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。可以来判断式子中有无加减乘除。

clickButton: function (event) {}点击事件

calculate: function (str) {

    // console.log(str);

    var addArray = str.split('+');//把字符串分割成不含+的数字 数组

    var sum = 0;

    for (var i = 0; i < addArray.length; i++) {

      if (addArray[i].indexOf('-') == -1) {   //没有减法的情况下 有乘除

        if (addArray[i].indexOf('×') != -1 || addArray[i].indexOf('÷') != -1){

          sum =sum + this.level2(addArray[i]);

        }else sum =sum + Number(addArray[i]);

      }

      else {  //有减法的情况下 有乘除

        var subArray = addArray[i].split('-');

        var subSum = 0;

        if (subArray[0].indexOf('×') != -1 || subArray[0].indexOf('÷') != -1) {//有*/

          subSum = this.level2(subArray[0]);

          console.log(subSum);

          

        }else 

        subSum = Number(subArray[0]);

        console.log(subSum);

        for (var j = 1; j < subArray.length; j++) {

          if (subArray[i].indexOf('×') != -1 || subArray[i].indexOf('÷') != -1){//有*/

            subSum =subSum - this.level2(subArray[j]);

          }else subSum =subSum - Number(subArray[j]);

              console.log(subArray);

        }

        sum =sum + subSum;

      }

    }

    

    return sum.toString();

  },

第二级的乘除运算 

level2: function (str) {
    var addArray = str.split('×');
    var sum = 1;
    for (var i = 0; i < addArray.length; i++) {
      if (addArray[i].indexOf('÷') == -1) {
        sum =sum * Number(addArray[i]);
      }
      else {
        var subArray = addArray[i].split('÷');
        var subSum = Number(subArray[0]);
        for (var j = 1; j < subArray.length; j++) {
          subSum =subSum / Number(subArray[j]);
        }
        sum =sum * subSum;
      }
    }
    return sum;
  },