Heim  >  Artikel  >  WeChat-Applet  >  Wie fange ich mit der Entwicklung des WeChat-Miniprogramms an? (Ausführliche Erklärung mit Bildern und Text)

Wie fange ich mit der Entwicklung des WeChat-Miniprogramms an? (Ausführliche Erklärung mit Bildern und Text)

青灯夜游
青灯夜游nach vorne
2020-04-03 09:43:564718Durchsuche

Wie fange ich mit der Entwicklung des WeChat-Miniprogramms an? (Ausführliche Erklärung mit Bildern und Text)

Wie fange ich mit der WeChat-Miniprogrammentwicklung an? In diesem Artikel wird Ihnen ein Einführungstutorial zur WeChat-Applet-Entwicklung vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Miniprogramm: Geben Sie das Bild weiter, um den Text zu lesen

                                                        Wenn Sie ein Programm entwickeln, müssen Sie zunächst die offizielle Dokumentation finden Schauen Sie sich an, welche offiziellen Unterlagen es hat.

Der Link zum WeChat-Applet-Entwicklungsdokument lautet: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,

wie unten gezeigt:

Hier finden Sie alle offiziellen Dokumente zur Entwicklung des WeChat-Miniprogramms.

Da wir nun den Speicherort des Dokuments kennen, stellen wir uns vor, wie man ein WeChat-Applet entwickelt:

Schritt eins: Laden Sie das WeChat-Applet-Entwicklertool herunter und installieren Sie es

, Download-Pfad:

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

Nachdem Sie die Download-Schnittstelle aufgerufen haben, wählen Sie entsprechend Ihrem Betriebssystem aus Klicken Sie auf den entsprechenden Link zum Herunterladen und installieren Sie ihn, nachdem der Download abgeschlossen ist.

Schritt 2: Anmeldetool

Nachdem das Entwicklertool installiert ist, können wir es öffnen. Beim ersten Öffnen müssen Sie den QR scannen Code zum Anmelden bei WeChat, wie unten gezeigt, scannen Sie ihn einfach mit Ihrem WeChat-Mobiltelefon und bestätigen Sie Ihre Anmeldung.

Schritt 3: Projekt erstellen

Schritt 1: Nach erfolgreicher Anmeldung wird die Oberfläche wie folgt angezeigt, klicken Sie auf Geben Sie im Bild unten Schritt 2 ein.

Schritt 2: Geben Sie die Projektinformationen ein. Klicken Sie nach dem Ausfüllen auf das Bild unten „Neu“ und schon ist der Erstellungsprozess eines Projekts abgeschlossen. (Wenn es sich um ein bestehendes Projekt handelt, also bereits eine Codedatei für das Projekt vorhanden ist, klicken Sie bitte auf „Projekt importieren“, um das bestehende Projekt zu importieren.)

Neu erstellte Projekte generieren standardmäßig einen Democode, um die Codestruktur anzuzeigen. Die Schnittstelle sieht wie folgt aus:

Schritt 4: Projektcode Strukturerklärung

Wir können sehen, dass dieses Projekt initialisiert wurde und einige einfache Codedateien enthält. Die wichtigsten und wichtigsten sind app.js, app.json und app.wxss. Unter diesen ist das Suffix eine Skriptdatei, das Suffix

eine Konfigurationsdatei und das Suffix

eine Stylesheet-Datei. Das WeChat-Applet liest diese Dateien und generiert Applet-Instanzen. .js.jsonLassen Sie uns kurz die Funktionen dieser drei Dateien verstehen, um die Änderung zu erleichtern und Ihr eigenes WeChat-Applet von Grund auf zu entwickeln. .wxss

1. app.js ist der Skriptcode des Miniprogramms. Wir können die Lebenszyklusfunktionen des Applets überwachen und verarbeiten und in dieser Datei globale Variablen deklarieren. Rufen Sie die vom Framework bereitgestellte umfangreiche API auf, z. B. in diesem Beispiel die synchrone Speicherung und das synchrone Lesen lokaler Daten.

2. app.json ist die globale Konfiguration des gesamten Miniprogramms. In dieser Datei können wir konfigurieren, aus welchen Seiten das Miniprogramm besteht, die Fensterhintergrundfarbe des Miniprogramms konfigurieren, den Stil der Navigationsleiste konfigurieren und den Standardtitel konfigurieren. Beachten Sie, dass dieser Datei keine Kommentare hinzugefügt werden können.

3. app.wxss ist das öffentliche Stylesheet für das gesamte Miniprogramm. Wir können die in app.wxss deklarierten Stilregeln direkt für das Klassenattribut der Seitenkomponente verwenden.

Uns ist aufgefallen, dass es im Code des Beispielprogramms zwei Ordner gibt, einen mit „Pages“ und einen mit „Utils“, wobei „Utils“ ein Ordner für allgemeine Werkzeugklassenmethoden ist und „Pages“ der Ordner, in dem alle Seiten gespeichert sind. Ordner. Konzentrieren wir uns auf diese Seiten.

Schritt 5: Zusammensetzung der Miniprogramm-Seitendatei

In diesem Beispiel haben wir zwei Seiten, die Indexseite und die Protokollseite Das heißt, die Begrüßungsseite und die Anzeigeseite des Miniprogramm-Startprotokolls befinden sich beide im Seitenverzeichnis. Der [Pfad + Seitenname] jeder Seite im WeChat-Miniprogramm muss in Seiten von app.json geschrieben werden, und die erste Seite in Seiten ist die Homepage des Miniprogramms.

Jede Miniprogrammseite besteht aus vier verschiedenen Suffixdateien mit demselben Namen im selben Pfad, wie zum Beispiel: index.js, index.wxml, index.wxss, index.json. Dateien mit dem Suffix .js sind Skriptdateien, Dateien mit dem Suffix .json sind Konfigurationsdateien, Dateien mit dem Suffix .wxss sind Stylesheet-Dateien und Dateien mit dem Suffix .wxml sind Seitenstrukturdateien.

index.wxml ist die Strukturdatei der Seite:

<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

In diesem Beispiel <view>, <image>, werden in diesem Beispiel verwendet <text>

Stellungnahme:
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen