Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion

Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion

WeChat-Applet: Einfacher Rechner. Zu Ihrer Information: Die spezifischen Inhalte sind wie folgt

Für diejenigen, die gerade erst mit Miniprogrammen in Berührung gekommen sind, ist es sehr schwierig, mit einem hochpraktischen Projekt zu beginnen. Wenn wir uns schnell mit der Verwendung von Miniprogrammen vertraut machen möchten, können wir zunächst versuchen, einen einfachen Taschenrechner zu erstellen.

Screenshot ausführen

Der Rechner stellt keine hohen Anforderungen an die Ästhetik der Benutzeroberfläche. Es handelt sich lediglich um eine Kombination einiger Ansichten und Schaltflächensteuerungen, sodass kein großer Aufwand für die Benutzeroberfläche erforderlich ist. Wichtig ist die Logikebene. Der Grund, warum ich den Rechner als erstes Projekt ausgewählt habe, ist, dass die Logik des Rechners einfach oder komplex sein kann und sich vollständig an die Kenntnisse von Miniprogrammen für Anfänger anpassen lässt.

Hauptcode

javascript - Argumente:

Seite({
  Daten: {
   Ergebnis: „0“,
   id1:"löschen",
   id2:"zurück",
   id3:"Zeit",
   id4:"div",
   id5:"mul",
   id6:"sub",
   id7:"Hinzufügen",
   id8:"Punkt",
   id9:"gleich",
   id10:"Anzahl_0",
   id11:"Nummer_1",
   id12:"Nummer_2",
   id13:"Anzahl_3",
   id14:"Anzahl_4",
   id15:"Anzahl_5",
   id16:"Anzahl_6",
   id17:"Anzahl_7",
   id18:"Anzahl_8",
   id19:"Nummer_9",
   buttonDot:false,
   ist_Zeit:false
  },
  KlickButton: Funktion (e) {
   konsole.log(e);
   var buttonVal = e.target.id;
   var res = dieses.Daten.Ergebnis;
   wenn(diese.Daten.ist_Zeit==true){
    res=0
  }
   var newbuttonDot=diese.data.buttonDot;
   var-Zeichen;
   wenn (buttonVal >= "num_0" && buttonVal <= "num_9") {
    var num=buttonVal.split('_')[1];
    wenn (res == "0" || ((res.length-0) -(length-1)) == "=") {
     res = Zahl;
    }
    anders {
     res = res + num;
    }
   }
   anders{
    wenn(buttonVal=="Punkt")
    {
     wenn(!neuerButtonPunkt)
     {
      res = res + '.';
     }
    }
    sonst wenn(buttonVal=="löschen")
    {
     res='0';
    }
    sonst wenn(buttonVal=="zurück")
    {
     var Länge=Res.Länge;
     wenn (Länge>1)
     {
      res=res.substr(0,Länge-1);
     }
     anders{
      res='0'; 
     }
    }
    sonst wenn (buttonVal == "div" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add")
    {
      wenn(res.length){}
      anders{
        res = JSON.stringify(res)
      }  
      var is_sign=res.substr(res.Länge-1,res.Länge)
      wenn(ist_sign=="+"||ist_sign=="-"||ist_sign=="×"||ist_sign=="÷"){
        res=res.substr(0,res.Länge-1);
      }
     Schalter(Tastenwert){
      Fall "div":
       Zeichen = '÷';
       brechen;
      Fall "mul":
       Zeichen = '×';
       brechen;
      Fall "sub":
       Zeichen='-';
       brechen;
      Fall "Hinzufügen":
       Zeichen='+';
       brechen;
     }
     wenn(!isNaN(res.length))
     {
      Res.Länge-1;
      res=res+Vorzeichen;
     }
    }
   }
   dies.setData({
    ist_Zeit:false,
    Ergebnis: res,
    buttonDot:neuerbuttonDot,
   });
  },
  gleich: Funktion(e){
   var str=dieses.Datenergebnis;
   var Element = "";
   var strArray = [];
   vartemp=0;
   für(var i=0;i<=str.length;i++){
    var s = str.charAt(i);
    wenn((s!='' && s>='0' && s<='9') || s=='.'){
     Artikel=Artikel+s;
    }
    anders{
     strArray[temp]=Element;
     Temperatur++;
     strArray[temp]=s;
     Temperatur++;
     Artikel = '';
    }
   }
   wenn(istNaN(strArray[strArray.length-1]))
   {
    strArray.pop();
   }
   Variablennummer;
   var res=strArray[0]*1;
   für(var i=1;i<=strArray.length;i=i+2){
    Anzahl=strArray[i+1];
    Schalter(strArray[i]){
     Fall "-":
      res = (res-0)-(Anzahl-0);
      brechen;
     Fall "+":
      res = (res-0) + (num-0);
      brechen;
     Fall "×":
      res = (res-0)* (num-0);
      brechen;
     Fall "÷":
     wenn(num!='0')
     {
      res = (res-0)/ (Anzahl-0);
     }
     anders
     {
      res = "∞";
      brechen;
     } 
      brechen;
    }
   }
   dies.setData({
    Ergebnis:res,
   });
  },
  Zeit:Funktion(e){
   var util = require("../../utils/util.js");
   var Zeit = util.formatTime(neues Datum());
   dies.setData({
    Ergebnis: Zeit,
    ist_Zeit:wahr
   });
  }})

wxml

<!--index.wxml-->
<view class="project_name">Einfacher Rechner</view>
<view class="Bildschirminhalt">
  <view class="screen">{{Ergebnis}}</view>
</Ansicht>
<Klasse anzeigen="Inhalt"> 
 <Klasse anzeigen="Schaltflächengruppe">
  <button id="{{id1}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">C</button>
  <button id="{{id2}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">BS</button>
  <button id="{{id3}}" bindtap="Zeit" class="buttonitem color" hover-class="shadow">
  <icon Typ="Warten" color="#66CC33"></icon>
  </button>
  <button id="{{id4}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">÷</button>
 </Ansicht> 
 <Klasse anzeigen="Schaltflächengruppe"> 
  <button id="{{id17}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">7</button>
  <button id="{{id18}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">8</button>
  <button id="{{id19}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">9</button>
  <button id="{{id5}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">×</button>
 </Ansicht>
 <Klasse anzeigen="Schaltflächengruppe">
  <button id="{{id14}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">4</button>
  <button id="{{id15}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">5</button>
  <button id="{{id16}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">6</button>
  <button id="{{id6}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">-</button>
 </Ansicht>
 <Klasse anzeigen="Schaltflächengruppe">
  <button id="{{id11}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">1</button>
  <button id="{{id12}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">2</button>
  <button id="{{id13}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">3</button>
  <button id="{{id7}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">+</button>
 </Ansicht>
 <Klasse anzeigen="Schaltflächengruppe">
  <button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">0</button>
  <button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">.</button>
  <button id="{{id9}}" bindtap="gleich" class="gleich" hover-class="shadow">=</button>
 </Ansicht>
</Ansicht>

wxss:

/**index.wxss**/
Seite{
  Hintergrund: #f5f5f5;
 }
 .Projektname{
   Position: absolut;
   oben: 25px;
   Breite: 100 %;
   Textausrichtung: zentriert;
   Schriftgröße: 30px;
 }
 .Bildschirminhalt{
  Position: fest;
  Farbe: #1b1717;
  Hintergrund: #fff;
  Schriftgröße: 40px;
  unten: 390px;
  Textausrichtung: rechts;
  Höhe: 100px;
  Breite: 100 %;
  Zeilenumbruch: Wort umbrechen;
  Rahmen oben: 1px durchgezogen #a8a8a8;
  Rahmen unten: 1px durchgezogen #a8a8a8;
 }
 .Bildschirm{
  Position: absolut;
  Schriftgröße: 40px;
  Textausrichtung: rechts;
  unten: 0px;
  Breite: 96%;
  links: 2 %;
  Zeilenumbruch: Wort umbrechen;
 }
 .Inhalt{
  Position: fest;
  unten: 0;
 }
 .buttonGroup{
  Anzeige: Flex;
  Flex-Richtung: Reihe;
 }
 .buttonitem{
  Textausrichtung: zentriert;
  Zeilenhöhe: 120rpx;
  Breite: 25 %;
  Randradius: 0;
 }
 .buttonitem1{
  Breite: 192rpx;
  Textausrichtung: zentriert;
  Zeilenhöhe: 120rpx;
  Randradius: 0;
 }
 Symbol{
  Position: absolut;
  oben: 20 %;
  links: 67rpx;
 }
 .Farbe{
  Hintergrund: #fff;
 }
 .gleich{
   Breite: 380rpx;
   Textausrichtung: zentriert;
   Zeilenhöhe: 120rpx;
   Randradius: 0;
   Hintergrund: #fff;
 }
 .Schatten{
  Hintergrund: #e9ebe9;
 }

Nachtrag

Ich habe hier nur eine grobe Beschreibung von Addition und Subtraktion gegeben, aber ein solcher Rechner verfügt bereits über grundlegende Funktionen. Mit zunehmender Beherrschung können wir auch komplexere Funktionen wie Quadrat und Quadratwurzel hinzufügen, um die Entwicklung kleiner Programme zu meistern.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Das WeChat-Applet implementiert einen einfachen Rechner
  • Implementieren von Rechnerfunktionen mit dem WeChat-Applet
  • WeChat-Applet implementiert Taschenrechnerfunktion
  • Beispiel für einen WeChat-Applet-Rechner
  • WeChat-Applet implementiert Taschenrechnerfunktion
  • Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion
  • Das WeChat-Applet implementiert einen einfachen Rechner
  • Codebeispiel für die Implementierung eines einfachen Rechners für das WeChat-Applet
  • Beispiel für einen WeChat-Applet-Rechner

<<:  So ändern Sie den MySQL-Zeichensatz utf8 in utf8mb4

>>:  CentOS7 stellt Version 19 von Docker bereit (einfach, Sie können es nachvollziehen)

Artikel empfehlen

Tutorial zur Installation der DAMO-Datenbank auf Centos7

1. Vorbereitung Nach der Installation des Linux-B...

Gestaltung der Bildvorschau auf der Inhaltswebseite

<br />Ich habe bereits zwei Artikel geschrie...

Ubuntu-Grundeinstellungen: Installation und Nutzung des OpenSSH-Servers

Protokollieren Sie die Installation und Verwendun...

Analyse des Quellcodes des Nginx-Speicherpools

Inhaltsverzeichnis Speicherpoolübersicht 1. Nginx...

Detaillierte Erläuterung, wie Sie Programme auf dem Alibaba Cloud Server bereitstellen und über Domänennamen direkt darauf zugreifen können

Ich hatte nichts zu tun, also kaufte ich zum Lern...

MySQL-Lernen (VII): Detaillierte Erläuterung des Implementierungsprinzips des Innodb Storage Engine-Index

Überblick In einer Datenbank wird ein Index verwe...

Beispiel für die Migration einer MySQL-Online-Protokollbibliothek

Ich möchte Ihnen von einem aktuellen Fall erzähle...

Vue + Element + OSS realisiert das Hochladen von Front-End-Fragmenten und die Wiederaufnahme von Haltepunkten

Reine Front-End-Implementierung:切片上傳斷點續傳.斷點續傳muss...

Schritte zur Implementierung der Autorisierungsanmeldung für das WeChat-Applet von Uni-App

Inhaltsverzeichnis 1. Anwendung und Konfiguration...

Aufzeichnungen zur Verwendung von SSH-Befehlen unter Windows 8

1. Öffnen Sie die virtuelle Maschine und das Git-...

So installieren Sie eine ISO-Datei im Linux-System

Wie installiere ich ISO-Dateien unter einem Linux...

Probleme bei der Installation von MySQL und mysql.sock unter Linux

Vor kurzem traten bei der Installation von Apache...

Easyswoole Ein-Klick-Installationsskript und Pagoden-Installationsfehler

Häufig gestellte Fragen Wenn Sie easyswoole zum e...

Detaillierte Erläuterung der Ideen zur Leistungsüberwachung bestimmter Prozesse im Linux-System basierend auf Python

Es gibt viele Tools, Komponenten und Programme zu...

Detaillierte Codebeispiele zu sieben Methoden zur vertikalen Zentrierung mit CSS

Wenn wir ein Layout bearbeiten, verwenden wir nor...