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

愛吃排骨發表於2018-08-07
微信小程式

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點選回車，你就會發現這個頁面定義了一些生命週期函式

 

相關文章