微信小程序--一--文件夾及內容解析

js學習

以後堅持一日一更，和大家分享我每天學習的成果及經驗，讓想要學習的小夥伴少走彎路。
1、微信小程序目錄結構
2、.json文件配置

一、微信小程序目錄結構

小程序主體部分三個文件

文件	必需	作用
app.js	是	小程序邏輯
app.json	是	小程序公共配置
app.wxss	否	小程序公共樣式表
utils	是	存放工具的函數，主要就是爲了達到代碼複用的目的
project.config.json	是	微信開發者工具的配置信息
pages	是	存放小程序的所有頁面，每個頁面主要就是由四個文件組成

pages，一個小程序頁面由四個文件組成

文件	必需	作用
js	是	頁面邏輯
wxml	是	頁面結構
wxss	否	頁面配置
json	否	頁面樣式表

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

二、.json文件配置

示例：

{
  /* 有哪一個就可以查看哪一個，哪一個在前面就顯示哪一個 */
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  /* 頁面顯示 */
  "window": {
    /* 頁面向下滑顯示的三個小點樣式 ，刷新*/
    "backgroundTextStyle": "dark",
    /* 導航條的背景顏色 */
    "navigationBarBackgroundColor": "#11eeee",
    /* 標題 */
    "navigationBarTitleText": "YKenan",
    "navigationBarTextStyle": "black",
    /* 頁面向下滑顯示的背景顏色 */
    "backgroundColor": "#11ee11",
    /* 是否顯示頁面向下滑，刷新 */
    "enablePullDownRefresh": true
  },
  "sitemapLocation": "sitemap.json",
  /* 底部顯示 */
  "tabBar": {
    /* 字體顏色 */
    "color": "#888",
    /* 選中的字體顏色 */
    "selectedColor": "#23ed88",
    /* 背景顏色 */
    "backgroundColor": "#44aaaa55",
    /* 顯示位置 */
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        /* 圖標的路徑 */
        "iconPath":"resources/1.png",
        /* 被選中的圖標的路徑 */
        "selectedIconPath":"resources/2.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日誌",
        /* 圖標的路徑 */
        "iconPath": "resources/1.png",
        /* 被選中的圖標的路徑 */
        "selectedIconPath": "resources/2.png"
      }
    ]
  },
  /* 設置超時時間 */
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

pages：存放頁面文件路徑
window：存放頂部導航條的樣式及顯示文字
tabBar：底部欄，最少兩個最多五個，底部導航
基本結構：

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils