Beispiel für einen WeChat-Applet-Rechner

<!--pages/index/index.wxml-->
<Klasse anzeigen="Ergebnis">
  <view class="result-num">{{num}}</view>
  <view class="result-op">{{op}}</view>
</Ansicht>
<Ansichtsklasse="btns">
  <Ansicht>
    <view hover-class="bg" bindtap="resetBtn">C</view>
    <view hover-class="bg" bindtap="delBtn">ENTF</view>
    <view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
    <view hover-class="bg" bindtap="opBtn" data-val="/">÷</view>
  </Ansicht>
  <Ansicht>
    <view hover-class="bg" bindtap="numBtn" data-val="7">7</view>
    <view hover-class="bg" bindtap="numBtn" data-val="8">8</view>
    <view hover-class="bg" bindtap="numBtn" data-val="9">9</view>
    <view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
  </Ansicht>
  <Ansicht>
    <view hover-class="bg" bindtap="numBtn" data-val="4">4</view>
    <view hover-class="bg" bindtap="numBtn" data-val="5">5</view>
    <view hover-class="bg" bindtap="numBtn" data-val="6">6</view>
    <view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
  </Ansicht>
  <Ansicht>
    <view hover-class="bg" bindtap="numBtn" data-val="1">1</view>
    <view hover-class="bg" bindtap="numBtn" data-val="2">2</view>
    <view hover-class="bg" bindtap="numBtn" data-val="3">3</view>
    <Ansicht hover-class="bg" bindtap="opBtn" data-val="+">+</Ansicht>
  </Ansicht>
  <Ansicht>
    <view hover-class="bg" bindtap="numBtn" data-val="0">0</view>
    <view hover-class="bg" bindtap="dotBtn">.</view>
    <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
  </Ansicht>
</Ansicht>

/* Seiten/Index/index.wxss */

Seite {
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Höhe: 100%;
  Farbe: #555;
}

.Ergebnis {
  biegen: 1;
  Hintergrund: #f3f6fe;
  Position: relativ;
}

.Ergebnis-Nummer {
  Position: absolut;
  Schriftgröße: 27pt;
  unten: 5vh;
  rechts: 3vw;
}

.Ergebnis-Op {
  Schriftgröße: 15pt;
  Position: absolut;
  unten: 1vh;
  rechts: 3vw;
}

.btns {
  biegen: 1;
}

/* Schaltflächenstil */

.bg {
  Hintergrund: rgb(223, 44, 20);
}

.btns {
  biegen: 1;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Schriftgröße: 17pt;
  Rahmen oben: 1rpx durchgezogen #ccc;
  Rahmen links: 1rpx durchgezogen #ccc;
}

.btns > anzeigen {
  biegen: 1;
  Anzeige: Flex;
}

.btns > anzeigen > anzeigen {
  Flex-Basis: 25 %;
  Rahmen rechts: 1rpx durchgezogen #ccc;
  Rahmen unten: 1rpx durchgezogen #ccc;
  Box-Größe: Rahmenbox;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
}

.btns > Ansicht:letztes-Kind > Ansicht:erstes-Kind {
  Flex-Basis: 50%;
}

.btns > Ansicht:erstes-Kind > Ansicht:erstes-Kind {
  Farbe: #f00;
}

.btns > Ansicht > Ansicht:letztes-Kind {
  Farbe: #fc8e00;
}

