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;}

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.