Beispiel für das WeChat Mini-Programm: Implementierungsmethode zum Anpassen der Navigationsleiste

Der Inhalt dieses Artikels befasst sich mit dem WeChat-Applet-Beispiel: Die Implementierungsmethode der benutzerdefinierten Navigationsleiste. Es hat einen gewissen Referenzwert. Ich hoffe, es wird für Sie hilfreich sein.

Im WeChat-Applet können Farbe und Kopie der Navigationsleiste im Fenster in app.json oder auf einer einzelnen Seite festgelegt werden, wenn diese sich in der JSON-Datei einer bestimmten Seite befindet Für die Konfiguration im Inneren müssen Sie das Fenster entfernen. Konfigurieren Sie es beispielsweise in app.json:

{
    "window":{
       "backgroundTextStyle":"light",
       "navigationBarBackgroundColor": "#fff",
       "navigationBarTitleText": "WeChat",
       "navigationBarTextStyle":"black",
       "navigationStyle": "custom"
     } }

In der JSON-Dateikonfiguration einer bestimmten Seite:

{
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#405f80",
  "navigationBarTitleText": "文与字",
  "navigationBarTextStyle": "white"}

Für Details bitte Weitere Informationen finden Sie in der offiziellen Dokumentation: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

Aber manchmal ist die vom Unternehmen benötigte Navigationsleiste etwas ganz Besonderes und die Navigationsleiste Die vom Mini-Programm bereitgestellten Anforderungen können in diesem Fall nur angepasst werden.

Lassen Sie uns zunächst über die Schritte zum Anpassen der Navigationsleiste sprechen:

• Fügen Sie das Attribut „navigationStyle“: „custom“ zum Fenster in app.json hinzu (das Standardattribut ist „navigationStyle“: „default“), dann verschwindet die Standardnavigationsleiste des Miniprogramms, wie in der Abbildung gezeigt:
  

• Dann folgen Sie Ihrer eigenen. Sie müssen jeder Seite Ihre eigene Navigationsleiste hinzufügen

Hinweis: navigationStyle wird nur in app.json wirksam. Nachdem „Benutzerdefiniert“ aktiviert wurde, müssen Clients niedrigerer Versionen kompatibel sein. Die Basisbibliotheksversion des Entwicklertools wird auf 1.7.0 umgestellt (bedeutet nicht die niedrigste Version, nur zum Debuggen), wodurch problemlos auf die alte Vision umgestellt werden kann
Das heißt, dieses Attribut Kann nur in app.json konfiguriert werden. Wenn Sie die Navigationsleiste auf einer einzelnen Seite anpassen möchten, ist dies nicht möglich. Ich persönlich denke, dass dies etwas schwierig ist Das Programm wird in Zukunft optimiert.

Verwandte Empfehlungen:

Miniprogramm-Beispiel: Implementierungscode für Miniprogramm-Paging-Ladedaten

Beispiel für ein WeChat-Miniprogramm: Implementierung des Click-Event- und Long-Press-Event-Codes

So löschen Sie die Standardstile von Schaltflächen und Bildlaufleisten in Miniprogrammen (Code)

Das obige ist der detaillierte Inhalt vonBeispiel für das WeChat Mini-Programm: Implementierungsmethode zum Anpassen der Navigationsleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!