根據上一文，已建立QuickStart 專案，該專案系本人畢設部分內容，所以記錄以便以後查閱

開發小程式就必須瞭解小程式專案目錄結構和檔案作用，接下來就根據我現在自學得到的知識把這些記錄下來。

一、目錄介紹

首先這是該專案目錄 

小程式包含一個描述整體程式的app和對個描述各自頁面的page，小程式的主體部分由三個檔案組成----app.js、app.json、app.wxss，他們的作用如下

一個小程式頁面由四個檔案組成---js、wxml、wxss、json

 二、配置介紹

全域性配置

小程式根目錄下的 app.json 檔案用來對微信小程式進行全域性配置，決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等。

這是Quickstrat自動生成的app.json

{
  "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,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

Pages

用於指定小程式由哪些頁面組成，每一項都對應一個頁面的 路徑+檔名 資訊。檔名不需要寫檔案字尾，框架會自動去尋找對於位置的 .json, .js, .wxml, .wxss 四個檔案進行處理。

陣列的第一項代表小程式的初始頁面（首頁）。小程式中新增/減少頁面，都需要對 pages 陣列進行修改。

window

用於設定小程式的狀態列、導航條、標題、視窗背景色。

舉個例子如app.json

{

  "window":{

    
 
"navigationBarBackgroundColor": "#ffffff",

    "navigationBarTextStyle": "black",

    "navigationBarTitleText": "微信介面功能演示",

    "backgroundColor": "#eeeeee",

    "backgroundTextStyle": "light"

  }

}

tabBar

如果小程式是一個多 tab 應用（客戶端視窗的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

tab 按陣列的順序排序，每個項都是一個物件，其屬性值如下：

頁面配置

每一個小程式頁面也可以使用.json檔案來對本頁面的視窗表現進行配置。

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

工具配置

專案配置檔案

可以在專案根目錄使用 project.config.json 檔案對專案進行配置。

packOptions

packOptions 用以配置專案在打包過程中的選項。打包是預覽、上傳時對專案進行的必須步驟。

目前可以指定 packOptions.ignore 欄位，用以配置打包時對符合指定規則的檔案或資料夾進行忽略，以跳過打包的過程，這些檔案或資料夾將不會出現在預覽或上傳的結果內。

示例配置如下

{
  "packOptions": {
    "ignore": [{
      "type": "file",
      "value": "test/test.js"
    }, {
      "type": "folder",
      "value": "test"
    }, {
      "type": "suffix",
      "value": ".webp"
    }, {
      "type": "prefix",
      "value": "test-"
    }, {
      "type": "glob",
      "value": "test/**/*.js"
    }, {
      "type": "regexp",
      "value": "\\.jsx$"
    }]
  }
}

Utils

utils是放通用工具類方法的一個資料夾，可以看做一個工具的封裝，將一些公共的程式碼抽離成為一個單獨的 js (utils.js)檔案，作為一個模組; 模組只有通過 module.exports 或者 exports 才能對外暴露介面。 所以當你在util.js裡封裝的方法想要在外部使用的話,必須通過 module.exports 或者 exports 對外暴露

例如：

module.exports = {
  formatTime: formatTime,
  '對外方法名':'本地方法名'
}

如何在需要使用這些模組的檔案中使用:使用 require(path) 將公共程式碼引入

//util.js
function sayHello(name) {
    console.log(`Hello ${name} !`)
}
module.exports = {
    sayHello: sayHello
}