Heim > WeChat-Applet > Mini-Programmentwicklung > WeChat Mini-Programmentwicklung, untere Navigation

WeChat Mini-Programmentwicklung, untere Navigation

**
Freigeben: 2022-03-22 17:25:23
Original
4228 Leute haben es durchsucht

WeChat Mini-Programmentwicklung

Einführung:

Die Anwendungsarchitektur einer Reihe von Software umfasst mehrere Schichten wie Datenschicht, Geschäftslogikschicht, Serviceschicht, Steuerungsschicht, Anzeigeschicht und Benutzer.

Hauptkonfigurationsdatei app.json:

Die Hauptkonfigurationsdatei app.json befindet sich im Hauptverzeichnis des Projekts und dient der globalen Konfiguration des aktuellen Projekts.

Das Codebeispiel lautet wie folgt:

{
  "pages": [
    "pages/index/index",
    "pages/new/new",
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "我的第一个小程序",
    "navigationBarTextStyle": "black"
  }
}
Nach dem Login kopieren

Der obige Code enthält zwei Seiten. Das Attribut „Seiten“ wird verwendet, um die Seite des Miniprogramms zu definieren , eine mit dem Namen „index“ unter „pages/index“ und die andere mit dem Namen „new“ unter „page/new“.

Das erste Element im Seitenarray stellt die erste Seite des Miniprogramms dar, also die Seite, die ausgeführt und angezeigt wird, wenn das Miniprogramm gestartet wird. Wenn Sie weiterhin Seiten hinzufügen, können Sie diese dem Seitenarray hinzufügen.

Konfigurationsstatus:

Hintergrundfarbe: Wird zum Festlegen der Hintergrundfarbe des Fensters verwendet, die mit der Farbeinstellung in HTML übereinstimmt. Verwenden Sie hexadezimales RGB, um die Farbe festzulegen. Die Standardeinstellung ist Weiß.

backgroundTextStyle: wird verwendet, um die Dropdown-Hintergrundschriftart und den Ladebildstil festzulegen, mit zwei Werten: „dunkel“ und „hell“.

enablePullDownRefresh: Wird verwendet, um festzulegen, ob die Pulldown-Aktualisierung aktiviert werden soll. Der Standardwert ist „false“.

navigationBarBackgroundColor: Wird verwendet, um die Hintergrundfarbe der Navigationsleiste festzulegen.

navigationBarTextStyle: Legen Sie die Titelfarbe der Navigationsleiste fest.

navigationBarTitleText: Legen Sie den Textinhalt des Navigationsleistentitels fest.

Untere Navigation konfigurieren:

"tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/icon_HOME.png",
      "selectedIconPath": "images/icon_HOMEED.png",
      "lang":"pagePath显示的页面,text文本,iconPath未激活的图标,selectedIconPath激活的图标"
    }, 
    {
      "pagePath": "pages/new/new",
      "text": "广场",
      "iconPath": "images/icon_GUANGCHANG.png",
      "selectedIconPath": "images/icon_GUANGCHANGED.png",
      "lang":"pagePath显示的页面,text文本,iconPath未激活的图标,selectedIconPath激活的图标"
    },
    {
      "pagePath": "pages/userConsole/userConsole",
      "text": "设置",
      "iconPath": "images/icon_SET.png",
      "selectedIconPath": "images/icon_SETED.png",
      "lang":"pagePath显示的页面,text文本,iconPath未激活的图标,selectedIconPath激活的图标"
    }]
  }
Nach dem Login kopieren

tabBar ist die untere Navigation. Im obigen Code gibt es drei untere Navigationen.

Farbe: Legen Sie die Textfarbe des inaktiven Tabs fest.

selectedColor: Legen Sie die Textfarbe des Tab-Aktivierungsstatus fest.

borderStyle: Legen Sie den unteren Navigationsrahmen fest.

Hintergrundfarbe: Legen Sie die Hintergrundfarbe für die untere Navigation fest.

Liste: Dies ist eine Zahl. Legen Sie die Anzahl der unteren Navigation fest, mindestens 2, höchstens 5.

Text: Navigationstext festlegen.

Die Seite wird durch pagePath, text text, iconPath inaktives Symbol, selectedIconPath aktiviertes Symbol angezeigt.

Das obige ist der detaillierte Inhalt vonWeChat Mini-Programmentwicklung, untere Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage