Detailliertes Tutorial zum WeChat-Miniprogramm – empfohlene Sammlung

Das WeChat-Miniprogramm ist eine auf der WeChat-Plattform basierende Anwendung, die auf dem WeChat-Client ausgeführt werden kann und ähnliche Funktionen und Erfahrungen wie native Anwendungen bietet. Nachfolgend finden Sie ein einfaches, detailliertes Tutorial zum WeChat-Applet, das Ihnen hilft, zu verstehen, wie Sie ein WeChat-Applet entwickeln.

Vorbereitung:
- Laden Sie die WeChat-Entwicklertools herunter und installieren Sie sie .
- Registrieren Sie ein WeChat-Entwicklerkonto.
Erstellen Sie ein neues Applet-Projekt:
- Öffnen Sie die WeChat-Entwicklertools und klicken Sie oben links auf die Schaltfläche „Neues Miniprogramm“.
- Geben Sie den Namen des Applets, die AppID und den Projektpfad ein und klicken Sie auf die Schaltfläche „OK“.
- Wählen Sie eine Miniprogrammvorlage aus und klicken Sie auf die Schaltfläche „Weiter“.
- Legen Sie die AppID und das Projektverzeichnis des Miniprogramms fest und klicken Sie auf die Schaltfläche „Fertig stellen“.
Seite zum Entwicklungs-Miniprogramm:
- In den WeChat Developer Tools sehen Sie eine Projektstruktur, die die Dateien und Ordner des Miniprogramms enthält.
- pagesErstellen Sie unter dem Ordner einen neuen Ordner, um die zugehörigen Dateien der neuen Seite zu speichern .
- Erstellen Sie im neuen Ordner eine und- Datei index.js, um die Logik, Struktur und den Stil der Seite zu schreiben.index.wxmlindex.wxss
- Registrieren Sie die neue Seite in app.jsonder Datei und fügen Sie den Seitenpfad zum pagesArray hinzu.
Seitenlogik schreiben:
- In index.jsdie Datei können Sie mit JavaScript den Logikcode der Seite schreiben.
- Sie können Page()Funktionen verwenden, um ein Seitenobjekt zu definieren, und die Methoden im Objekt dienen als Ereignisverarbeitungsfunktionen für die Seite.
- Sie können setData()Methoden verwenden, um die Daten der Seite zu aktualisieren und die Seite dynamisch zu rendern.
Seitenstruktur schreiben:
- In index.wxmldie Datei können Sie WXML verwenden, um den Strukturcode der Seite zu schreiben.
- Mithilfe der Syntax können Sie { {}}dynamische Daten einfügen und mit Befehlen wie wx:ifund wx:fordie Anzeige und Schleife von Elementen steuern.
Seitenstil schreiben:
- In index.wxssdie Datei können Sie WXSS verwenden, um den Stilcode der Seite zu schreiben.
- Seitenelemente können mithilfe von Selektoren und Stilattributen gestaltet werden.
Vorschau- und Debug-Applet:
- Klicken Sie in den WeChat-Entwicklertools auf die Schaltfläche „Vorschau“ in der oberen linken Ecke, um eine Vorschau der Wirkung des Miniprogramms im Simulator anzuzeigen.
- Sie können die von den Entwicklertools bereitgestellten Debugging-Tools und die Konsole verwenden, um den Code des Applets zu debuggen.
Miniprogramm veröffentlichen:
- Klicken Sie in den WeChat-Entwicklertools auf die Schaltfläche „Hochladen“ in der oberen linken Ecke, um das Miniprogramm auf die offene WeChat-Plattform hochzuladen.
- Schließen Sie den Überprüfungs- und Veröffentlichungsprozess von Miniprogrammen auf der offenen WeChat-Plattform ab.

Vollständiges WeChat-Applet-Codebeispiel

Einschließlich Seitendateien, Konfigurationsdateien und Logikcode.

Auslagerungsdatei:

index.js:

Page({
    
    
  data: {
    
    
    message: 'Hello, World!'
  },
  onLoad: function() {
    
    
    console.log('页面加载完成');
  },
  onTap: function() {
    
    
    console.log('点击了按钮');
  }
});

index.wxml:

<view class="container">
  <text>{
   
   { message }}</text>
  <button bindtap="onTap">点击我</button>
</view>

index.wxss:

.container {
    
    
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
    
    
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
}

Konfigurationsdatei:

app.json:

{
    
    
  "pages": [
    "pages/index/index"
  ],
  "window": {
    
    
    "navigationBarTitleText": "微信小程序示例",
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#007bff"
  }
}

Mini-Programmlogik:

app.js:

App({
    
    
  onLaunch: function() {
    
    
    console.log('小程序启动');
  }
});

Das Obige ist ein einfaches WeChat-Applet-Beispiel, einschließlich einer Seite und einer globalen Konfigurationsdatei. Sie können in den WeChat Developer Tools ein neues Miniprogrammprojekt erstellen, den obigen Code kopieren und in die entsprechende Datei einfügen und dann auf die Vorschau-Schaltfläche klicken, um eine Vorschau anzuzeigen und zu debuggen.

