微信小程式第二篇，文件結構解讀

1.我們先來看一個新的專案搭建成功後是這樣的

app.js

小程式邏輯包含裡小程式的onlaunch,onshow,onHide事件

app.json

小程式公共設定，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
}

app.json 配置項列表

屬性	型別	必填	描述
pages	String Array	是	頁面路徑列表
window	Object	否	全域性的預設視窗表現
tabBar	Object	否	底部 `tab` 欄的表現
networkTimeout	Object	否	網路超時時間
debug	Boolean	否	是否開啟 debug 模式，預設關閉
functionalPages	Boolean	否	是否啟用外掛功能頁，預設關閉
subPackages	Object Array	否	分包結構配置
workers	String	否	`Worker` 程式碼放置的目錄

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

app.wxss 小程式公共樣式表，一般會放些公共的樣式

2.再看pages/index資料夾。

在與logs資料夾對比

發現2個資料夾都是由4個檔案組成，js,json,wxml,wxss,其中wxml相當於html，wxss相當於css（wxss的樣式會覆蓋app.wxss的樣式）。

3.開啟index.js,ctrl+A清空程式碼，輸入page點選回車，你就會發現這個頁面定義了一些生命週期函式

微信小程式第二篇，文件結構解讀

window

相關文章