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

Designtheorie: Zehn Tipps zur Inhaltspräsentation

<br /> Der Entwurf einer persönlichen Schrei...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.11 Zip

1. Laden Sie das MySQL 5.7.11 Zip-Installationspa...

VUE implementiert eine Timeline-Wiedergabekomponente

In diesem Artikelbeispiel wird der spezifische Co...

Diagramm der Installationszusammenfassung für MySQL 8.0.11

Installationsumgebung: CAT /etc/os-release Zeigt ...

Docker-Volumes-Dateizuordnungsmethode

Hintergrund Wenn Sie am Blockchain-Protokollmodul...

So ändern Sie die CentOS-Serverzeit auf die Peking-Zeit

1. Ich habe ein VPS- und CentOS-System gekauft un...

Korrekte Änderungsschritte für das Standardnetzwerksegment von Docker

Hintergrund Ein Kollege arbeitet an seinem Sicher...

Detaillierte Erklärung der gemischten Vererbung in Vue

Inhaltsverzeichnis Die Auswirkungen der gemischte...

js implementiert zufälligen Namensaufruf

In diesem Artikel wird der spezifische Code von j...

Webdesigner sollten Webseiten unter drei Aspekten optimieren

<br />Mit der zunehmenden Bandbreite werden ...