Comment modifier le contenu de la page du mini programme ?

Comment modifier le contenu de la page du mini programme : Tout d'abord, cliquez avec le bouton droit sur les pages dans la zone d'édition, sélectionnez Nouveau répertoire pour créer un dossier ; puis cliquez avec le bouton droit sur le dossier, sélectionnez Nouveau composant et entrez le nom du fichier ; ouvrez enfin le fichier [app. json] et modifiez la barre de navigation.

Comment modifier le contenu de la page du mini programme :

1. , vous devez tenir compte du nombre de grandes pages que comportera votre page d'accueil. Ici, utilisons ma petite démo comme exemple de référence. Ma page d'accueil est divisée en trois grandes pages, je vais donc créer deux pages supplémentaires, dont une. ceux une fois le projet réussi. Il existe une interface d'index, avec un total de trois interfaces

(PS (processus de fonctionnement) : cliquez avec le bouton droit sur les pages et sélectionnez Nouveau répertoire pour créer un dossier, puis cliquez avec le bouton droit sur le et sélectionnez Nouveau composant, puis entrez le nom du fichier. Bien sûr, il y a quatre fichiers dans le nouveau composant ici : js, json, wxml, wxss. En plus de cette création directe, vous pouvez également créer manuellement les fichiers. un par un, mais dans le fichier js il y a const app = getApp(); et page({}), sinon une erreur sera signalée ou certaines méthodes dans app.js ne pourront pas être appelées)

2. À ce stade , il est temps de modifier la page d'accueil, me voici. La page d'accueil a une barre de navigation en bas, alors regardez vers le bas :

Ouvrez le fichier app.json (PS : c'est le cas). recommandé que pour les novices comme moi, il est préférable de lire l'introduction officielle de la structure du code du mini programme. ):

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-配置

Après l'avoir ouvert, vous pouvez commencer à éditer la barre de navigation.

(Remarque : n'oubliez pas de supprimer tous les commentaires ci-dessous lorsque vous l'utilisez. Ils ne peuvent pas être utilisés dans app.json. Il y a des commentaires, sinon une erreur sera signalée. Mes commentaires sont uniquement destinés à la commodité de chacun. Le la raison de l'erreur est assez surprenante. Je ne l'ai découvert qu'après l'avoir essayé plusieurs fois)

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/asset/asset",
    "pages/personal/personal"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black",　　　　"navigationStyle": "custom"　　　　　　// 自定义头部导航时添加
  },
  "sitemapLocation": "sitemap.json",
  "tabBar": {　　//这里的tabBar就是导航栏的编辑了
    "color": "red",　　　　//tab 上的文字默认颜色
    "selectedColor": "#1469bc",　　//tab 上的文字被选中时的颜色
    "backgroundColor": "#fff",　　//背景颜色(背景颜色的值用#的写法来写即16进制，普通rgb、rgba写法不会生效，)
    "positon": "bottom",　　　　　　//导航栏放在的位置，可以不写但默认会显示在底部，我这里是方便大家了解。放在上遍就改成top，至于左右么，我就没试过了，就交给各位大哥大了。
    "list": [
      {
        "pagePath": "pages/index/index",　　　　　　//页面路径
        "text": "首页",　　　　　　　　　　　　　　　　 //导航栏显示的文字
        "iconPath": "images/home1.png",　　　　　　 //默认展示的图片
        "selectedIconPath": "images/home2.png"　　 //被选中时展示的图片(我这里是为了有一个颜色差)
      },
      {
        "pagePath": "pages/asset/asset",
        "text": "资产",
        "iconPath": "images/asset1.png",
        "selectedIconPath": "images/asset2.png"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "我的",
        "iconPath": "images/my1.png",
        "selectedIconPath": "images/my2.png"
      }
    ]
  }
}

Recommandations d'apprentissage associées :Tutoriel de développement de mini-programmes WeChat

.

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!