微信小程序學習筆記（二）--框架-全局及頁面配置

描述和功能

框架提供了本身的視圖層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在視圖層與邏輯層間提供了數據傳輸和事件系統，讓開發者可以專一於數據與邏輯。

響應的數據綁定

框架的核心是一個響應的數據綁定系統。

整個小程序框架系統分爲兩部分：視圖層（View）和邏輯層（App Service）。

頁面管理

框架 管理了整個小程序的頁面路由，能夠作到頁面間的無縫切換，並給以頁面完整的生命週期。開發者須要作的只是將頁面的數據、方法、生命週期函數註冊到 框架 中，其餘的一切複雜的操做都交由 框架 處理。

基礎組件

框架 提供了一套基礎的組件，這些組件自帶微信風格的樣式以及特殊的邏輯，開發者能夠經過組合基礎組件，建立出強大的微信小程序 。

豐富的 API

框架 提供豐富的微信原生 API，能夠方便的調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。

文件結構 

小程序包含一個描述總體程序的 app 和多個描述各自頁面的 page。

一個小程序主體部分由三個文件組成，必須放在項目的根目錄，以下：

一個小程序頁面由四個文件組成，分別是：

注意：爲了方便開發者減小配置項，描述頁面的四個文件必須具備相同的路徑與文件名。

全局配置

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

app.json 配置項列表

 

試着加了點文件

在app.json中配置了tabBar，以下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/components/user-center/user-center"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#eeeeee",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar":{
    "list":[{
      "pagePath":"pages/index/index",
      "text":"首頁"
    },{
     "pagePath":"pages/components/user-center/user-center",
      "text":"我的中心"
    }]
  },
  "networkTimeout":{
    "request":10000,
    "downloadFile":10000
  },
  "debug":true
}

添加了的頁面要在"Pages"裏面聲明路徑，不然在須要調用的時候會找不到。最後的效果以下：

pages

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

數組的第一項表明小程序的初始頁面（首頁）。小程序中新增/減小頁面，都須要對 pages 數組進行修改。

window

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

 

屬性	類型	默認值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色，如 #000000
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持 black / white
navigationBarTitleText	String		導航欄標題文字內容
navigationStyle	String	default	導航欄樣式，僅支持如下值： default 默認樣式 custom 自定義導航欄，只保留右上角膠囊按鈕	微信版本 6.6.0
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 dark / light
backgroundColorTop	String	#ffffff	頂部窗口的背景色，僅 iOS 支持	微信版本 6.5.16
backgroundColorBottom	String	#ffffff	底部窗口的背景色，僅 iOS 支持	微信版本 6.5.16
enablePullDownRefresh	Boolean	false	是否全局開啓下拉刷新。 詳見 Page.onPullDownRefresh
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位爲px。 詳見 Page.onReachButom

 

注：HexColor（十六進制顏色值），如"#ff00ff"

注：navigationStyle 只在 app.json 中生效。開啓 custom 後，低版本客戶端須要作好兼容。開發者工具基礎庫版本切到 1.7.0（不表明最低版本，只供調試用）可方便切到舊視覺

注：客戶端 6.7.2 版本開始，navigationStyle: custom 對 <web-view> 組件無效

關於window及tabBar、networkTimeout等的配置，參考 全局配置

 

頁面配置

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

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

頁面配置項列表

頁面的.json只能設置 window 相關的配置項，以決定本頁面的窗口表現，因此無需寫 window 這個鍵。