小程序開發學習記錄（二）

 

上一節，我已經給你們介紹了小程序的概念以及安裝小程序編譯器。這節，咱們就來說講小程序的基本結構（主要是從官方文檔總結下來）：

1.全局配置：小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。配置文件示例以下：

{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日誌"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}

更多的具體配置項能夠到官方文檔去了解：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#全局配置

2.pages:用於指定小程序由哪些頁面組成，每一項都對應一個頁面的 路徑+文件名 信息。文件名不須要寫文件後綴，框架會自動去尋找對於位置的 .json, .js, .wxml, .wxss四個文件進行處理。

例如以下的開發目錄：

則須要在 app.json 中寫

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

3.window：用於設置小程序的狀態欄、導航條、標題、窗口背景色。

部分示例屬性（更多屬性請到開發文檔查看）：

配置window以下：

在app.json文件：

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

4.tabBar:若是小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄能夠切換頁面），能夠經過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

其中 list 接受一個數組，只能配置最少 2 個、最多 5 個 tab。tab 按數組的順序排序，每一個項都是一個對象，其屬性值以下：

5.networkTimeout:各種網絡請求的超時時間，單位均爲毫秒。

6.debug:能夠在開發者工具中開啓 debug 模式，在開發者工具的控制檯面板，調試信息以 info 的形式給出，其信息有Page的註冊，頁面路由，數據更新，事件觸發等。能夠幫助開發者快速定位一些常見的問題。

7.頁面配置：

每個小程序頁面也能夠使用.json文件來對本頁面的窗口表現進行配置。

頁面的配置只能設置 app.json 中部分 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

 

 

還有更多相關內容，你們能夠到官方文檔繼續查看~