微信小程式開發底部導航

微信小程式開發

簡介：

一套軟體的應用架構包括資料層、業務邏輯層、服務層、控制層、展示層、使用者等多個層次。

主設定檔app.json:

主設定檔app.json位於專案主目錄中，用來對目前專案進行全域設定。

程式碼範例如下：

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

上面程式碼中有兩個頁面，這是一個json對象，其中的屬性pages用來定義小程式的頁面，上面程式碼中表示有兩個頁面，一個名為”index”，位於“pages/index”下，另一個名為new​​，位於“page/new”下。

位於pages陣列中的第一項表示小程式的初始頁面，即啟動小程式時將執行顯示的頁面。如果繼續新增頁面可以往pages數組新增即可。

設定狀態：

backgroundColor:用來設定視窗的背景色，與HTML中的顏色設定相同，使用十六進位的rgb方式設定顏色。預設為白色。

backgroundTextStyle:用來設定下拉背景字型、loading圖的樣式，有「dark」、「光」這兩個值。

enablePullDownRefresh:用來設定是否開啟下拉刷新，預設false。

navigationBarBackgroundColor:用來設定導覽列背景顏色。

navigationBarTextStyle:設定導覽列標題顏色。

navigationBarTitleText:設定導覽列標題的文字內容。

配置底部導航：

"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激活的图标"
    }]
  }

tabBar為底部導航，上面的程式碼中有三個底部導航

Color:設定tab未啟動狀態的文字顏色。

selectedColor:設定tab啟動狀態的文字顏色。

borderStyle:設定底部導覽邊框。

backgroundColor:設定底部導航背景顏色。

list:這是一個數，設定底部導航個數，最少2個，最多5個。

text:設定導航文字。

pagePath顯示的頁面,text文本，iconPath未啟動的圖標，selectedIconPath啟動的圖示。

以上是微信小程式開發底部導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！