WeChat-Applet implementiert Taschenrechnerfunktion

WeChat-Applet implementiert Taschenrechnerfunktion

In diesem Artikel wird der spezifische Code für das WeChat-Applet zur Implementierung der Rechnerfunktion zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

1. Schnittstelle des WeChat Mini-Programmentwicklungstools

2. Verzeichnisstruktur

Wenn Sie die Seite zum ersten Mal aufrufen, sieht ihre Verzeichnisstruktur wie folgt aus:

3. Probleme, die Aufmerksamkeit erfordern

(1) Alle neu hinzugefügten Seitendateien müssen in app.json konfiguriert werden, sonst meldet die Seite einen Fehler.

(2) Funktionsweise Das Hinzufügen des Ereignisses bindtap="btnClick" id="{{n9}}" in <view></view> entspricht einem Klickereignis.

Im js-Code können Sie Daten über this.data.n9 abrufen. Die Definitionen dieser Daten sind in js

Durch Eintragen der ID in <view id="{{btn_a}}"><view> wird in der jeweiligen Funktion event.target.id genutzt, um die ID zu ermitteln und eine Unterscheidung vorzunehmen. Sie können auf verschiedene Tags klicken und dann die Geschäftslogik ausführen. Wenn Sie auf die Daten zugreifen müssen, können Sie dies über this.data.xx tun.

Rechner wxml-Seite

<Klasse anzeigen="Inhalt">
  <view class="xianshi">{{Bildschirmnummer}}</view>
  <Ansichtsklasse="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n9}}">9</view>
    <view class="item blue" bindtap="btnClick" id="{{n8}}">8</view>
    <view class="item blue" bindtap="btnClick" id="{{n7}}">7</view>
    <view class="item blue" bindtap="btnClick" id="{{na}}">+</view>
  </Ansicht>
   <Ansichtsklasse="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n6}}">6</view>
    <view class="item blue" bindtap="btnClick" id="{{n5}}">5</view>
    <view class="item blue" bindtap="btnClick" id="{{n4}}">4</view>
    <view class="item blue" bindtap="btnClick" id="{{nb}}">-</view>
  </Ansicht>
   <Ansichtsklasse="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n3}}">3</view>
    <view class="item blue" bindtap="btnClick" id="{{n2}}">2</view>
    <view class="item blue" bindtap="btnClick" id="{{n1}}">1</view>
    <view class="item blue" bindtap="btnClick" id="{{nc}}">*</view>
  </Ansicht>
   <Ansichtsklasse="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n0}}">0</view>
    <view class="item blue" bindtap="btnClear">Klimaanlage</view>
    <view class="item blue" bindtap="btnJs">=</view>
    <view class="item blue" bindtap="btnClick" id="{{nd}}">/</view>
  </Ansicht>
