微信小程序開發之目錄結構分析（2）

微信小程序開發之目錄結構分析

學習一個框架，首先應該瞭解一下他的目錄結構，小程序的目錄接口以下圖：

從demo中能夠看到主要分爲兩部分

一、系統文件或者公用文件

文件	必填	做用
app.js	是	小程序邏輯，app啓動首先會執行該文件內的部分方法
app.json	是	小程序公共設置，整個app的系統配置
app.wxss	否	小程序公共樣式表，能夠理解爲前端中的base.css

二、頁面文件（page文件夾）

文件類型	必填	做用
js	是	頁面邏輯，能夠理解爲 php或java的controller，主要來處理業務邏輯
wxml	是	頁面結構，能夠理解爲視圖層 html
wxss	否	頁面樣式表，能夠理解爲css文件
json	否	頁面配置，當前頁面配置文件

下面分別來學習每一個文件的具體用法及做用

app.js

小程序啓動先回執行此文件中的方法，此文件爲空，程序也能夠正常執行，但一般不會這麼作，通常用於執行App方法返回app對象。

App({
  onLaunch: function () {
    console.log('onLaunch')
  },
  onShow: function () {
    console.log('onShow')
  },
  onHide: function () {
    console.log('onHide')
  },
  other:function(){
      
  }
})

代碼中的幾個方法，很是相似原生app開發中的生存周期函數，詳細解釋以下：

屬性	類型	描述	觸發時機
onLaunch	Function	生命週期函數--監聽小程序初始化	當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
onShow	Function	生命週期函數--監聽小程序顯示	當小程序啓動，或從後臺進入前臺顯示，會觸發 onShow
onHide	Function	生命週期函數--監聽小程序隱藏	當小程序從前臺進入後臺，會觸發 onHide
其餘	Any	開發者能夠添加任意的函數或數據到 Object 參數中，用 this 能夠訪問

當程序啓動時，首先會執行onLauch函數，啓動成功後會執行onShow,當程序退出活動窗口，會執行onHide函數，程序再次切換到活動窗口會執行onShow。

注意：

App() 必須在 app.js 中註冊，且不能註冊多個。

不要在定義於 App() 內的函數中調用 getApp() ，使用 this 就能夠拿到 app 實例。

不要在 onLaunch 的時候調用 getCurrentPage()，此時 page 尚未生成。

經過 getApp() 獲取實例以後，不要私自調用生命週期函數。

 

app.json

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

配置項表：

屬性	類型	必填	描述
pages	Array	是	設置頁面路徑
window	Object	否	設置默認頁面的窗口表現
tabBar	Object	否	設置底部 tab 的表現
networkTimeout	Object	否	設置網絡超時時間
debug	Boolean	否	設置是否開啓 debug 模式

pages屬性

pages屬性的第一個值爲系統啓動頁面，以下圖配置項，那麼小程序啓動後，會先運行 logs頁面

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

 

window屬性

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

屬性	類型	默認值	描述
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色，如"#000000"
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持 black/white
navigationBarTitleText	String		導航欄標題文字內容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字體、loading 圖的樣式，僅支持 dark/light
enablePullDownRefresh	Boolean	false	是否開啓下拉刷新，詳見頁面相關事件處理函數。

tabBar

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

tabBar 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。

屬性	類型	必填	默認值	描述
color	HexColor	是		tab 上的文字默認顏色
selectedColor	HexColor	是		tab 上的文字選中時的顏色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上邊框的顏色， 僅支持 black/white
list	Array	是		tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab

其中 list 接受一個數組，數組中的每一個項都是一個對象，其屬性值以下：

屬性	類型	必填	說明
pagePath	String	是	頁面路徑，必須在 pages 中先定義
text	String	是	tab 上按鈕文字
iconPath	String	是	圖片路徑，icon 大小限制爲40kb
selectedIconPath	String	是	選中時的圖片路徑，icon 大小限制爲40kb

networkTimeout

能夠設置各類網絡請求的超時時間。

屬性	類型	必填	說明
request	Number	否	wx.request的超時時間，單位毫秒
connectSocket	Number	否	wx.connectSocket的超時時間，單位毫秒
uploadFile	Number	否	wx.uploadFile的超時時間，單位毫秒
downloadFile	Number	否	wx.downloadFile的超時時間，單位毫秒

debug

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

 

歡迎加我微信，交流探討！