In diesem Artikel wird erläutert, wie Sie mit dem WeChat-Applet ein Taschenrechner-Applet entwickeln. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Freunden, die die WeChat-Applet-Entwicklung erlernen, hilfreich sein.
Zusammenfassung: Bevor ich es beherrschte, war mir nicht klar, wie leistungsfähig es war, und es schien überlegen zu sein. Tatsächlich ist es einfacher als unsere traditionelle Schreibmethode und stark gekapselt. Gemäß ihren Regeln und Spezifikationen ist das Schreiberlebnis immer noch sehr gut.
Lassen Sie uns diesen einfachen Rechner und einige Fallstricke vorstellen, die während des Entwicklungsprozesses auftreten. Erstens gibt es im Internet viele Webentwickler-Tools, Dokumente usw. Es besteht keine Notwendigkeit mehr, den Verifizierungsmechanismus zu knacken APPID, aber einige Funktionen sind eingeschränkt. Die Entwicklung von WeChat-Miniprogrammen ist eigentlich nicht schwierig, auch wenn sie sehr fortgeschritten erscheint. 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 keine HTML-Tags, nur WXML-Tags, und die Anzahl der WXML-Tags ist ebenfalls sehr gering.
wxss ist eine Reihe von Stildateiformaten, die von WeChat selbst entwickelt wurden. Die Schreibmethode ist dieselbe, aber das Dateisuffix ist Wie haben wir es vorher geschrieben? Wie schreiben wir noch CSS in WeChat-Miniprogrammen?
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 die Konfigurationsdatei, die im Allgemeinen für die globale Konfiguration verwendet wird. Beispielsweise definiert app.josn im Stammverzeichnis, aus welchen Seiten das Miniprogramm besteht von, der Miniprogramm-Navigation usw. Sie können die Bedeutung der Attribute erkennen, indem Sie sich ihre Namen ansehen.
Das Seitenattribut konfiguriert die Seite. Alle Seiten müssen hier konfiguriert werden Sie werden sehr deprimiert sein, da 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 Dienstprogramme sind integriert und können verwendet werden 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 Beschriftungen versehen. Natürlich können Sie auch Schaltflächenkomponenten direkt verwenden.
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 definiert ist
Es gibt nichts zu sagen Zu CSS ist lediglich zu beachten, dass WeChat eine Größeneinheit in rpx (responsive pixel) bereitstellt, die entsprechend der Bildschirmbreite angepasst werden kann. Es wird auch auf der Verlaufsseite des Rechners verwendet:
umfasst hauptsächlich die Komponenten
Ansicht und Text, und die meisten Seiten bestehen aus diesen beiden Freunden .
Schaltfläche, die Schaltfläche „Einfacher Rechner“ auf der Indexseite
Symbol (Symbol), der Computerverlaufsdatensatz verwendet stillschweigend eines der mit dem Symbol gelieferten Symbole.
Tag-Anpassungsseite (Navigator)
Beinhaltet hauptsächlich API
wx.navigateTo, Navigieren , springen, eine neue Seite auf der aktuellen Seite öffnen
Speicher, lokaler Speicher, Berechnungsverlauf speichern, es verfügt über setStorage, getStorage und auch über die asynchrone Methode zum Beenden der Synchronisierung
Rendering:
Notizen
Jedes Beim Erstellen einer neuen Seite Sie müssen daran denken, es dem Attribut „pages“ von app.josn hinzuzufügen. Andernfalls wird die onLoad-Methode der neuen Seite nicht ausgeführt, nachdem Sie „navigationTo“ verwendet haben, um zur neuen Seite zu springen.
Es gibt keine JavaScript-Objekte wie „Fenster“ im WeChat-Applet. Überlegen Sie sich daher Alternativen, bevor Sie JS schreiben. Ursprünglich konnte die Auswertungsfunktion zum bequemen Berechnen von Ausdrücken verwendet werden. aber es ist gescheitert. Es ist ein großer Umweg.
Das JS im WeChat-Applet ist kein echtes JS und wxss ist kein echtes CSS, daher müssen Sie beim Schreiben trotzdem aufpassen.
Im Allgemeinen ist das WeChat-Miniprogramm nicht schwierig und die offizielle Dokumentation ist auch sehr gut geschrieben. Lesen Sie einfach die offizielle Dokumentation sorgfältig durch.
Dieser Artikel wurde reproduziert von: http://zixun.jisuapp.cn/xcxkfjc/4488.html
Empfohlen: „Mini-Tutorial zur Programmentwicklung“
Das obige ist der detaillierte Inhalt vonSo entwickeln Sie ein Taschenrechner-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
