Lernhinweise zum WeChat-Applet: Seitenkonfiguration und -routing

Lernhinweise zum WeChat-Applet: Seitenkonfiguration und -routing

Ich habe kürzlich die Entwicklung kleiner Programme studiert und überprüft und mache mir Notizen zu einigen meiner Lernergebnisse. Siehe die offizielle Dokumentation des WeChat Mini-Programms: developers.weixin.qq.com/miniprogram…

1. Mini-Programmkonfiguration

1. Globale Konfiguration

Die Datei app.json im Stammverzeichnis des Miniprogramms wird verwendet, um das WeChat-Miniprogramm global zu konfigurieren, den Pfad der Auslagerungsdatei und die Fensterleistung zu bestimmen, das Netzwerk-Timeout festzulegen, mehrere Registerkarten einzurichten usw.

// Beispiel {
  "Seiten": [
    "Seiten/Index/Index",
    "Seiten/Protokolle/Index"
  ],
  "Fenster": {
    "navigationBarTitleText": "Demo"
  },
  "TabBar": {
    "Liste": [{
      "pagePath": "Seiten/Index/Index",
      "Text": "Startseite"
    }, {
      "pagePath": "Seiten/Protokolle/Index",
      "text": "Protokoll"
    }]
  },
  "Netzwerk-Timeout": {
    "Anfrage": 10000,
    "Downloaddatei": 10000
  },
  "debug": wahr
}

2. Seitenkonfiguration

Jede Miniprogrammseite kann auch die gleichnamige JSON-Datei verwenden, um die Fensterleistung dieser Seite zu konfigurieren. Die Konfigurationselemente auf der Seite überschreiben dieselben Konfigurationselemente im Fenster von app.json.

// Beispiel {
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "schwarz",
  "navigationBarTitleText": "Demonstration der WeChat-API-Funktion",
  "Hintergrundfarbe": "#eeeeee",
  "HintergrundTextStil": "hell"
}

3. Sitemap-Konfiguration

Hinweis: Die Sitemap-Index-Eingabeaufforderung ist standardmäßig aktiviert. Wenn Sie die Sitemap-Index-Eingabeaufforderung deaktivieren müssen, können Sie das Feld checkSiteMap in der Einstellung der Miniprogramm-Projektkonfigurationsdatei project.config.json auf „false“ konfigurieren.

Über die Datei sitemap.json im Stammverzeichnis des Miniprogramms wird konfiguriert, ob das Miniprogramm und seine Seiten von WeChat indexiert werden dürfen.

Es gibt zwei Möglichkeiten, die Indexierung durch WeChat zu konfigurieren:

1. Einstellungen für die Seitenindizierung: Sie können den Index des gesamten Miniprogramms schließen, den Hintergrund der Miniprogrammverwaltung aufrufen – Funktion – Zugriff auf Seiteninhalte – Seitenindizierungsschalter;

2. Sitemap-Konfiguration: Sie können den Index bestimmter Seiten schließen.

// Alle Seiten werden von WeChat indiziert (Standard)
{
    "Regeln":[{
        "Aktion": "erlauben",
        "Seite":"*"
    }]
}
// Pfad/zur/Seite Seite ist nicht indexiert, der Rest wird indexiert {
    "Regeln":[{
        "Aktion": "Nicht zulassen",
        "Seite": "Pfad/zur/Seite"
    }]
}

2. Fünf Routen des Miniprogramms

1. wx.navigateTo()

Aktuelle Seite beibehalten und zu einer Seite in der App springen. Kann nicht zur Tabbar-Seite springen. Der Seitenstapel in einem Miniprogramm kann bis zu zehn Ebenen tief sein. Wenn er mehr als zehn Ebenen umfasst, können Sie wx.redirectTo zum Springen verwenden.

wx.navigateTo({
    URL: "Liste?ID=2",
    Ereignisse: {
        //Schnittstelle für die Kommunikation zwischen Seiten, die verwendet wird, um die Daten zu überwachen, die von der geöffneten Seite an die aktuelle Seite gesendet werden.
        irgendeinEreignis:Funktion(Daten){
            console.log(Daten)
        }
    },
    Erfolg:Funktion(res){
        // Daten über eventChannel an die geöffnete Seite senden res.evnetChannel.emit('someEvent',{dta:'list'})
    }
})