</Ansicht>
// Seiten/cal/cal.js
Seite({
 
  /**
   * Ausgangsdaten der Seite */
  Daten: {
   n0: 0,
   n1: 1,
   n2: 2,
   n3: 3,
   n4: 4,
   n5: 5,
   n6: 6,
   n7: 7,
   n8: 8,
   n9: 9,
   na: '+',
   Anmerkung: '-',
   nc: '*',
   nd: '/',
   Bildschirmnummer: 0,
   BildschirmStr: 0,
   ist_num:1
  },
 
  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  onLoad: Funktion (Optionen) {
  
  },
 
  /**
   * Lebenszyklusfunktion - wartet auf den Abschluss der ersten Darstellung der Seite*/
  onReady: Funktion () {
  
  },
 
  /**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion () {
  
  },
 
  /**
   * Lebenszyklusfunktion - Achten Sie auf das Ausblenden von Seiten */
  onHide: Funktion () {
  
  },
 
  /**
   * Lebenszyklusfunktion - Deinstallation der Seite überwachen*/
  beimEntladen: Funktion () {
  
  },
 
  /**
   * Seitenbezogene Ereignisverarbeitungsfunktion - Achten Sie auf die Pulldown-Aktion des Benutzers */
  onPullDownRefresh: Funktion () {
  
  },
 
  /**
   * Die Funktion, die das Bottoming-Ereignis auf der Seite behandelt*/
  onReachBottom: Funktion () {
  
  },
 
  /**
   * Der Benutzer klickt auf die obere rechte Ecke, um zu teilen*/
  beiShareAppMessage: Funktion () {
  
  },
  btnClick:Funktion(Ereignis){
    //console.log('Die Taste, die Sie gedrückt haben, ist '+event.target.id);
    //console.log('letztes Mal' + this.data.is_num);
    var op='';
    var Daten = 0;
    var last_is_num = diese.Daten.is_num;
    //Was ist diesmal die Eingabe, wenn (event.target.id == '9' || event.target.id == '8' || event.target.id == '7' || event.target.id == '6' || event.target.id == '5' || event.target.id == '4' || event.target.id == '3' || event.target.id == '2' || event.target.id == '1' || event.target.id == '0') {
      Daten = Ereignis.Ziel.ID;
      Dies.setData({ is_num: 1 });
    }
    wenn (event.target.id == '+' || event.target.id == '-' || event.target.id == '*' || event.target.id == '/') {
      op = Ereignis.Ziel.ID;
      Dies.setData({ is_num: 0 });
    }
    wenn (last_is_num==1){
      //Wenn das letzte Mal eine Zahl war, if (op == ''){
        //Diesmal ist es eine Zahl, wenn (this.data.screenNum!=0){
          this.setData({ Bildschirmnummer: this.data.screenNum + data });
          this.setData({ screenStr: this.data.screenStr + data });
        }anders{
          this.setData({ Bildschirmnummer: Daten});
          this.setData({ screenStr: data });
        }
      }anders{
        this.setData({ screenNum: this.data.screenNum + op });
        this.setData({ screenStr: this.data.screenStr +',' +op+',' });
      }
    }anders{
      //Letztes Mal war es keine Zahl if (data != 0) {
        //Diesmal ist es eine Zahl this.setData({ screenNum: this.data.screenNum + data });
        this.setData({ screenStr: this.data.screenStr + data });
      } anders {
        zurückkehren;
      }
    }
    //Konsole.log(op+'aaaaa'+data);
    //console.log('Jetzt ist '+this.data.is_num);
    //Konsole.log('Bildschirmnummer' + diese.Daten.Bildschirmnummer);
    //Konsole.log(diese.Daten.screenStr);
  },
  btnJs:Funktion(){
    Konsole.log(diese.Daten.Bildschirmnummer);
    Konsole.log(diese.Daten.screenStr);
    var Ergebnis=0;
    var strs = new Array(); //ein Array definieren strs = this.data.screenStr.split(","); //Zeichensegmentierung für (var i = 0; i < strs.length; i++) {
      //console.log(strs[i] + i); //Zeichenausgabe nach Segmentierung if (strs[i]=='+'){
        Ergebnis = parseInt(strs[i - 1]) + parseInt(strs[i+1]);
      }
      wenn (strs[i] == '-') {
        Ergebnis = strs[i - 1] – strs[i + 1];
      }
      wenn (strs[i] == '*') {
        Ergebnis = strs[i - 1] * strs[i + 1];
      }
      wenn (strs[i] == '/') {
        Ergebnis = strs[i - 1] / strs[i + 1];
      }    
    }
    konsole.log('Ergebnis:'+Ergebnis);
    this.setData({ screenNum: Ergebnis});
    this.setData({ screenStr: Ergebnis });    
  },
  btnClear:Funktion(){
    //Setze den Marker auf seinen Standardzustand zurück this.setData({ screenNum: 0 });
    Dies.setData({ screenStr: 0 });
    Dies.setData({ is_num: 1 });      
  }
})

Zusammenfassend wird die relative Einheit rpx in das Layout des Miniprogramms eingeführt und es ist notwendig, das flexible Box-Flex-Layout zu erlernen. Was den js-Teil betrifft, ist es vue.js etwas ähnlich, beide binden Daten und vereinfachen die DOM-Operationen von js. Diese beiden Punkte müssen noch einmal geprüft werden.

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
  • Das WeChat-Applet implementiert eine einfache Taschenrechnerfunktion
  • WeChat-Applet implementiert Taschenrechnerfunktion
  • Beispiel für einen WeChat-Applet-Rechner
  • 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

<<:  Analyse von MySQL-Beispielen für doppelte und redundante Indizes

>>:  So bereinigen Sie den von Docker belegten Speicherplatz

Artikel empfehlen

Gemessenes Bild - HTTP-Anforderung

Bitte öffnen Sie die Testseite in einem gängigen ...

Implementierungsideen für die Synchronisierung von Docker-Registry-Images

Einleitung Bisher wurden unsere Docker-Images in ...

Wofür wird jQuery verwendet? jQuery ist eigentlich ein js-Framework

Einführung in jQuery Die jQuery-Bibliothek kann e...

So verwenden Sie @media in mobilen adaptiven Stilen

Allgemeiner Handy-Stil: @media alle und (Ausricht...

Alibaba Cloud Ubuntu 16.04 baut IPSec-Dienst auf

Einführung in IPSec IPSec (Internet Protocol Secu...

JavaScript-Closures erklärt

Inhaltsverzeichnis 1. Was ist ein Abschluss? 2. D...

Fallstudie zur Implementierung eines jQuery Ajax-Chatbots

Chatbots können viel manuelle Arbeit sparen und i...

Implementierung eines Docker-Cross-Host-Netzwerks (Overlay)

1. Docker-Cross-Host-Kommunikation Zu den hostübe...

So begrenzen Sie den Wertebereich von Objektschlüsseln in TypeScript

Wenn wir TypeScript verwenden, möchten wir das vo...

Installations- und Nutzungsprotokoll von VMware ESXi (mit Download)

Inhaltsverzeichnis 1. Installieren Sie ESXi 2. ES...

Lösung für die Nichterreichbarkeit des Tencent Cloud Server Tomcat-Ports

Ich habe vor Kurzem einen Server mit Tencent Clou...