Wie bearbeite ich den Inhalt der Miniprogrammseite?

So bearbeiten Sie den Inhalt der Miniprogrammseite: Klicken Sie zunächst mit der rechten Maustaste auf die Seiten im Bearbeitungsbereich, wählen Sie „Neues Verzeichnis“, um einen Ordner zu erstellen, und wählen Sie „Neue Komponente“ aus Dateiname; schließlich die Datei [app. json] öffnen und die Navigationsleiste bearbeiten.

So bearbeiten Sie den Inhalt der Miniprogrammseite:

1. Sie müssen überlegen, wie viele große Seiten Ihre Homepage haben wird. Hier verwenden wir meine kleine Demo als Beispielreferenz. Meine Homepage ist in drei große Seiten unterteilt, also werde ich zwei weitere Seiten erstellen Nachdem das Projekt erfolgreich war, gibt es eine Indexschnittstelle, insgesamt drei Schnittstellen

(PS (Vorgangsprozess): Klicken Sie mit der rechten Maustaste auf die Seiten und wählen Sie „Neues Verzeichnis“, um einen Ordner zu erstellen. Klicken Sie dann mit der rechten Maustaste auf den Ordner und wählen Sie „Neue Komponente“ und geben Sie den Dateinamen ein. Natürlich gibt es hier vier Dateien: js, json, wxml, wxss. Zusätzlich zu dieser direkten Erstellung können Sie die Dateien auch manuell erstellen um eins. In der js-Datei gibt es jedoch const app = getApp(); und page({}, andernfalls wird ein Fehler gemeldet oder einige Methoden in app.js können nicht aufgerufen werden)

2. An diesem Punkt ist es an der Zeit, die Homepage zu bearbeiten, hier bin ich. Die Homepage hat eine untere Navigationsleiste, also schauen Sie nach unten:

Öffnen Sie die Datei app.json (PS: Ich schlage vor Für Anfänger wie mich ist es besser, die offizielle Einführung in die Codestruktur des Miniprogramms zu lesen:

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

Nach dem Öffnen können Sie mit der Bearbeitung der Navigationsleiste beginnen:

(Hinweis: Denken Sie daran, alle folgenden Kommentare zu löschen, wenn Sie es verwenden. Sie können nicht in app.json verwendet werden. Es gibt Kommentare, andernfalls wird ein Fehler gemeldet. Meine Kommentare dienen nur dazu, dass jeder sie besser versteht. Der Grund (denn der Fehler ist ziemlich überraschend.)

{
  "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"
      }
    ]
  }
}

Verwandte Lernempfehlungen:WeChat Mini Program Development Tutorial

Das obige ist der detaillierte Inhalt vonWie bearbeite ich den Inhalt der Miniprogrammseite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!