Debuggen des WeChat-Applets

Das WeChat-Miniprogramm gibt es schon seit langem und ich habe vor kurzem begonnen, daran herumzubasteln. Da ich noch nie Front-End-Code geschrieben habe, ist dieser Blog-Beitrag auch eine Zusammenfassung meiner eigenen Erkundungen Ich hoffe, dass es für Studenten wie mich hilfreich sein kann, die keine Front-End-Erfahrung haben.

---

1. Umgebung

Der Applet-Veröffentlichungsprozess ist wie folgt:

Miniprogramm-Veröffentlichungsprozess

1.1 WeChat-Authentifizierung

Je nach den unterschiedlichen Bedürfnissen der Benutzer sind auch die Registrierungsanforderungen unterschiedlich:

1. Unternehmensentwickler, die über Informationen zur Unternehmensregistrierung verfügen, kann sich die Registrierungsgebühr von 500 leisten, damit das Miniprogramm veröffentlicht und gestartet werden kann;

2. Das Unternehmen bezahlt keine Programmierer, verfügt aber über Unternehmensregistrierungsinformationen und möchte keine Gebühren zahlen , aus Gründen der technischen Reserven;

3. Kein Geld, um mit Programmierern herumzuspielen, keine Firmenregistrierungsinformationen, keine Notwendigkeit, Gebühren zu zahlen, nur für technische Reserven

Benutzer des Typs 12 benötigen zunächst eine 非绑定个人帐号 E-Mail-Adresse auf der öffentlichen Plattform. Die Registrierungsschritte finden Sie in den offiziellen Dokumenten, die Sie ausfüllen müssen Unternehmensname und Registrierungsnummer der Geschäftslizenz. Da die App-ID für die Ausführung auf einem echten Gerät erforderlich ist, können Sie die WeChat-Zahlungsoption 300 wählen, aber noch nicht bezahlen.

Benutzer vom Typ 3 können nur die WeChat-Webentwickler-IDE herunterladen und Miniprogramme ohne App-IDs über den Simulator mit eingeschränkten Funktionen entwickeln und erleben. Das zur Registrierung des Miniprogramms verwendete Unternehmenskonto kann 个人帐号 als hinzugefügt werden Administrator: Der Administrator kann 10 Entwicklerkonten einladen, und jedes Unternehmenskonto verfügt über eine App-ID; Entwickler können über die WeChat-IDE und App-IDDebugging entwickeln und debuggen; Sie müssen den Server网络请求Domänennamen im Hintergrund des Miniprogrammswie unten gezeigt konfigurieren:

Konfigurieren Sie den Server

1.2 Mini-Programmentwicklungstool

1.2.1

WeChat-Webentwicklertools

WeChat stellt

als offizielle IDE bereit, Sie können die offizielle IDE hier herunterladen微信web开发者工具 Sie können die Demoversion hier herunterladen, die App-ID eingeben und sie über die offizielle IDE öffnen, um die unten gezeigte Benutzeroberfläche anzuzeigen:

IDE

1.2.2 Webstorm

Da die offizielle IDE-Code-Vervollständigung und -Erfahrung nicht sehr gut sind, kann beispielsweise nicht jedes Mal, wenn eine Datei geöffnet wird, eine neue Tab-Hintergrundfarbe angepasst werden usw. Entwickler mit Zwangsstörungen können sich dafür entscheiden, Webstorm als IDE + WeChat-IDE nur als Emulator zu verwenden. Webstorm verfügt außerdem über viele berührende kleine Details, wie zum Beispiel die Hex-Farbe, die auf der linken Seite angezeigt werden kann >2 🎜>

Beamter der öffentlichen WeChat-Plattform;

git

Hub WeChat-Miniprogramm-Entwicklungsressourcenzusammenfassung, dies ist relativ vollständig;Douban-Filmdemo, meine Referenz zum Erlernen der Miniprogramm-Demo;

Studenten wie ich, die keine Front-End-Grundlage haben, können sich zunächst das einfache Tutorial auf der offiziellen Plattform ansehen

