Exemple de programme WeChat Mini : méthode de mise en œuvre de personnalisation de la barre de navigation

Le contenu de cet article concerne l'exemple d'applet WeChat : la méthode d'implémentation de la barre de navigation personnalisée. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans l'applet WeChat, la couleur et la copie de la barre de navigation peuvent être définies dans la fenêtre dans app.json, ou dans une seule page, si elle se trouve dans le fichier json d'une certaine page Pour la configuration à l'intérieur, vous devez supprimer la fenêtre. Par exemple, dans la configuration app.json :

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

Dans la configuration du fichier json d'une certaine page :

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

Pour plus de détails. , merci de vous référer à la documentation officielle : https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

Mais parfois la barre de navigation exigée par l'entreprise est assez particulière, et la La barre de navigation fournie par le mini programme ne peut pas répondre aux besoins. Pour le moment, seule elle peut être personnalisée

Permettez-moi d'abord de parler des étapes pour personnaliser la barre de navigation :

• .

  Ajoutez l'attribut "navigationStyle": "custom" à la fenêtre dans app.json (l'attribut par défaut est "navigationStyle": "default"), puis la barre de navigation par défaut du mini programme disparaîtra, comme le montre la figure :
  

• Ensuite, ajoutez simplement votre propre barre de navigation à chaque page en fonction de vos propres besoins

. Remarque : navigationStyle ne prend effet que dans app.json. Une fois la personnalisation activée, les clients de version inférieure doivent être compatibles. La version de base de la bibliothèque de l'outil de développement passe à la 1.7.0 (ne signifie pas la version la plus basse, uniquement pour le débogage), ce qui permet de passer facilement à l'ancienne vision
C'est-à-dire cet attribut. ne peut être configuré que dans app.json , si vous souhaitez personnaliser la barre de navigation sur une seule page, ce n'est pas possible. Vous devez personnaliser la barre de navigation pour toutes les pages. Personnellement, je pense que c'est un peu délicat. Le programme sera optimisé à l'avenir.

Recommandations associées :

Exemple de mini-programme : code de mise en œuvre du chargement des données de pagination du mini-programme

Exemple de mini-programme WeChat : implémentation du code d'événement de clic et d'appui long

Comment effacer les styles par défaut des boutons et des barres de défilement dans les mini-programmes (code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!