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>、Warten 组件, um die Seitenstruktur aufzubauen, Daten zu binden und interaktive Verarbeitungsfunktionen bereitzustellen.

index.js ist die Skriptdatei der Seite. In dieser Datei können wir die Lebenszyklusfunktionen der Seite überwachen und verarbeiten, Miniprogramminstanzen abrufen, Daten deklarieren und verarbeiten sowie auf Seiteninteraktionsereignisse reagieren. usw.

//index.js
//获取应用实例
const app = getApp()

Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})

index.wxss ist das Stylesheet der Seite:

/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}

.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}

.userinfo-nickname {
color: #aaa;
}

.usermotto {
margin-top: 200px;
}

Das Stylesheet der Seite ist optional. Wenn ein Seiten-Stylesheet vorhanden ist, werden die Stilregeln im Stylesheet der Seite über die Stilregeln in app.wxss übertragen. Wenn Sie das Stylesheet der Seite nicht angeben, können Sie die in app.wxss angegebenen Stilregeln auch direkt in der Strukturdatei der Seite verwenden.

index.json ist die Konfigurationsdatei der Seite:

Die Konfigurationsdatei der Seite ist ebenfalls optional. Wenn eine Seitenkonfigurationsdatei vorhanden ist, überschreiben die Konfigurationselemente auf der Seite dieselben Konfigurationselemente im Fenster von app.json. Wenn keine angegebene Seitenkonfigurationsdatei vorhanden ist, wird die Standardkonfiguration in app.json direkt auf der Seite verwendet.

Struktur der Protokollseite

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for-items="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

Die Protokollseite verwendet <block/>-Steuer-Tags, um den Code zu organisieren, und <block/>wx:for-items wird auf Binden Sie die -Daten und schleifen Sie die logs-Daten, um den Knoten logs

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

zu erweitern. Die laufenden Ergebnisse sind wie folgt:

Schritt 5: Mobiltelefonvorschau

Klicken Sie in der oberen Symbolleiste des Entwicklungstools auf „Vorschau“, um einen Vorschau-QR-Code zu generieren. Nachdem Sie den Code mit WeChat gescannt haben, können Sie eine Vorschau des Erlebnisses im WeChat-Client.

Das Obige ist der grundlegende Prozess der Front-End-Entwicklung von WeChat-Miniprogrammen. Um ein Miniprogramm zu erstellen, dessen Inhalt aktualisiert werden kann, reicht die Front-End-Entwicklung aus ist bei weitem nicht ausreichend. Backend-Entwicklung ist ebenfalls erforderlich. Die Backend-Entwicklung ist im Grunde die gleiche wie die Web-Entwicklung. Sie können eine beliebige Sprache wie Java, PHP, NodeJS usw. verwenden. Zu beachten ist, dass der Backend-Server des Miniprogramms das HTTPS-Protokoll verwenden muss Kauf eines Cloud-Servers und des Backends. Der Server ist auf https-Dienst eingestellt.

Dieser Artikel ist reproduziert von: https://www.cnblogs.com/niejunchan/p/5904365.html

Empfohlen: „

Mini-Programmentwicklung Tutorial》

Das obige ist der detaillierte Inhalt vonWie fange ich mit der Entwicklung des WeChat-Miniprogramms an? (Ausführliche Erklärung mit Bildern und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!