Framework

Komponenten

---

API

Einführung in Tools, die ein umfassendes Verständnis vermitteln Ein Grundkonzept. Beginnen Sie dann mit Demos, studieren Sie die Demos anderer Leute, während Sie Ihre eigenen Demos schreiben, und suchen Sie Hilfe bei Suchmaschinen und Communities, wenn Sie auf Probleme stoßen.

3 Da das offizielle Dokument bereits eine Einführung in das Framework enthält, werde ich es hier nach meinem eigenen Verständnis zusammenfassen. Wenn Sie dies sehen und das offizielle Dokument nicht gelesen haben, können Sie einen Blick auf mein werfen Zuerst verstehen und dann weitermachen.

3.1

EinführungAnhand der offiziellen Demo können Sie sehen, dass der Stammordner vorhanden ist der Projektname, und darunter befindet sich der Ordner . Jedes Geschäftsmodul erstellt einen separaten Unterordner von Seiten. Der Name von Ziwenjia lautet beispielsweise „component_one“ und die .js. json.w

xml in diesem Ordner

---

.

wxss

muss ebenfalls mit dem Präfix „component“ versehen werden. Wie unten gezeigt, entspricht der rote Box-Ordner der Funktion der zweiten Registerkarte Der Ordner im grünen Kästchen entspricht der Funktion des ersten Tabs und die Dateibenennung im blauen Kästchen Unveränderbar, global.

Framework-Beispiel

pagesDie offizielle Erklärung für den Ursprung des Ordnernamens und die Benennung von app.jsjsonwxss lautet: Ein kleines Programm enthält eine App, die das Gesamtprogramm beschreibt, und mehrere Seiten, die sie beschreiben jeweiligen Seiten.

Verzeichnisstruktur

Aus der obigen Tabelle ist ersichtlich, dass die globale app.js app.json ist erforderlich, und lokales .js.wxml ist erforderlich, wenn die Codemenge relativ gering ist, ähnlich wie bei der Douban-Filmdemo, alle Stylesheets können in app.wxss geschrieben werden, es wird jedoch dennoch empfohlen Um nach Unternehmen zu unterscheiden, überschreibt das JSONWXSS in den Seiten die gleichen Konfigurationselemente in app.jsonapp.wxss. Wenn der Seite ein optionaler Dateityp fehlt, verwendet die Seite direkt die entsprechende Konfiguration die App.

3.2 mvcPerspektive

Aus der Perspektive von MVC ist js der Controller, json ist die LogikKonfigurationsdatei, und wxml ist die einzige Ansicht des UI-Steuerelements , wxss ist eine Konfigurationsdatei, die nur die spezifischen Stile jedes Steuerelements in der Ansicht konfiguriert.

3.3 Was machen die einzelnen Dateitypen?

3.3.1 app.js

App() ist die Lebenszyklusmethode des Miniprogramms. Sie kann Geschäftslogik entsprechend jeder Phase des Miniprogrammlebens ausführen Zyklus. Sie können hier auch globale Variablen

app.js

3.3.2 app.json festlegen

app.json

Konfigurieren Sie das WeChat-Applet global, bestimmen Sie den Pfad der Auslagerungsdatei, die Fensterleistung und legen Sie das Netzwerk-Timeout fest , mehrere Tabs festlegen usw. Das Element mit Index=0 in Seiten[] wird verwendet, wenn das Applet geöffnet wird. Sie können hier auch die Debug-Funktion aktivieren app.wxss

app.wxss

app.wxss wird zum Festlegen globaler Stile verwendet, .xxx entspricht der

KlasseName, der dem entsprechenden UI-Steuerelement in .wxml entspricht.

app.wxml

4 >Modularisierung

---

4.1 jsModule, die eng mit dem Unternehmen im Projekt verbunden sind, werden als Komponenten unter Seiten platziert. Module, die zwischen Unternehmen gemeinsam sind, werden unter IDK platziert, und Module, die nichts damit zu tun haben mit dem Unternehmen zu tun haben, werden unter IDP gestellt.

