Die Analyse eines einfachen Rechners wird Ihnen den Einstieg in die WeChat-Applet-Entwicklung erleichtern

Vorne geschrieben, aber der Schwerpunkt liegt hinten

Dies ist ein Tutorial, kein Tutorial.

Sie können sich zunächst die Demo-Betriebsanimation ansehen, um zu sehen, was es ist, GitHub-Adresse (https://github.com/dunizb/wxapp-sCalc)

Seit WeChat Seitdem Beim internen Testen des Miniprogramms wurden meine Netzwerkinformationen dadurch fast gelöscht. Einen Moment lang weiß ich nicht, was passiert ist. Besonders wenn jemand in dieser Nacht lange aufblieb und Blut erbrach, um ein Tutorial zu geben, konnte ich nicht anders, als so hart zu arbeiten, dass ich das Gefühl hatte, von anderen in dieser Branche zu Tode getrampelt zu werden. Nach ein paar Tagen der Panik konnte ich endlich nachziehen und am Nationalfeiertag lange aufbleiben, um zu lernen.

Okay, komm schon, der Neuling kann also nur Taschenrechner schreiben. . . . Nun ja, mir fallen keine guten Ideen ein. Lassen Sie uns diesen einfachen Rechner und einige Fallstricke vorstellen, die während des Entwicklungsprozesses auftreten.

Zuallererst gibt es viele Webentwickler-Tools, Dokumente usw., daher muss ich sie nicht mehr wiederholen. WeChat hat die Verifizierung nicht mehr offiziell geändert Mechanismus, und ohne APPID gibt es kein Problem. Es kann abgespielt werden, einige Funktionen sind jedoch eingeschränkt.

Zweitens ist die Entwicklung von WeChat-Miniprogrammen eigentlich nicht schwierig. Wie mächtig es ist, wurde mir erst bewusst, als ich es beherrschte. Tatsächlich ist es einfacher als unsere traditionelle Schreibmethode und stark gekapselt. Gemäß ihren Regeln und Spezifikationen ist das Schreiberlebnis immer noch sehr gut.

Aber da es keine Erlaubnis gibt, werden die aktuellen WeChat-Miniprogramme alle im Emulator der Entwicklertools ausgeführt. Ich weiß nicht, wie die tatsächliche Situation auf WeChat ist.

xxx.wxml-Dateien und xxx.wxss-Dateien

wxml ist eine Reihe von Auszeichnungssprachen, die von WeChat selbst entwickelt wurden. Sie können sie direkt als HTML-Datei anzeigen, da unsere Schnittstellenkonstruktion so ist all Es ist in diese Datei geschrieben, aber es gibt kein HTMLb-Tag, nur das WXML-Tag, und die Anzahl der WXML-Tags ist ebenfalls sehr gering.

wxml ist eine Reihe von Stildateiformaten, die von WeChat selbst entwickelt wurden. Die Schreibmethode ist dieselbe, aber das Dateisuffix wurde geändert im WeChat-Applet zuvor Wie schreiben wir es noch?

wxml plus wxss können wir die gewünschte Benutzeroberfläche erstellen.

xxx.js- und xxx.json-Dateien

In der xxx.js-Datei wird JS geschrieben. Jede xxx.js entspricht einer xxx.wxml-Datei mit demselben Namen. js-Datei muss ein Page-Objekt haben, auch wenn die Seite keine Geschäftslogik hat. Das Enter Page WeChat Web Developer Tool generiert automatisch eine Reihe leerer Methoden, die Sie implementieren können. Sie müssen diese natürlich nicht implementieren.

Die Datei xxx.josn ist eine Konfigurationsdatei, die im Allgemeinen für die globale Konfiguration verwendet wird. Beispielsweise definiert app.josn im Stammverzeichnis, aus welchen Seiten das Miniprogramm besteht B. Miniprogramm-Navigationsleistenstil usw., können Sie anhand des Namens erkennen, was das Attribut bedeutet.

Das Seitenattribut konfiguriert die Seite. Alle Seiten müssen hier konfiguriert werden Ich bin deprimiert, weil die onLoad-Methode nicht ausgeführt wird, wenn die Seite springt. Ich habe viel Zeit damit verschwendet, mir den Kopf zu zerbrechen und bin neugierig.

Gesamtstruktur

Sehen Sie sich das Projektstrukturdiagramm unten an, und eine Seite enthält normalerweise js-, wxml- und wxss-Dateien, die dort vorhanden sein können ist kein Stil.

calc (Rechnerseite), Verlauf (Verlaufsdatensatz), Index (Startseite des Miniprogramms, Startseite), Protokolle (Protokollinformationen), Dienstprogramme (JS-Toolklasse), Protokolle und Utils sind im Lieferumfang enthalten, Sie können es haben oder nicht.

Quellcode-Analyse

Das Schnittstellenlayout dieses einfachen Rechners behält weiterhin das ursprüngliche Layout bei und verwendet das CSS-Flexbox-Layout, das offenbar von WeChat-Beamten empfohlen wird (Flexbox wird in der offiziellen Dokumentation verwendet). .

Die Schaltflächen des Rechners sind alle mit dem Tag erstellt. Fügen Sie einfach den wxss-Stil hinzu. Natürlich können Sie die Schaltflächenkomponente auch direkt verwenden.

wxml:

<viewclass><viewclass>9<viewclass>8<viewclass>7<viewclass>－</viewclass></viewclass></viewclass></viewclass></viewclass>

Hier wird bindtap, wie Sie am Namen erkennen können, zum Binden von Ereignissen verwendet, genau wie wir onclick in HTML verwenden. id={{id9}} Der Wert in doppelten geschweiften Klammern stammt aus dem gleichnamigen Attribut, das durch das Datenattribut in der js-Datei

wxss:

.btnGroup {
    display: flex;
    flex-direction: row;
    flex:1;
    width:100%;
    background-color:#fff;}.item {
    width:25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top:1px;
    margin-right:1px;}.item:active {
    background-color:#ff0000;}

definiert ist

CSS hat nichts zu sagen. Ja, das Einzige, worauf Sie achten müssen, ist, dass WeChat eine Größeneinheit (RPX) bereitstellt, die an die Bildschirmbreite angepasst werden kann. Das offizielle Website-Dokument enthält eine detaillierte Analyse. Ich verwende es auch auf der Verlaufsseite des Rechners:

Betrifft hauptsächlich die Komponenten

• Ansicht und Text. Die meisten Seiten bestehen aus diesen zwei Kumpels.

• Schaltfläche, Schaltfläche „Einfacher Rechner“ auf der Indexseite
  

• Symbol, Computer Die Geschichtsaufzeichnung von Anjing verwendet eines der Symbole, die mit icon geliefert werden.
  

• Markierungsmodus-Anpassungsseite (Navigator)
  

• Bild (Bild), Startseite Avatar
  

• for-Schleife, die auf der Verlaufsanzeigeseite verwendet wird, die Datenanzeige muss aus dem Speicher gelesen werden und der Speicher im Speicher ist ein Array

  <for><viewclass>{{log}}</viewclass></for>

Betrifft hauptsächlich API

• wx.navigateTo, Navigation, Springen, Öffnen einer neuen Seite auf der aktuellen Seite
  

• Speicher, lokaler Speicher, wird zum Speichern des Berechnungsverlaufs verwendet
  Es gibt setStorage, getStorage und auch asynchrone Methoden mit Sync-Ende
  

Notizen

1. Jedes Mal, wenn Sie eine neue Seite erstellen, müssen Sie daran denken, diese dem Seitenattribut von app.josn hinzuzufügen. Andernfalls verwenden Sie „navigateTo“, um zur neuen Seite zu springen und dann wird die onLoad-Methode der neuen Seite nicht ausgeführt.

2. Es gibt keine JavaScript-Objekte wie Fenster im WeChat-Applet. Denken Sie also über Alternativen nach, bevor Sie JS schreiben. Dieser Rechner kann beispielsweise sehr einfach berechnet werden Die Auswertungsfunktion erwies sich als unbrauchbar, ein großer Umweg.

3. Das JS im WeChat-Applet ist kein echtes JS und wxss ist kein echtes CSS, daher müssen Sie beim Schreiben immer noch aufpassen.

4. Dieser Rechner weist Unvollkommenheiten und Fehler auf, da der Fokus nicht auf der Realisierung aller Funktionen liegt, sondern darauf, die WeChat-Applet-Entwicklungsmethode herauszufinden, also machen Sie sich keine Sorgen über Nichtbedenken.

Für weitere Analysen hilft Ihnen der einfache Rechner beim Einstieg in die WeChat-Applet-Entwicklung. Weitere Artikel finden Sie auf der chinesischen PHP-Website.