微信小程式開發(fā)

簡介：

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

主設(shè)定檔app.json:

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

程式碼範例如下：

{
  "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陣列中的第一項表示小程式的初始頁面，即啟動小程式時將執(zhí)行顯示的頁面。如果繼續(xù)新增頁面可以往pages數(shù)組新增即可。

設(shè)定狀態(tài)：

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

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

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

navigationBarBackgroundColor:用來設(shè)定導覽列背景顏色。

navigationBarTextStyle:設(shè)定導覽列標題顏色。

navigationBarTitleText:設(shè)定導覽列標題的文字內(nèi)容。

配置底部導航：

"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": "設(shè)置",
      "iconPath": "images/icon_SET.png",
      "selectedIconPath": "images/icon_SETED.png",
      "lang":"pagePath顯示的頁面,text文本，iconPath未激活的圖標，selectedIconPath激活的圖標"
    }]
  }

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

Color:設(shè)定tab未啟動狀態(tài)的文字顏色。

selectedColor:設(shè)定tab啟動狀態(tài)的文字顏色。

borderStyle:設(shè)定底部導覽邊框。

backgroundColor:設(shè)定底部導航背景顏色。

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

text:設(shè)定導航文字。

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

以上是微信小程式開發(fā)底部導航的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！