2. wx.redirectTo()

Schließen Sie die aktuelle Seite und springen Sie zu einer Seite in der App. Es ist jedoch nicht gestattet, zur Tabbar-Seite zu springen.

// Beispiel wx.redirectTo({
    URL: 'Liste?ID=2',
    Erfolg:Funktion(){},
    Fehler:Funktion(){}
})

3. wx.switchTab()

Springen Sie zur TabBar-Seite und schließen Sie alle anderen Seiten außer TabBar.

wx.switchTab({
    URL: „/index“
})

4. wx.navigateBack()

Schließen Sie die aktuelle Seite und kehren Sie zur vorherigen Seite oder zu mehreren Seiten zurück. Sie können getCurrentPages verwenden, um den aktuellen Seitenstapel abzurufen und zu entscheiden, wie viele Ebenen zurückgegeben werden sollen.

// Dies ist Seite A wx.navigateTo({
  URL: „B?id=1“
})

// Dies ist Seite B wx.navigateTo({
  URL: „C?id=1“
})

// NavigateBack auf Seite C führt zurück zu Seite A wx.navigateBack({
  Delta: 2
})

5. wx.reLaunch()

Schließen Sie alle Seiten und öffnen Sie eine Seite in der App.

//Beispiel wx.reLaunch({
    URL: 'Liste?id=2'
})

Hinweis: Und wie springe ich von der Seite in der Webansicht, die sich auf den Sprung bezieht, zurück zum Miniprogramm?

wx.miniPrograme.navigateTo({
    url:'Seiten/Login/Login'+'Parameter'
})
// Zur Navigationsseite des Miniprogramms springen wx.miniPrograme.switchTab({
    url:"/Seiten/Index/Index"
})

Zusammenfassen

Dies ist das Ende dieses Artikels über die Seitenkonfiguration und Routing-Methode der Lernhinweise zum WeChat Mini-Programm. Weitere relevante Inhalte zur Seitenkonfiguration und Routing-Methode des Mini-Programms finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Android-Entwicklung WeChat Applet Routing Jump-Methode
  • 10 Minuten, um das Single-Page-Anwendungsrouting des WeChat-Applets gründlich zu verstehen
  • Routing-Dateien und Routing-Methoden zur Miniprogramm-Kapselung (5 vollständige Analysen)
  • Problem bei der Routing-Umschaltung und Seitenumleitung bei der Entwicklung von WeChat-Applets
  • Beispielanalyse für WeChat-Applet-Routing-Sprung in zwei Richtungen

<<:  Tutorial zur Installation des Nginx-RTMP-Streaming-Servers unter Ubuntu 14

>>:  Zeichnen Sie den gesamten Prozess der MySQL-Master-Slave-Konfiguration basierend auf Linux auf

Artikel empfehlen

Implementierungsbeispiel für den Bildupload mit Vue+Element+Springboot

Vor kurzem hatte ich zufällig Kontakt mit dem Pro...

Tutorial zum schnellen Bereitstellen von Clickhouse mit Docker-Compose

ClickHouse ist ein spaltenorientiertes Open-Sourc...

Detaillierte Analyse der MySQL MDL-Metadatensperre

Vorwort: Wenn Sie eine SQL-Anweisung in MySQL aus...

Verschachtelte Verwendungsoperation für MySQL-Aggregatfunktionen

Zweck: Verschachtelte Verwendung von MySQL-Aggreg...

Detaillierte Erklärung des JavaScript ES6-Moduls

Inhaltsverzeichnis 0. Was ist ein Modul 1.Modul l...

Beispiele für die Implementierung und Verwendung von geplanten MySQL-Aufgaben

Dieser Artikel veranschaulicht anhand von Beispie...

Beispiel für die Konvertierung von Webpack-Bildern in Base64

URL-Loader herunterladen yarn add -D URL-Lader Mo...

Installationsschritte von MySQL unter Linux

1. Laden Sie die MySQL-Tar-Datei herunter: https:...

Grafisches Tutorial zur Offline-Installation und Konfiguration von MySQL 8.0.2

Die Offline-Installationsmethode von MySQL_8.0.2 ...