在上一篇文章微信小程式實戰開發（一）：微信小程式簡介中我們已經了解小程式的功能，開發工具以及如何去創建已經小程式專案。今天我們就以firstdemo為例，介紹小程式的基本目錄結構。
當我們打開一個微信小程式專案後，點擊進入「編輯」選單，我們可以看到有以下5個文件/資料夾）：pages資料夾，utils資料夾，全域檔案app.js文件，全域文件app.json文件，圖片編輯文件工具app.wxss檔。
小程式目錄結構的整體結構如下：
#我們詳細介紹下小程式目錄中每個檔案和資料夾的功能，以及注意事項。
1.pages目錄介紹
#pages:主要存放小程式的頁面文件，其中每個資料夾為一個頁面，每個頁麵包含四個檔案：
index. js
.js是小程式的邏輯文件，也稱為事件互動文件和腳本文件，用於處理介面的點擊事件等功能，像設定初始數據，定義事件，資料的交互，邏輯的運算，變數的聲明，數組，對象，函數，註解的方式等，其語法與javascript相同。我們可以打開仔細查看index.js裡面的程式碼。
首先，我們可以在data裡面，motto是顯示hello word,改變成hello微信小程式。如下圖所示：
其次，我們來看看bindViewTap: function()的功能，是點擊跳到日誌頁面。我們可以點擊頭像看一下示範效果，如下圖：
#最後，我們看一下onLoad函數，是設定頁面啟動時的動作。我們可以修改頁面啟動時顯示頁面，也可以新增函數，如下圖所示：
#常用的用.js函數如下圖：
Page({
-
# data:{
- ## // text:"這是一個頁面"
- # },
- # onLoad:function(options){
- // 頁面初始化options為頁面跳躍所帶來的參數
- console.log('App onLoad')
- },
- onReady:function(){
- // 頁面渲染完成
console.log('App onReady')
},
# onShow:function(){
// 頁面顯示
console.log('App onShow')
},
# onHide:function(){
// 頁面隱藏
console.log('App onHide')
-
},
onUnload:function(){# // 頁面關閉
# console.log('App onUnload')# }
})
複製程式碼
index.json
- .json後綴的文件是設定文件，主要是json資料格式存放，用於設定程式的設定效果。
我們可以在index目錄下建立.json為設定文件，如下所示：
index.json此設定檔只能配置本級目錄下的頁面配置文件，並且只能對導航列的相關文件進行配置修改，如用於修改導航欄顯示樣式，如導航的文字，背景顏色，文字顏色等。其語法跟json語法相同。我們舉例修改一下導覽列的背景顏色為紅色，如下圖所示：
#我們可以看到背景顏色變成的紅色。 。 (這顏色真是慘不忍睹啊！)
index.wxml
-
.wxml檔是介面文件，
是頁面結構文件，用於建立頁面，在頁面上增加控制項。全名是weixin markup lanuage的縮寫，微信標記語言。跟其他一般標記語言一樣，標籤成對， 標籤名小寫。可以透過引用class來控制外觀，也可以透過綁定事件來進行邏輯的處理，透過渲染來完成我們需要的清單等。是連接使用者操作和後端邏輯的紐帶橋樑。我們在頁面的看到的元素，都可以在這裡編輯。例如，我們在頁面上放一個按鈕，如下圖所示：
-
#在.wxml中如何對不需要的程式碼進行註解呢？如下：
-
#
-
-
{{userInfo.nickName}}000# ###### ############### {{motto}}################ ########################################################## ##### ################ ##############################複製程式碼#########注意：#######1 . 在微信小程式裡面這些特定的標記叫做元件。 ##################index.wxss#############.wxss是樣式表文件，類似於前端中的css，是為.wxml文件和page文件進行 美化的文件，讓介面顯示的更美觀。例如文字的大小，顏色，圖片的寬高，設定個.wxml中個元件的位置，間距等。
注意：
## 1.小程式每個頁面必須有.wxml和.js文件，其他兩種類型的文件可以不需要2.文件名稱必須與頁面的資料夾名稱相同，如index資料夾，檔案只能是index.wxml、index.wxss、index.js和index.json.
1.2 utils
#該文件件主要用於存放全域的一些.js文件，公共用到的一些事件處理程式碼檔案可以放到該資料夾下，用於全域呼叫。例如，公用的方法：對時間的處理等。
-
#module.exports = {
# formatTime: formatTime #} ##複製程式碼
#對於允許外部呼叫的方法，用module.exports進行聲明，才能在其他js檔案中用程式碼引入
##var util = require('../../utils/util.js')##複製程式碼 然後就可以呼叫該方法
。
範例：我們直接定義一個utils函數，如下圖所示：
-
function util(){
#module.exports.util = util 複製程式碼
然後在index.js檔案中呼叫這個util函數，如下所示：
#var common = require('../../utils/util.js')
複製程式碼我們可以儲存後，在後台可以看到，我們定義的util內容被呼叫了，如下所示：
#1.3 app.js、app.json、app.wxss##app.js : 系統的方法處理全域文件，也就是說文件中規定的函數和數據，在整個小程式中，每一個框架頁面和文件都可以使用this取得。每個小程式都會有一個app.js文件，有且只有一個，位於專案的根目錄！ app.js的作用就是告訴小程序，註冊一個小程序實例使用app（object）的形式註冊，實現小程序在不同階段的需要實現的事件功能，如onLoad，onshow等，全局的on事件只有如下三個，要比頁面的on事件少。 主要處理程序的宣告週期的一些方法；例如：程式剛開始執行時間事件處理等.
app.js 裡麵包含一個app() 方法，裡面提供對應事件定義，如下
-
App({################ onLaunch: function () {######
console.log('App Launch')
# },
- onShow: function () {
- console.log('App Show')
- },
onHide: function () { console.log('App Hide') 
# }})
#複製程式碼
App( )
函數用來註冊一個小程式。接受一個 object 參數，其指定小程式的生命週期函數等。
app.json
: 系統全域設定文件，是必須包含的。包含設定頁面路徑，設定底部，網絡，調試模式，設定導航頭的顏色，字體大小，下面有沒有tabbar等功能，具體頁面的配置在頁面的json文件中單獨修改，任何一個頁面都需要在app. json中註冊，如果不在json中添加，頁面是無法打開的。
# "pages":[
"pages/index/index",# "pages/logs/logs"## ],
複製程式碼
#（
##在框架中的json優先權高於全域的json優先權。 .wxss : 全域的介面美化程式碼，並不是必須的。其優先權同樣沒有框架中的wxss的優先權高。
範例：在index.wxss中有頭像的外邊距設定
-
##.usermotto {
# margin-top: 200px;
}
複製程式碼
在app.wxss中也定義一個全域的頭像外邊距設定400px，我們看看到底哪一個被執行了。
.usermotto {
margin-top: 400px ;
}
複製程式碼在執行重啟的過程中，我們可以看到全域的參數被index .wxss裡面的覆蓋了。
微信小程式的圖片新增和處理
| 微信小程式中新增圖片是非常麻煩的，只能透過打開項目資料夾，把圖片放到目錄下方即可。在程式碼中引用圖片的相對路徑或絕對路徑就可以了。目前小程式開發僅支援png和jpg格式，其他格式的圖片無法開啟。 
