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

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布局以后,子元素的floatclearvertical-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哪里传的值还以为是默认传进去的,还跑到大佬的源码底下问人家,丢人的想捂脸跑