獲取 .com 執行 this 當我 調試 函數 功能 1.2

當我們打開一個微信小程序項目後，點擊進入“編輯”菜單，我們可以看到有以下5個文件/文件夾）：pages文件夾，utils文件夾，全局文件app.js文件，全局文件app.json文件，圖片編輯文件工具app.wxss文件。

小程序目錄結構的整體結構如下：

小程序包含一個描述整體程序的APP和多個描述各自頁面的page。

文件	必填	作用
app.js	是	小程序邏輯
app.json	是	小程序公共設置
app.wxss	否	小程序公共樣式表

一個小程序頁面由四個文件組成，分別是：

文件類型 必填 作用

js　　　　　　是 頁面邏輯

wxml　　　　 是 頁面結構

wxss 否 頁面樣式表

json　　　　　 否 頁面配置

1.pages目錄介紹

pages:主要存放小程序的頁面文件，其中每個文件夾為一個頁面，每個頁面包含四個文件： 註意： 1.小程序每個頁面必須有.wxml和.js文件，其他兩種類型的文件可以不需要 2.文件名稱必須與頁面的文件夾名稱相同，如index文件夾，文件只能是index.wxml、index.wxss、index.js和index.json. 1.2 utils 該文件件主要用於存放全局的一些.js文件，公共用到的一些事件處理代碼文件可以放到該文件夾下，用於全局調用。例如，公用的方法：對時間的處理等。

1 module.exports = {  
2   formatTime: formatTime  
3 }  
復制代碼
 

對於允許外部調用的方法，用module.exports進行聲明，才能在其他js文件中用一下代碼引入

1 var util = require(‘../../utils/util.js‘)
復制代碼 

然後就可以調用該方法。 舉例：我們直接定義一個utils函數，如下圖所示：

1 function util(){
2   console.log("模塊被調用了！！")
3 }
4 module.exports.util = util
復制代碼

然後在index.js文件中調用這個util函數，如下所示：

 var common = require(‘../../utils/util.js‘)
復制代碼

1.3 app.js、app.json、app.wxss app.js : 系統的方法處理全局文件，也就是說文件中規定的函數和數據，在整個小程序中，每一個框架頁面和文件都可以使用this獲取。每個小程序都會有一個app.js文件，有且只有一個，位於項目的根目錄！app.js的作用就是告訴小程序，註冊一個小程序實例使用app（object）的形式註冊，實現小程序在不同階段的需要實現的事件功能，如onLoad，onshow等，全局的on事件只有如下三個，要比頁面的on事件要少。主要處理程序的聲明周期的一些方法；例如：程序剛開始運行時事件處理等.app.js 裏面包含一個app() 方法，裏面提供對應事件定義，如下

 1 App({
 2   onLaunch: function () {
 3     console.log(‘App Launch‘)
 4   },
 5   onShow: function () {
 6     console.log(‘App Show‘)
 7   },
 8   onHide: function () {
 9     console.log(‘App Hide‘)
10   }
11 })
12 復制代碼

App() 函數用來註冊一個小程序。接受一個 object 參數，其指定小程序的生命周期函數等。

app.json : 系統全局配置文件，是必須包含的。包含設置頁面路徑，設置底部，網絡，調試模式，設置導航頭的顏色，字體大小，下面有沒有tabbar等功能，具體頁面的配置在頁面的json文件中單獨修改，任何一個頁面都需要在app.json中註冊，如果不在json中添加，頁面是無法打開的。

1  "pages":[
2     "pages/index/index",
3     "pages/logs/logs"
4   ],
5 復制代碼

（框架中的json優先級高於全局的json優先級。）
app.wxss : 全局的界面美化代碼，並不是必須的。其優先級同樣沒有框架中的wxss的優先級高。 舉例：在index.wxss中有頭像的外邊距設置

1 .usermotto {
2   margin-top: 200px;
3 }
4 復制代碼

在app.wxss中也定義一個全局的頭像外邊距設置400px，我們看看到底哪一個被執行了。

在執行重啟的過程中，我們可以看到全局的參數被index.wxss裏面的覆蓋了。

微信小程序的圖片添加和處理
微信小程序中添加圖片是非常麻煩的，只能通過打開項目文件夾，把圖片放到目錄下即可。在代碼中引用圖片的相對路徑或者絕對路徑就可以了。目前小程序開發中僅支持png和jpg格式，其他格式的圖片無法打開。

微信小程序的目錄結構