위 챗 애플 릿 으로 계산기 기능 을 실현 하 다.

본 고 는 위 챗 애플 릿 으로 쓴 간단 한 계산기 로 관심 있 는 동료 들 이 알 아 볼 수 있다.
페이지 부분

<view class='box'>
     <view class='txt'>{{screenNum}}</view> 
    <view capture-bind:touchstart="compute">
     <view>
       <button data-val='clear' class='boxtn btn1'>AC</button>
       <button data-val='back' class='boxtn btn1'>←</button>
       <button data-val='#' class='boxtn btn1'>#</button>
       <button data-val='/' class='boxtn btn'>/</button>
     </view>
       <view>
       <button data-val='7' class='boxtn'>7</button>
       <button data-val='8' class='boxtn'>8</button>
       <button data-val='9' class='boxtn'>9</button>
       <button data-val='*' class='boxtn btn'>*</button>
     </view>
       <view>
       <button data-val='4' class='boxtn'>4</button>
       <button data-val='5' class='boxtn'>5</button>
       <button data-val='6' class='boxtn'>6</button>
       <button data-val='-' class='boxtn btn'>-</button>
     </view>
       <view>
       <button data-val='1' class='boxtn'>1</button>
       <button data-val='2' class='boxtn'>2</button>
       <button data-val='3' class='boxtn'>3</button>
       <button data-val='+' class='boxtn btn'>+</button>
     </view>
       <view>
       <button data-val='1' class='boxtn btn2'>0</button>
       <button data-val='.' class='boxtn'>.</button>
       <button data-val='=' class='boxtn btn'>=</button>
     </view>
    </view>
</view>

스타일 부분

.box{
  width:100%;
  height: 700px;
  background: #000;
}
.txt{
  color: #fff;
  width: 100%;
  height:120px;
  font-size: 50px;
  text-align: right;
}
.boxtn{
  width: 90px;
  height:90px;
  display:block;
  float:left;
  border-radius: 50%;
  line-height: 90px;
  text-align: center;
  margin-left: 3px;
  margin-top: 5px;
  color:#fff;
  background: #333333;
  font-weight: bold;
  font-size: 25px;
}
.btn{
  background: #f09a37;
}
.btn1{
  background: #a5a5a5;
  color:#000;
}
.btn2{
  width: 180px;
  border-radius: 40px;
}

js 부분

//index.js
//      
const app = getApp()

Page({

  /**
   *        
   */
  data: {
    screenNum: 0,//      
    currentNum: '',//      
    storage: 0,//    
    operator: '',//   
    off: false,
  },

  compute: function (e) {
    var btn_num = e.target.dataset.val;
    var obj = this;
    if (!isNaN(btn_num)) {
      if (obj.data.off == true) {
        obj.data.currentNum = ''
        obj.data.off = false;
      }
      obj.data.currentNum += btn_num
      obj.data.currentNum = Number(obj.data.currentNum);
      obj.data.currentNum = obj.data.currentNum.toString();
    } else {
      switch (btn_num) {
        case '+':
        case '-':
        case '*':
        case '/':
        case '=':
          //                      

          if (obj.data.storage == 0) {
            obj.data.storage = obj.data.currentNum;
            obj.data.operator = btn_num;
          } else {
            if (obj.data.off != true) {
              if (obj.data.operator == '+') {
                obj.data.currentNum = Number(obj.data.storage) + Number(obj.data.currentNum)
              } else if (obj.data.operator == '-') {
                obj.data.currentNum = Number(obj.data.storage) - Number(obj.data.currentNum)
              } else if (obj.data.operator == '*') {
                obj.data.currentNum = Number(obj.data.storage) * Number(obj.data.currentNum)
              } else if (obj.data.operator == '/') {
                obj.data.currentNum = Number(obj.data.storage) / Number(obj.data.currentNum)
              }
            }
            obj.data.storage = obj.data.currentNum;
            obj.data.operator = btn_num;
          }

          obj.data.off = true;
          break;
        case 'clear':
          obj.data.storage = 0;
          obj.data.currentNum = '0';
          obj.data.operator = '';
          break;
        case 'back':
          obj.data.currentNum = obj.data.currentNum.slice(0, -1);
          if (obj.data.currentNum == '') {
            obj.data.currentNum = '0';
          }
          break;
        case '.':
          if (obj.data.currentNum.indexOf('.') == -1) { //        “.”
            obj.data.currentNum += btn_num
          }
          break;
      }
    }
    obj.setData({
      screenNum: obj.data.currentNum
    })
  },

})

효과 도 는 다음 과 같다

위 챗 개발 자 도구 다운로드 주소

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.