微信小程式實戰開發之小程式基本目錄結構講解-小程式開發-PHP中文網

摘要: 在上一篇文章微信小程式實戰開發（一）：微信小程式簡介中我們已經了解小程式的功能，開發工具以及如何去創建已經小程式專案。今天我們就以firstdemo為例，介紹小程式的基本目錄結構。當我們開啟一個微信小程式...

微信小程式中新增圖片是非常麻煩的，只能透過打開項目資料夾，把圖片放到目錄下方即可。在程式碼中引用圖片的相對路徑或絕對路徑就可以了。目前小程式開發僅支援png和jpg格式，其他格式的圖片無法開啟。

在上一篇文章微信小程式實戰開發（一）：微信小程式簡介中我們已經了解小程式的功能，開發工具以及如何去創建已經小程式專案。今天我們就以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此設定檔只能配置本級目錄下的頁面配置文件，並且只能對導航列的相關文件進行配置修改，如用於修改導航欄顯示樣式，如導航的文字，背景顏色，文字顏色等。其語法跟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

#module.exports = {

# formatTime: formatTime

##複製程式碼

##var util = require('../../utils/util.js')

##複製程式碼然後就可以呼叫該方法

。

範例：我們直接定義一個utils函數，如下圖所示：

#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() 方法，裡面提供對應事件定義，如下