Modulare Codestruktur
Wenn sich Klasse B

in Seiten bezieht Klasse A in

IDK können Sie wie folgt eine Instanz von A in Klasse B erstellen und in der Page()-Methode von Klasse B darauf verweisen.

4.2 wxss

Gängige UI-Steuerelementstile können in app.wxss geschrieben werden, z. B. Ladesteuerelemente usw.; UI-Stile, die sich nur auf Seiten beziehen, können in das WXSS geschrieben werden, das jeder Seite entspricht 🎜>

var aObj = require('../../IDK/A.js')

wxss-Modularität

5. Zusammenfassung des Demo-Schreibprozesses

Da ich ein Front-End-Neuling bin, habe ich mich beim Schreiben der Demo daran orientiert zu offiziellen Dokumenten Programmierung
& orientiert an Baidu, orientiert an Google, orientiert am Stapel

Überlauf

Programmierung ... Als ich auf Probleme stieß, überprüfte und löste ich sie und löste schließlich verschiedene Probleme und gab sie Geburt einer kleinen Demo Ich fühlte mich sehr erfolgreich, als ich daran arbeitete. Hier ist eine Zusammenfassung einiger Szenarien, die mir beim Schreiben der Demo begegnet sind.

5.1 Beteiligte Anwendungsszenarien

5.1. 1 Klick

Ereignis

Klickereignis

bindTap="Methodenname zur Reaktion auf Klickereignis"

5.1.2 Scroll-

Ansicht

Scroll-Ansicht

scroll-y vertikales Scrollen

bindScroll="Methodenname zum Abhören von Scroll-Ereignissen"

5.1.3 ListeDatenbindung

for-items="{{datasources}}" wx:for- item= „a data“> Datenquelle binden;

5.1.4 Netzwerkanfrage

Sie können die WeChat-Applet-API verwenden, um GetPost-Anfragen,

wx.request

kann auch fetch.then

verwendet werden

Abrufen und dann

5.2 Aufgetretene Fallstricke

5.2.1 Bilder im Simulator können nicht angezeigt werden

Fehler im WeChat-Applet , manchmal werden Bilder abgefangen und können nicht auf dem Simulator angezeigt werden

5.2.2 Die Netzwerkanforderungsdaten der realen Maschine sind leer

Sie müssen den Anforderungsdomänennamen in der Miniprogramm-Betriebskonfigurationsplattform konfigurieren. und müssen 500 Registrierungen bezahlen. Erst nach Zahlung einer Gebühr können echte Maschinennetzwerkanfragen unterstützt werden Eine brandneue Möglichkeit, Benutzer und Dienste miteinander zu verbinden. Sie kann problemlos auf

bezogen und verbreitet werden und bietet gleichzeitig ein hervorragendes Benutzererlebnis. Daher ähneln Miniprogramme im Vergleich zu offiziellen Konten eher Plug-Ins, die auf WeChat beschränkt sind. Wenn es sich um ein unternehmerisches Projekt vom Typ „Tool“ handelt, z. B. einen Reinigungsservice für Tierkliniken, den Kauf von Bahntickets usw., ist es im Allgemeinen besser, keine separate APP zu erstellen, sondern sich auf das WeChat-Ökosystem zu verlassen Ein Internetunternehmen wie Baidu und Ali. Die okklusive Natur des WeChat-Miniprogramms kann nicht als Tool zur Verkehrsumleitung verwendet werden. Da seine API viele WeChat-Anpassungen aufweist, kann der vorhandene H5-Code nicht vollständig transplantiert werden, und es ist ein gewisser Lernaufwand erforderlich Die Anwendbarkeit des Miniprogramms interessiert mich auch. Die entsprechenden Nachrichten und Kommentaranalysen sind in Teil 2 „Community-Ressourcen“ aufgeführt über meine eigenen Meinungen und werde sie nicht vertreten

Das obige ist der detaillierte Inhalt vonDebuggen des WeChat-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!