微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器

更新時(shí)間：2021年07月19日 11:13:33 作者：@夏目

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

微信小程序之簡(jiǎn)易計(jì)算器，供大家參考，具體內(nèi)容如下

一、介紹

1.中綴表達(dá)式

中綴表達(dá)式是一種通用的算術(shù)或邏輯公式表示方法，操作符以中綴形式處于操作數(shù)的中間。中綴表達(dá)式是人們常用的算術(shù)表示方法。

雖然人的大腦很容易理解與分析中綴表達(dá)式，但對(duì)計(jì)算機(jī)來(lái)說(shuō)中綴表達(dá)式卻是很復(fù)雜的，因此計(jì)算表達(dá)式的值時(shí)，通常需要先將中綴表達(dá)式轉(zhuǎn)換為前綴或后綴表達(dá)式，然后再進(jìn)行求值。對(duì)計(jì)算機(jī)來(lái)說(shuō)，計(jì)算前綴或后綴表達(dá)式的值非常簡(jiǎn)單。

2.后綴表達(dá)式

從左至右掃描表達(dá)式，遇到數(shù)字時(shí)，將數(shù)字壓入堆棧，遇到運(yùn)算符時(shí)，彈出棧頂?shù)膬蓚€(gè)數(shù)，用運(yùn)算符對(duì)它們做相應(yīng)的計(jì)算（次頂元素 op 棧頂元素），并將結(jié)果入棧；重復(fù)上述過(guò)程直到表達(dá)式最右端，最后運(yùn)算得出的值即為表達(dá)式的結(jié)果。

例:

(1)8+4-62用后綴表達(dá)式表示為:
8 4+6 2-
(2)2*(3+5)-4+7/1用后綴表達(dá)式表示為:
3 5+2*7 1/4-+

例如后綴表達(dá)式“3 4 + 5 × 6 -”：

(1) 從左至右掃描，將3和4壓入堆棧；
(2) 遇到+運(yùn)算符，因此彈出4和3（4為棧頂元素，3為次頂元素，注意與前綴表達(dá)式做比較），計(jì)算出3+4的值，得7，再將7入棧；
(3) 將5入棧；
(4) 接下來(lái)是×運(yùn)算符，因此彈出5和7，計(jì)算出7×5=35，將35入棧；
(5) 將6入棧；
(6) 最后是-運(yùn)算符，計(jì)算出35-6的值，即29，由此得出最終結(jié)果。

二、程序代碼

1.代碼

app.js配置代碼如下：

