微信小程序開發---各代碼文件簡介

根據上一文，已建立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

用於設置小程序的狀態欄、導航條、標題、窗口背景色。注意的是windows里的backgroundColor子屬性代表的是下拉當前頁面出現的刷新頁面的窗口的背景顏色，而不是當前頁面的背景顏色

　　　　　　　　　　　　

舉個例子如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
}