微信小程序计算器模拟后续

今天按着自己的思路又重打了一遍

wxml没什么说的，就是分块起名，显示数字和结果的作为屏幕，数字键盘一行四块

<view class="onTop">
    <view class="screen">{{screenData}}</view>
  </view>
  <!--键盘操作-->
  <view class="onBottom">
    <view class="Row">
      <view class="item blue" bindtap='onTap' id="{{clear}}">C</view>
      <view class="item blue" bindtap='onTap' id="{{del}}">←</view>
      <view class="item blue" bindtap='history' id="{{history}}">history</view>
      <view class="item blue" bindtap='onTap' id="{{add}}">+</view>

    </view>
    <view class="Row">
      <view class="item orange" bindtap='onTap' id="{{id9}}">9</view>
      <view class="item orange" bindtap='onTap' id="{{id8}}">8</view>
      <view class="item orange" bindtap='onTap' id="{{id7}}">7</view>
      <view class="item blue"   bindtap='onTap' id="{{minus}}">-</view>

    </view>
    <view class="Row">
      <view class="item orange" bindtap='onTap' id="{{id6}}">6</view>
      <view class="item orange" bindtap='onTap' id="{{id5}}">5</view>
      <view class="item orange" bindtap='onTap' id="{{id4}}">4</view>
      <view class="item blue"   bindtap='onTap' id="{{multiply}}">*</view>

    </view>
    <view class="Row">
      <view class="item orange" bindtap='onTap' id="{{id3}}">3</view>
      <view class="item orange" bindtap='onTap' id="{{id2}}">2</view>
      <view class="item orange" bindtap='onTap' id="{{id1}}">1</view>
      <view class="item blue"   bindtap='onTap' id="{{divided}}">/</view>

    </view>
    <view class="Row">
      <view class="item zero orange" bindtap='onTap' id="{{id0}}">0</view>
      <view class="item orange" bindtap='onTap' id="{{dot}}">.</view>
      <view class="item blue"   bindtap='onTap' id="{{equal}}">=</view>

    </view>
  </view>

wxss调调样式

有几个首次用的地方记录一下：

display:flex

　Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

它即可以应用于容器中，也可以应用于行内元素。

flex-direction

 1 .box { 2 flex-direction: row | row-reverse | column | column-reverse; 3 } 

属性可选值的范围为row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse。

 

align-items: center;align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

justify-content: center;justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

然后是js

js分4种条件判断

首先获取输入的值，其次判断他的符号

1.如果输入的符号是删除，判断是否为0，反之，那就对字符串进行最后一位的删除，用substring截取到倒数第二位反映到前台显示，如果删没了就保持为0；同时在后台记录的数组中pop出最后一位；

 if(id==this.data.del){//删除的实现
      var data=this.data.screenData;
      if(data=="0"){
        return ;
      }
      data=data.substring(0,data.length-1);//删除data数组最后一位，实现删除
      if(data==""||data=="-")
      {
        data=0;
      }
     this.setData({"screenData":data});
     this.data.arr.pop();

2.如果输入的符号是清零，那就简单粗暴的将前台显示设置为0；同时后台存储的数组清空；

else if(id==this.data.clear){//清屏
      this.setData({"screenData":0});
      this.data.arr.length=0;}

3如果输入的是加减乘除和数字的话判断符号不能连续输入，将输入的数字和符号连续的存入数组arr中，然后在前台显示

else{//+-*/和数字输入
      if(this.data.operaSym[id]){
        if(this.data.lastIsOperaSym||this.data.screenData=="0"){//禁止多输入符号
          return;
        }
      }
        var sd=this.data.screenData;
        var data;
        if(sd==0){
          data=id;
        }
        else{
          data=sd+id;
        }
        this.setData({"screenData":data});
        this.data.arr.push(id);
        if (this.data.operaSym[id]) {//判断是否输入符号
          this.setData({ "lastIsOperaSym": true });
        } else {
          this.setData({ "lastIsOperaSym": false });
        }
      }

4输入的是等号，在等号中对数据进行处理，还没改对，result值搞不出来，再调试一下

心得：之前没看懂arr哪里传的值还以为是默认传进去的，还跑到大佬的源码底下问人家，丢人的想捂脸跑