// app.js
App({
  onLaunch() {
    // 展示本地存儲(chǔ)能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登錄
    wx.login({
      success: res => {
        // 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  },
  
  calculator:{
    express:'', //臨時(shí)字符串
    strList:[], //中綴表達(dá)式存儲(chǔ)（隊(duì)列先進(jìn)先出）
    strListP:[],  //后綴表達(dá)式（隊(duì)列先進(jìn)先出）
    list:[], //存放運(yùn)算符的堆棧 （先進(jìn)后出）
    calculate:[] //計(jì)算表達(dá)式堆棧（先進(jìn)后出）
  }
})

2.邏輯代碼

calculator.js代碼如下：

// pages/calculator/calculator.js
const app = getApp()
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    operators: ['AC', 'DEL', '%', '/', '7', '8', '9', '×', '4', '5', '6', '+', '1', '2', '3', '-', '0', '.'],
    res: '=',
    expression: '0',
  },

  clearAll() {
    this.setData({
      expression: '0',
      result: ''
    })
  },

  click: function (event) {
    const val = event.target.dataset.value;

    if (val == 'AC') {
      this.clearAll();
    } else if (val == 'DEL') {
      if (this.data.expression != '0') {
        const res = this.data.expression.substr(0, this.data.expression.length - 1);
        this.setData({
          expression: res
        })
      }
    } else {
      var len = this.data.expression.length;
      var s = this.data.expression.substring(len - 1, len);
      if ((this.checkOperator(s)) && this.checkOperator(val)) {
        const res = this.data.expression.substr(0, this.data.expression.length);
        this.setData({
          expression: res
        })
      } else {
        if ((this.data.expression == '0') && (val == '.')) {
          this.setData({
            expression: this.data.expression + String(val)
          })
        } else {
          this.setData({
            expression: this.data.expression === '0' ? val : this.data.expression + String(val)
          })
        }
      }

    }

  },

  result() {
    app.calculator.strList.length = 0;
    app.calculator.strListP.length = 0;
    app.calculator.list.length = 0;
    app.calculator.calculate.length = 0;

    this.expressToStrList(this.data.expression);

    let tempList = app.calculator.strList;
    this.expressToStrListP(tempList);

    let tempP = app.calculator.strListP
    for (let m in tempP) {
      if (this.checkOperator(tempP[m])) {
        let op1 = app.calculator.calculate[0];
        app.calculator.calculate.shift();
        let op2 = app.calculator.calculate[0];
        app.calculator.calculate.shift();
        app.calculator.calculate.unshift(this.countDetail(op2, tempP[m], op1));
      } else {
        app.calculator.calculate.unshift(tempP[m])
      }
    }
    this.setData({
      result: app.calculator.calculate[0]
    });
  },

  countDetail(num1, operator, num2) {
    let result = 0.0;
    try {
      if (operator == "×") {
        result = parseFloat(num1) * parseFloat(num2);
      } else if (operator == "/") {
        result = parseFloat(num1) / parseFloat(num2);
      } else if (operator == "%") {
        result = parseFloat(num1) % parseFloat(num2);
      } else if (operator == "+") {
        result = parseFloat(num1) + parseFloat(num2);
      } else {
        result = parseFloat(num1) - parseFloat(num2);
      }
    } catch (error) {

    }
    return result;
  },

  expressToStrListP(tempList) {//將中綴表達(dá)式集合轉(zhuǎn)變?yōu)楹缶Y表達(dá)式集合
    for (let item in tempList) {
      if (this.checkOperator(tempList[item])) {
        if (app.calculator.list.length == 0) {
          app.calculator.list.unshift(tempList[item]);
        } else {
          if (this.compaerOperator(app.calculator.list[0], tempList[item])) {
            for (let x in app.calculator.list) {
              app.calculator.strListP.push(app.calculator.list[x]);
            }
            app.calculator.list.length = 0;
            app.calculator.list.unshift(tempList[item]);
          } else {
            app.calculator.list.unshift(tempList[item]);
          }
        }
      } else {
        app.calculator.strListP.push(tempList[item]);
      }
    }
    if (app.calculator.list.length > 0) {
      for (let x in app.calculator.list) {
        app.calculator.strListP.push(app.calculator.list[x]);
      }
      app.calculator.list.length = 0;
    }
  },

  compaerOperator(op1, op2) {
    if ((op1 == "%" || op1 == "×" || op1 == "/") && (op2 == "-" || op2 == "+")) {
      return true;
    } else {
      return false;
    }
  },

  expressToStrList(expression) { //將字符串表達(dá)式變成中綴隊(duì)列
    let temp = '';
    for (let i = 0; i < expression.length; i++) {
      if (i == 0 && expression[i] == "-") {
        temp = temp + expression[i];
      } else {
        if (this.checkDigit(expression[i])) {
          temp = temp + expression[i];
        } else {
          if (temp.length > 0) {
            if (expression[i] == ".") {
              temp = temp + expression[i];
            } else {
              app.calculator.strList.push(parseFloat(temp));
              temp = '';
              app.calculator.strList.push(expression[i]);
            }
          } else {
            temp = temp + expression[i];
          }
        }
      }
    }
    if (temp.length > 0 && this.checkDigit(temp.substring(temp.length - 1))) {
      app.calculator.strList.push(parseFloat(temp));
      temp = '';
    }
  },

  //判斷是否是運(yùn)算符
  checkOperator(input) {
    if (input == "-" || input == "+" || input == "/" || input == "%" || input == "×") {
      return true;
    } else {
      return false;
    }
  },

  //判斷是否是數(shù)字
  checkDigit(input) {
    if ((/^[0-9]*$/.test(input))) {
      return true;
    } else {
      return false;
    }
  },
})

3.界面代碼

calculator.js代碼如下：

<!--pages/calculator/calculator.wxml-->
<view class="contaniner">
  <view class="displayer">
     <view class="text">{{expression}}</view>
     <view class="result">={{result}}</view>
    </view>
  <view class="btnArea">
    <block wx:for="{{operators}}">
        <view class="btn" data-value="{{item}}" capture-bind:tap="click">{{item}}</view>
    </block>
    <view class="btn btn1" data-value="{{res}}" bindtap="result">{{res}}</view>
  </view>
</view>

4.樣式代碼

calculator.js代碼如下：

/* pages/calculator/calculator.wxss */
  .container1{
    width: 100%;
    height: 100%;
  }

  .displayer{
    border: 1px solid #f1f3f3;
    width: 100%;
    height: 602![在這里插入圖片描述](https://img-blog.csdnimg.cn/20210328162054440.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDI4MjE5,size_16,color_FFFFFF,t_70#pic_center)
rpx;
    font-size: 45rpx;
    background-color: rgba(241, 243, 243, 1.0);
  }
.btnArea{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  padding: 3rpx;
  margin: 0;
  background-color: rgb(241, 243, 243);
}
  .btn{
    width: 185rpx;
    display: flex;
    align-items: center;
    height: 120rpx;
    justify-content: center;
    border: 1rpx solid #e8eaeb;
    color: black;
    background-color: #F7F8F9;
  }
  .btn1{
    width: 370rpx;
  }
  .text{
    width: 100%;
    height: 10%;
    text-align: right;
    margin-top: 470rpx;
    background-color: rgba(241, 243, 243, 1.0);
    position: absolute;
    word-break: break-word;
  }

  .result{
    width: 100%;
    height: 58rpx;
    text-align: right;
    margin-top: 530rpx;
    background-color: rgba(241, 243, 243, 1.0);
    position: absolute;
    word-break: break-word;
  }