Einführung in die WeChat-Entwicklung (2) Verwendungs- und Designspezifikationen des WeChat Mini-Programmentwicklungstools

In diesem Artikel können Sie lernen:

1. Wie man Mini-Programmentwicklungstools verwendet, um ein Hello World zu schreiben

2. WeChat Mini-Programm-Designspezifikationen

3. WeChat Mini-Programm-Projektstruktur

》》》Verwendung von WeChat Mini-Programm-Entwicklungstools

• Laden Sie das Applet herunter und installieren Sie es
  Download: WeChat-Webentwicklertool

  Download: offizieller DEMO-Quellcode

  Diese Reihe von Tutorials Verwendet die Entwicklertools der Mac-Version.

• Öffnen Sie nach Abschluss der Installation das WeChat-Webentwicklertool

1. Scannen Sie den QR-Code, um sich anzumelden und zu binden Ihr persönlicher WeChat

2. Nachdem Sie den QR-Code gescannt haben, um sich anzumelden, erstellen Sie ein neues oder importieren Sie ein bestehendes Projekt (verwenden Sie hier den offiziellen DEMO-Quellcode-Schnellstart)

3. Erstellen Sie ein neues Projekt und importieren Sie das Schnellstartprojekt, das Sie gerade heruntergeladen haben


Da nur Unternehmen oder Einzelpersonen, die Einladungen zu internen Tests erhalten haben Wenn Sie über AppIDs verfügen, wählen Sie unbedingt „Keine AppID“ aus.

4. Die neue Erstellung ist erfolgreich. Schauen wir uns das wahre Gesicht der Entwicklungstools an.


Ist Ist es dem Chrome-Entwicklermodus sehr ähnlich? . .

5. Einführung in Entwicklungstools [Debugging]


Das Modul „Debugging“ umfasst hauptsächlich die Auswahl des Debugging-Modells, die Auswahl des Netzwerktyps, der Konsolenausgabe und der Netzwerkressourcen. und Positionierung, Haltepunkte usw. anzeigen.

6. Einführung in Entwicklungstools [Bearbeiten]


Das rote Feld links ist das Projektstrukturverzeichnis und rechts ist der Codebearbeitungsbereich. Klicken Sie nach dem Speichern jeder Änderung auf „Kompilieren“, um den geänderten Seiteneffekt anzuzeigen.

7. Erstellen Sie einen neuen Ordner oder eine neue Datei


Platzieren Sie die Maus auf dem Ordner, ein „+“-Symbol erscheint auf der rechten Seite, klicken Sie, um einen Ordner hinzuzufügen oder Datei

》》》Mini Program Design Specifications(Auszug aus dem WeChat Mini Program Design Guide)

1. Freundlich und höflich
   Um zu vermeiden, dass Benutzer bei der Nutzung von Miniprogrammdiensten auf WeChat von der komplexen Umgebung abgelenkt werden, sollten Sie beim Entwerfen von Miniprogrammen darauf achten, die Beeinträchtigung der Benutzerziele durch irrelevante Designelemente zu reduzieren Benutzer informieren sich über die vom Programm bereitgestellten Dienste und leiten die Benutzer zu einer benutzerfreundlichen Bedienung an.

2. Highlights
   Jede Seite sollte einen klaren Fokus haben, damit Benutzer den Inhalt der Seite jedes Mal, wenn sie eine neue Seite aufrufen, schnell verstehen können Vermeiden Sie andere ablenkende Elemente auf der Seite, die die Entscheidungsfindung und Vorgänge des Benutzers beeinträchtigen.

3. Klar und deutlich
   Sobald ein Benutzer unsere Mini-Programmseite betritt, haben wir die Verantwortung und Verpflichtung, den Benutzer klar und deutlich darüber zu informieren, wo er sich befindet und wohin er gehen kann, um sicherzustellen, dass dies der Fall ist Benutzer können sich frei auf der Seite bewegen, ohne sich zu verlaufen, um den Benutzern ein sicheres und angenehmes Erlebnis zu bieten.

》》》Projektstruktur des WeChat Mini-Programms

1. Dateistruktur
   
   

2. Das Rahmenprogramm enthält eine App, die das Gesamtprogramm beschreibt, und mehrere Seiten, die die jeweiligen Seiten beschreiben. Der Hauptteil eines Rahmenprogramms besteht aus drei Dateien, die im Stammverzeichnis des Projekts abgelegt werden müssen.

文件	作用
app.js	小程序(全局)逻辑
app.json	小程序(全局)公共设置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
app.wxss	小程序公共(全局)样式表

1. Eine Frameseite besteht aus vier Dateien:

文件类型	作用
js	页面逻辑
wxml	页面结构，框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
wxss	是一套样式语言，用于描述 WXML 的组件样式。用来决定 WXML 的组件应该怎么显示。
json	页面配置

Gemäß „Konvention vor Konfiguration“ Prinzipiell Eine Frame-Seite enthält mindestens drei Dateitypen: js, wxml und wxss. Die Dateinamen müssen identisch sein, z. B. Homepage index.js, index.wxml und index.wxss, und sie müssen im selben Verzeichnis platziert werden Ordner. Beim Registrieren einer Seite muss kein Dateisuffix in den Dateinamen geschrieben werden, da das Framework automatisch nach den vier Dateien im Pfad .json, .js, .wxml und .wxss für die Integration sucht.

》》》Zusammenfassung

Das Obige stellt die Vorbereitungsarbeiten für die Entwicklung von WeChat-Miniprogrammen aus drei Aspekten vor: Entwicklungstools, Designspezifikationen und Projektverzeichnisse wird später aktualisiert, indem Sie die offizielle DEMO importieren und die Hello World-Applet-Seite anzeigen. Im Allgemeinen sind die Entwicklungstools für Miniprogramme rationalisiert, die Projektstruktur ist klar, die Dokumentation ist vollständig und die Eintrittsbarriere ist nicht hoch. Das WeChat-Team hat verschiedene Betriebssysteme und unterschiedliche Modelle gepackt, und Entwickler müssen nur die entsprechenden aufrufen APIDas ist alles. Wenn Sie das gesamte Framework verstehen möchten, müssen Sie sich natürlich eingehend mit den Arbeitsprinzipien von Redux, dem Statusmodus, der ein- und zweiseitigen Datenbindung, dem Aufruf nativer Android/IOS-UI-Komponenten durch JS usw. befassen.

Wenn Sie Fragen haben, können Sie auch meinem öffentlichen WeChat-Konto „ITNotes“ folgen, um gemeinsam zu kommunizieren und zu lernen.

[Verwandte Empfehlungen]

1. Quellcode der WeChat-Plattform herunterladen

2. WeChat-Abstimmungsquellcode

3. WeChat Lala Takeaway 2.2.4 Entschlüsselte Open-Source-Version des WeChat Rubik's Cube-Quellcodes

Das obige ist der detaillierte Inhalt vonEinführung in die WeChat-Entwicklung (2) Verwendungs- und Designspezifikationen des WeChat Mini-Programmentwicklungstools. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!