// Genaue Berechnung module.exports = {
  // hinzufügen: Funktion(arg1, arg2) {
    var r1, r2, m
    versuchen {
      r1 = arg1.toString().split(".")[1].Länge
    } fangen (e) {
      r1 = 0
    }
    versuchen {
      r2 = arg2.toString().split(".")[1].Länge
    } fangen (e) {
      r2 = 0
    }
    // Konvertieren Sie alle Dezimalzahlen in Ganzzahlen, bevor Sie m berechnen. Dies ist die Zehnerpotenz, die mit m = Math.pow(10, Math.max(r1, r2)) multipliziert werden muss.
    // Zum Schluss bei der Rückgabe durch m dividieren
    Rückgabewert (arg1 * m + arg2 * m) / m
  },
  // Subtrahieren sub: function(arg1, arg2) {
    var r1, r2, m, n
    versuchen {
      r1 = arg1.toString().split(".")[1].Länge
    } fangen (e) {
      r1 = 0
    }
    versuchen {
      r2 = arg2.toString().split(".")[1].Länge
    } fangen (e) {
      r2 = 0
    }
    m = Math.pow(10, Math.max(r1, r2))
    //Dynamische Steuerungspräzisionslänge n = (r1 >= r2) ? r1 : r2
    Rückgabewert ((arg1 * m - arg2 * m) / m).toFixed(n)
  },
  // Mit mul multiplizieren: function(arg1, arg2) {
    var m = 0,
      s1 = arg1.toString(),
      s2 = arg2.toString()
    versuchen {
      m += s1.split(".")[1].Länge
    } fangen (e) {}
    versuchen {
      m += s2.split(".")[1].Länge
    } fangen (e) {}
    returniere Zahl(s1.replace(".", "")) * Zahl(s2.replace(".", "")) / Math.pow(10, m)
  },
  // außer div: function(arg1, arg2) {
    var t1 = 0,
      t2 = 0,
      r1, r2
    versuchen {
      t1 = arg1.toString().split(".")[1].Länge
    } fangen (e) {}
    versuchen {
      t2 = arg2.toString().split(".")[1].Länge
    } fangen (e) {}

    r1 = Zahl(arg1.toString().replace(".", ""))
    r2 = Zahl(arg2.toString().replace(".", ""))
    Rückgabewert (r1 / r2) * Math.pow(10, t2 - t1)
  }
}

 //Funktion zur Verarbeitung von Nummerntastenereignissen numBtn: function(e) {
    var num = e.ziel.dataset.val
    wenn (diese.Daten.Nummer === '0' || dies.istKlar) {
      dies.setData({
        Zahl: Zahl
      })
      this.isClear = falsch
    } anders {
      dies.setData({
        num: diese.Daten.num + num
      })
    }
  },

 // Operator-Ereignisverarbeitungsfunktion opBtn: function(e) {
    var op = diese.daten.op
    // Vorherige Nummer abrufen var num = Number(this.data.num)
    dies.setData({
      op: e.Ziel.Datensatz.val
    })
    wenn (dies.istKlar) {
      zurückkehren
    }
    dies.isClear = true
    wenn (dieses.Ergebnis === null) {
      dieses.Ergebnis = Nummer
      zurückkehren
    }
    wenn (op === '+') {
      dieses.Ergebnis = calc.add(dieses.Ergebnis, num)
    } sonst wenn (op === '-') {
      ......
      Andere Operationen (detaillierten Code finden Sie weiter unten im vollständigen Codeabschnitt)
      ......
    }
    dies.setData({
      num: dieses.Ergebnis + ''
    })
  },

// Seiten/index/index.js
const calc = erfordern('../../utils/calc.js')

Seite({

  /**
   * Ausgangsdaten der Seite */
  Daten: {
    Zahl: '0',
    op: ''
  },
  // Ergebnis Ergebnis: null,
  // Ob die Zahlenreihe gelöscht werden soll/*
  Gelöscht (Wert ist wahr)
    Nachdem Sie auf den Operator geklickt haben, ändern Sie ihn in true, so dass bei der nächsten Eingabe einer Zahl die Anzeige durch Klicken auf */ gelöscht wird.
  isClear: falsch,

  //Funktion zur Verarbeitung von Nummerntastenereignissen numBtn: function(e) {
    var num = e.ziel.dataset.val
    wenn (diese.Daten.Nummer === '0' || dies.istKlar) {
      dies.setData({
        Zahl: Zahl
      })
      this.isClear = falsch
    } anders {
      dies.setData({
        num: diese.Daten.num + num
      })
    }
  },

  // Operator-Ereignisverarbeitungsfunktion opBtn: function(e) {
    var op = diese.daten.op
    // Vorherige Nummer abrufen var num = Number(this.data.num)
    dies.setData({
      op: e.Ziel.Datensatz.val
    })
    wenn (dies.istKlar) {
      zurückkehren
    }
    dies.isClear = true
    wenn (dieses.Ergebnis === null) {
      dieses.Ergebnis = Nummer
      zurückkehren
    }
    wenn (op === '+') {
      dieses.Ergebnis = calc.add(dieses.Ergebnis, num)
    } sonst wenn (op === '-') {
      dieses.Ergebnis = calc.sub(dieses.Ergebnis, Num)
    } sonst wenn (op === '*') {
      dieses.Ergebnis = calc.mul(dieses.Ergebnis, num)
    } sonst wenn (op === '/') {
      dieses.Ergebnis = calc.div(dieses.Ergebnis, num)
    } sonst wenn (op === '%') {
      dieses.Ergebnis = dieses.Ergebnis % num
    }
    dies.setData({
      num: dieses.Ergebnis + ''
    })
  },

  // Funktion zur Verarbeitung von Dezimalpunktereignissen dotBtn: function() {
    wenn (dies.istKlar) {
      dies.setData({
        Nummer: "0."
      })
      this.isClear = falsch
      zurückkehren
    }
    wenn (this.data.num.indexOf('.') >= 0) {
      zurückkehren
    }
    dies.setData({
      num: diese.Daten.num + '.'
    })
  },

  // DEL-Taste Verarbeitungsfunktion delBtn: function() {
    var num = this.data.num.substr(0, this.data.num.length - 1)
    dies.setData({
      Zahl: Zahl === '' ? '0' : Zahl
    })
  },

  // C-Taste Ereignisverarbeitungsfunktion resetBtn: function() {
    dieses.Ergebnis = null
    this.isClear = falsch
    dies.setData({
      Zahl: '0',
      op: ''
    })
  }
})