微信小程序实现一个小型计算器

最新推荐文章于 2024-08-08 08:30:00 发布

richest_qi

最新推荐文章于 2024-08-08 08:30:00 发布

阅读量947

点赞数 2

分类专栏：微信小程序 css

本文链接：https://blog.csdn.net/qzw752890913/article/details/117954167

版权

css 同时被 2 个专栏收录

69 篇文章 4 订阅

订阅专栏

微信小程序

37 篇文章 7 订阅

订阅专栏

这个博客详细介绍了如何使用微信小程序（WXML、WXSS、JS）开发一个简单的计算器应用。从页面布局到功能实现，包括点击数字按钮、运算符按钮的操作、删除功能以及等号按钮的计算逻辑，都进行了深入的代码分析。通过这个实例，读者可以学习到微信小程序的基本开发流程和计算表达式的处理方法。

摘要由CSDN通过智能技术生成

app.js

// app.js
App({
  onLaunch() {
  },
  REGEXP:/^[\+\-×÷]$/
})

app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

index.html

<!--index.wxml-->
<view class="result">
  <view class="result-express">{{express}}</view>
  <view class="result-value">{{result}}</view>
</view>
<view class="btns">
  <view class="item">
    <view class="reset" hover-class="bg" bindtap="reset">C</view>
    <view class="devide" hover-class="bg" bindtap="clickNumBtn" data-val="7">7</view>
    <view class="multiply" hover-class="bg" bindtap="clickNumBtn" data-val="4">4</view>
    <view class="delete" hover-class="bg" bindtap="clickNumBtn" data-val="1">1</view>
    <view class="percent" hover-class="bg" bindtap="clickNumBtn" data-val="%">%</view>
  </view>
  <view class="item">
    <view class="devide" hover-class="bg" bindtap="clickOptBtn" data-val="÷">÷</view>
    <view class="eight" hover-class="bg" bindtap="clickNumBtn" data-val="8">8</view>
    <view class="five" hover-class="bg" bindtap="clickNumBtn" data-val="5">5</view>
    <view class="two" hover-class="bg" bindtap="clickNumBtn" data-val="2">2</view>
    <view class="zero" hover-class="bg" bindtap="clickNumBtn" data-val="0">0</view>
  </view>
  <view class="item">
    <view class="multiply" hover-class="bg" bindtap="clickOptBtn" data-val="×">×</view>
    <view class="nine" hover-class="bg" bindtap="clickNumBtn" data-val="9">9</view>
    <view class="six" hover-class="bg" bindtap="clickNumBtn" data-val="6">6</view>
    <view class="three" hover-class="bg" bindtap="clickNumBtn" data-val="3">3</view>
    <view class="dot" hover-class="bg" bindtap="clickNumBtn" data-val=".">.</view>
  </view>
  <view class="item">
    <view class="delete" hover-class="bg" bindtap="delete">DEL</view>
    <view class="subtract" hover-class="bg" bindtap="clickOptBtn" data-val="-">-</view>
    <view class="add" hover-class="bg" bindtap="clickOptBtn" data-val="+">+</view>
    <view class="equal" hover-class="bg" bindtap="equal">=</view>
  </view>
</view>

index.wxss

/* index.wxss */
page{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.result,.btns{
  flex: 1;
}
.result{
  background: #f3f6fe;
}
.btns{
  display: flex;
  flex-direction: row;
}
.item{
  flex-basis: 25%;
  display: flex;
  flex-direction: column;
}
.item view{
  flex-basis: 20%;
  border-bottom: 1rpx solid #eee;
  border-right: 1rpx solid #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 17pt;
}
.item view:first-child{
  color: rgb(41, 192, 252);
}
.item:last-child view{
  color: rgb(41, 192, 252);
}
.item view.equal{
  flex-basis:40%;
  background-color: rgb(41, 192, 252);
  color:#fff;
}
.bg{
  background-color: #eee;
}
.result{
  position: relative;
}
.result-express{
  position: absolute;
  bottom:5vh;
  right: 3vw;
  font-size: 27pt;
}
.result-value{
  position: absolute;
  bottom: 1vh;
  right: 3vw;
  font-size: 16pt;
  color: darkgray;
}

index.js

// index.js
const app = getApp();
const {REGEXP} = app;
Page({
  data:{
    express:"",
    result:"",
    isEqualBtnClicked:false
  },
  reset:function(e){
    this.setData({
      express:"",
      result:"",
      isEqualBtnClicked:false
    })
  },
  preProcess:function(express){
    if(REGEXP.test(express[express.length-1])){
      express = express.slice(0,express.length-1);
    }
    return express;
  },
  delete:function(){
    const {express} = this.data;
    let newExpress = express.slice(0,express.length-1);
    let expressForCalc = this.preProcess(newExpress);
    let temp = this.calculate(expressForCalc);
    let newResult = temp==="0"?"":temp;
    this.setData({
      express:newExpress,
      result:newResult
    })
  },
  equal:function(){
    const {express} = this.data;
    let expressForCalc = this.preProcess(express);
    this.setData({
      result:"",
      express:this.calculate(expressForCalc),
      isEqualBtnClicked:true
    })
  },
  clickNumBtn:function(e){
    const val = e.target.dataset.val;
    let {express} = this.data;
    express+=val;
    this.setData({
      express:express,
      result:this.calculate(express)
    },function(){
      console.log(`click numBtn,current express: ${this.data.express},it'time to get result:${this.calculate(express)}`);
  
    })
  },
  clickOptBtn:function(e){
    let {express} = this.data;
    if(express==="" || REGEXP.test(express[express.length-1])) return;
    const opt = e.target.dataset.val;
    express+=opt;
    this.setData({
      express:express
    },function(){
      console.log("click optBtn,current express:",this.data.express);
    })
  },
  getLeftAndRight:function(express,i){
    const REGEXP = /\d+(\.\d+)?/;
    const REGEXP2 = /[\+\-×÷]/;

    let front = express.slice(0,i);
    let back = express.slice(i+1);
  
    let temp = front.split(REGEXP2);
    let left = Number(temp[temp.length-1]);
  
    let right = Number(back.match(REGEXP)[0]);
  
    return {left,right};
  },
  calculate:function(express){
    const REGEXP1 = /[×÷]/;
    const REGEXP2 = /\+(\d+)(\.\d+)?/;//正数
    const REGEXP3 = /\-(\d+)(\.\d+)?/;//负数
    const REGEXP4 = /\d+(\.\d+)?/;  

    const {getLeftAndRight} = this;
  
    let temp;
    let result = 0;
  
    //先乘除
    while((temp = express.match(REGEXP1)) !== null){
      let opt = temp[0];
      let i = temp["index"];
      let {left,right} = getLeftAndRight(express,i);
      switch(opt){
        case "×":express = express.replace(left+opt+right,left*right);break;
        case "÷":express = express.replace(left+opt+right,left/right);break;
      }
    }
  
    //后加减
    let firstNum = 0,sum1=0,sum2=0;
  
    let res = express.match(REGEXP4);
    if(res!==null && res["index"]===0){
      let str = res[0];
      firstNum = Number(str);
      express = express.slice(str.length);
    }
  
    while((temp = express.match(REGEXP2)) != null){
      let str = temp[0];
      express = express.replace(str,"");
      sum1 += Number(str.slice(1));
    }
    while((temp = express.match(REGEXP3)) != null){
      let str = temp[0];
      express = express.replace(str,"");
      sum2 += Number(str.slice(1));
    }
    
    result += firstNum + sum1 - sum2;
    
    return result.toString();
  }
})