Hinweis: In der tatsächlichen Entwicklung müssen Sie je nach spezifischen Anforderungen möglicherweise weitere Konfigurations- und Code-Schreibvorgänge durchführen. Die oben genannten Beispiele dienen nur als Referenz und die spezifische Implementierung kann je nach persönlichen Bedürfnissen und Projektanforderungen variieren.

Detaillierte Konfiguration

Im WeChat-Applet heißt die Konfigurationsdatei app.json, mit der die globalen Konfigurationselemente des Applets konfiguriert werden, einschließlich Seitenpfad, Fensterstil, Netzwerk-Timeout usw. Hier ist ein Beispiel für app.json:

{
    
    
  "pages": [
    "pages/index/index",
    "pages/detail/detail",
    "pages/login/login"
  ],
  "window": {
    
    
    "navigationBarTitleText": "微信小程序示例",
    "navigationBarBackgroundColor": "#007bff",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#f5f5f5"
  },
  "networkTimeout": {
    
    
    "request": 5000,
    "downloadFile": 10000
  },
  "tabBar": {
    
    
    "color": "#333333",
    "selectedColor": "#007bff",
    "backgroundColor": "#ffffff",
    "list": [
      {
    
    
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-selected.png"
      },
      {
    
    
        "pagePath": "pages/detail/detail",
        "text": "详情",
        "iconPath": "images/detail.png",
        "selectedIconPath": "images/detail-selected.png"
      },
      {
    
    
        "pagePath": "pages/login/login",
        "text": "登录",
        "iconPath": "images/login.png",
        "selectedIconPath": "images/login-selected.png"
      }
    ]
  }
}

Im obigen Beispiel haben wir drei Seiten konfiguriert: Index, Detail und Login, die den drei Verzeichnissen unter dem Seitenordner entsprechen. Wir legen auch den Stil des Fensters fest, einschließlich Titel, Hintergrundfarbe und Textstil der Navigationsleiste sowie der Hintergrundfarbe.

Darüber hinaus legen wir auch Netzwerk-Timeouts fest, einschließlich Timeouts für das Anfordern und Herunterladen von Dateien.

Schließlich haben wir auch die untere Navigationsleiste konfiguriert, einschließlich Textfarbe, Auswahlfarbe, Hintergrundfarbe sowie Seitenpfad, Text, Symbolpfad usw. jeder Registerkarte.

Einfaches Codebeispiel für die Anforderungskapselung zum Senden von HTTP-Anforderungen und zum Verarbeiten von Antwortdaten:

// request.js

function request(url, method, data) {
    
    
  return new Promise((resolve, reject) => {
    
    
    wx.request({
    
    
      url: url,
      method: method,
      data: data,
      success: (res) => {
    
    
        if (res.statusCode === 200) {
    
    
          resolve(res.data);
        } else {
    
    
          reject(res.errMsg);
        }
      },
      fail: (err) => {
    
    
        reject(err.errMsg);
      }
    });
  });
}

module.exports = request;

Im obigen Code haben wir eine requestFunktion namens definiert, die zum Senden von HTTP-Anfragen verwendet wird. Diese Funktion empfängt drei Parameter: urldie URL-Adresse der Anfrage, methoddie Methode der Anfrage (GET, POST usw.) dataund die Daten der Anfrage.

Innerhalb der Funktion verwenden wir wx.requestMethoden, um Anfragen zu senden und die Ergebnisse der Anfragen über Promise zu verarbeiten. Wenn die Anfrage erfolgreich ist (Statuscode ist 200), werden die Antwortdaten an resolvedie Funktion übergeben; wenn die Anfrage fehlschlägt, werden die Fehlerinformationen an rejectdie Funktion übergeben.

Indem wir die Anfrage als Funktion kapseln, können wir die Funktion an anderer Stelle aufrufen, um die Anfrage zu senden und das Ergebnis der Anfrage über Promise zu verarbeiten. Dies verbessert die Wiederverwendbarkeit und Lesbarkeit des Codes.

Beispiel für die Verwendung dieses Anforderungs-Wrapper-Codes:

// index.js

const request = require('../../utils/request.js');

Page({
    
    
  onLoad: function() {
    
    
    this.getData();
  },
  getData: function() {
    
    
    request('https://api.example.com/data', 'GET', {
    
    })
      .then((res) => {
    
    
        console.log('请求成功', res);
        // 处理请求成功的数据
      })
      .catch((err) => {
    
    
        console.log('请求失败', err);
        // 处理请求失败的错误信息
      });
  }
});

Im obigen Beispiel haben wir die Methode in der Methode der Seite onLoadaufgerufen , die mithilfe der Funktion eine GET-Anfrage gesendet und die Ergebnisse der Anfrage verarbeitet hat. Wenn die Anfrage erfolgreich ist, können wir die Antwortdaten über die Methode abrufen und verarbeiten. Wenn die Anfrage fehlschlägt, können wir die Fehlerinformationen über die Methode abrufen und verarbeiten.getDatarequestthencatch