Einführendes Beispiel für die WeChat Mini-Programmentwicklung

WeChat rückt immer näher an unser Leben heran und einige Entwickler entwickeln ständig WeChat-Miniprogramme. Wie entwickelt man also Miniprogramme? Wie fange ich an? Dann werden wir ein WeChat-Miniprogramm als Beispiel verwenden, um die Einsteiger-Nutzung von WeChat-Miniprogrammen kurz vorzustellen.

1. Registrieren Sie ein Miniprogramm-Konto.

1 ( https://mp.weixin.qq.com/), registrieren Sie ein Mini-Programmkonto und geben Sie die entsprechenden Informationen gemäß den Anweisungen ein

2. Nach erfolgreicher Registrierung gehen Sie auf die Homepage und gehen Klicken Sie im Konfigurationsserver auf „Entwicklereinstellungen“

3. Sie erhalten eine AppID und zeichnen die AppID auf wird später beim Erstellen des Projekts verwendet. 🎜>

Hinweis: Wenn Sie das Miniprogramm auf Ihrem Mobiltelefon mit einer Nicht-Administrator-WeChat-ID erleben möchten, müssen wir auch „Bind Developer“ betreiben, d. Im Modul „Benutzeridentität“ – „Entwickler“ müssen Sie das WeChat-Konto verwenden, um das Miniprogramm zu nutzen. In diesem Tutorial ist das Standard-Registrierungskonto und die Erfahrung das Administrator-WeChat-Konto

2. Laden Sie das WeChat-Webentwicklertool herunter

, um Entwicklern dabei zu helfen, es einfacher zu machen. Für eine effiziente Entwicklung hat das WeChat Mini-Programm ein neues Entwicklertool auf den Markt gebracht, das Entwicklungs- und Debugging-, Codebearbeitungs- und Programmfreigabefunktionen integriert

1. Download-Seite: https://mp.weixin/debug/wxadoc/dev/devtools/download.html?t=201715

Wählen Sie je nach System das entsprechende Tool aus Version zum Herunterladen

2. Das Tool umfasst Bearbeitung, Debugging und Projekt drei Seitenkarte:

(1) Der Bearbeitungsbereich kann grundlegende Vorgänge wie Code-Schreiben und ausführen Hinzufügen, Löschen und Umbenennen von Dateien für das aktuelle Projekt

(2) Das Programm-Debugging besteht hauptsächlich aus drei Funktionsbereichen: Simulator, Debugging-Tools und Mini-Programmbetriebsbereich

(3 ) Die Projektseitenkarte hat drei Hauptfunktionen: Anzeige aktueller Projektdetails, Übermittlung der Vorschau und Übermittlung des Uploads und der Projektkonfiguration

Hinweis: Beim Starten des Tools müssen Entwickler die WeChat-ID verwenden, die erfolgreich in gebunden wurde Hintergrund zum Scannen des QR-Codes zum Anmelden. Alle nachfolgenden Vorgänge basieren auf diesem WeChat-Konto

3. Schreiben Sie ein kleines Programmbeispiel

1. Instanzverzeichnisstruktur

2. Beschreibung der Instanzdatei und Quellcode

? 
test
 ├─ page
 │ └─ index
 │  ├─ index.js
 │  ├─ index.json
 │  ├─ index.wxml
 │  └─ index.wxss
 ├─ app.js
 ├─ app.json
 └─ app.wxss

Ein kleines Programm enthält eine App (Hauptteil) und mehrere A-Seiten (Seite)

(1) App wird zur Beschreibung des gesamten Programms verwendet und besteht aus drei Dateien. Das Suffix .js ist die Skriptdatei und das Suffix .json ist die Konfigurationsdatei Im Stammverzeichnis des Projekts ist app.js der Skriptcode des Miniprogramms (erforderlich). In dieser Datei können Sie die Lebensdauer des Miniprogramms überwachen und verarbeiten , Deklaration globaler Variablen und Aufruf umfangreicher APIs, die vom Framework

app.json bereitgestellt werden, ist die globale Konfiguration des gesamten Miniprogramms (erforderlich) und wird zum Konfigurieren und Bestimmen der globalen Konfiguration des verwendet WeChat-Miniprogramm. Der Pfad der Seitendatei, die Fensteranzeige, das Festlegen des Netzwerk-Timeouts, das Festlegen mehrerer Registerkarten usw. Akzeptiert ein Array, jedes Element ist eine Zeichenfolge, um anzugeben, aus welchen Seiten das Miniprogramm besteht. Der [Pfad + Seitenname] jeder Seite im WeChat-Miniprogramm muss in die Seiten von app.json geschrieben werden, und die erste Seite in Seiten ist die Homepage des Miniprogramms.

app.wxss ist das gemeinsame Stylesheet für das gesamte Miniprogramm (nicht erforderlich).

?
App({
 onLaunch: function () {
  console.log('App Launch')
 },
 onShow: function () {
  console.log('App Show')
 },
 onHide: function () {
  console.log('App Hide')
 },
 globalData: {
  hasLogin: false
 }
})

(2) Seite wird verwendet, um eine Seite zu beschreiben. Hier nehmen wir den Homepage-Index als Beispiel. Jede kleine Programmseite besteht aus vier verschiedenen Suffixen mit demselben Namen unter demselben Pfad. Die Zusammensetzung von Dateien, 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.

{
 "pages":[
  "page/index/index"
 ],
 "window":{
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "欢迎页",
  "navigationBarBackgroundColor": "#fbf9fe",
  "backgroundColor": "#fbf9fe"
 },
 "debug": true
}

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

page {
 background-color: #fbf9fe;
 height: 100%;
}
.container {
 display: flex;
 flex-direction: column;
 min-height: 100%;
 justify-content: space-between;
}

index.wxml ist die Seitenstrukturdatei (erforderlich).

index.wxss ist eine Seiten-Stylesheet-Datei (nicht erforderlich). 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.

Page({
 data: {
  title:'小程序',
  desc:'Hello World!'
 }
})

index.json ist die Seitenkonfigurationsdatei (nicht erforderlich). 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. Hier ist keine Angabe erforderlich.

<view class="container">
 <view class="header">
  <view class="title">标题：{{title}}</view>
  <view class="desc">描述：{{desc}}</view>
 </view>
</view>

Tipps:

.header {
 padding: 80rpx;
 line-height: 1;
}
.title {
 font-size: 52rpx;
}
.desc {
 margin-top: 10rpx;
 color: #888888;
 font-size: 28rpx;
}

a. Um Entwicklern die Reduzierung von Konfigurationselementen zu erleichtern, schreibt das Miniprogramm vor, dass die vier Dateien, die die Seite beschreiben, denselben Pfad und dieselbe Datei haben müssen Name

b Das Miniprogramm bietet eine umfangreiche API, die Sie entsprechend Ihren eigenen Anforderungen auswählen können (https://mp.weixin.qq.com/debug/wxadoc/dev/api/ ?t=201715)

Beispiel für ein Miniprogramm

1. Öffnen Sie die WeChat-Webentwicklertools und wählen Sie „Lokales Miniprogrammprojekt“.

2. Geben Sie die AppID und den Projektnamen des Miniprogramms ein, wählen Sie den im dritten Schritt geschriebenen Miniprogramm-Instanzordner aus und klicken Sie auf „Projekt hinzufügen“.

3. Wenn die folgenden Ergebnisse angezeigt werden, herzlichen Glückwunsch, Ihr erstes kleines Programmprojekt wurde erfolgreich geschrieben! Klicken Sie in der linken Seitenleiste auf „Bearbeiten“. Sie können den Code auch direkt im rechten Bearbeitungsfenster ändern, um ihn zu speichern (STRG+S) und zu aktualisieren (F5).

4. Wenn Sie die Wirkung des Miniprogrammprojekts auf Ihrem Mobiltelefon sehen möchten, klicken Sie in der linken Seitenleiste auf „Projekt“, klicken Sie auf „Vorschau“, um einen QR-Code zu generieren, öffnen Sie WeChat und scannen Sie Du kannst es sehen.

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass Entwickler daraus Ideen gewinnen und allen helfen können, das WeChat Mini-Programm besser zu entwickeln.

Verwandte Empfehlungen:

Die umfassendsten Beispiele für WeChat-Miniprogrammprojekte

Einführung in das WeChat Mini-Programm

Einführung in die Methode zur Realisierung gemeinsamer Variablenwerte im WeChat Mini-Programm

Das obige ist der detaillierte Inhalt vonEinführendes Beispiel für die WeChat Mini-Programmentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!