微信小程式實戰開發之小程式基本目錄結構講解

摘要: 在上一篇文章微信小程式實戰開發（一）：微信小程式簡介中我們已經了解小程式的功能，開發工具以及如何去創建已經小程式專案。今天我們就以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函數如下圖：

1. Page({
   

2. #  data:{
   

3. ##    // text:"這是一個頁面"

   
   

4. #  },

   
   

5. # onLoad:function(options){

   
   

6.     // 頁面初始化options為頁面跳躍所帶來的參數

   
   

7.     console.log('App onLoad')

   
   

8.   },

   
   

9.   onReady:function(){

   
   

10.     // 頁面渲染完成

    
    

11.     console.log('App onReady')
    

12.   },
    

13. 
    

14. 
    

15. 
    

16. 
    

17. 
    

18. 
    # onShow:function(){

19. 
        // 頁面顯示

20. 
        console.log('App onShow')

21. 
      },

22. 
    #  onHide:function(){

23. 
        // 頁面隱藏

24. 
        console.log('App onHide')

25.   },

  onUnload:function(){#    // 頁面關閉

#    console.log('App onUnload')#  }

})

複製程式碼

index.json

1. .json後綴的文件是設定文件，主要是json資料格式存放，用於設定程式的設定效果。

   
   

我們可以在index目錄下建立.json為設定文件，如下所示：

2. 
   

3. index.json此設定檔只能配置本級目錄下的頁面配置文件，並且只能對導航列的相關文件進行配置修改，如用於修改導航欄顯示樣式，如導航的文字，背景顏色，文字顏色等。其語法跟json語法相同。我們舉例修改一下導覽列的背景顏色為紅色，如下圖所示：
   

4. 
   #我們可以看到背景顏色變成的紅色。 。 (這顏色真是慘不忍睹啊！)

5. 
   index.wxml

6. 
   

   .wxml檔是介面文件，

7. 是頁面結構文件，用於建立頁面，在頁面上增加控制項。全名是weixin markup lanuage的縮寫，微信標記語言。跟其他一般標記語言一樣，標籤成對， 標籤名小寫。可以透過引用class來控制外觀，也可以透過綁定事件來進行邏輯的處理，透過渲染來完成我們需要的清單等。是連接使用者操作和後端邏輯的紐帶橋樑。我們在頁面的看到的元素，都可以在這裡編輯。例如，我們在頁面上放一個按鈕，如下圖所示：
   

8. 
   

   #在.wxml中如何對不需要的程式碼進行註解呢？如下：

9. 
   

10. 
    

    #

11. 
    

12. 
    

      

   

    {{userInfo.nickName}}000

#  

######  ###############    {{motto}}################  ########################################################## #####  ################ ##############################複製程式碼#########注意：#######1 . 在微信小程式裡面這些特定的標記叫做元件。 ##################index.wxss#############

.wxss是樣式表文件，類似於前端中的css，是為.wxml文件和page文件進行 美化的文件，讓介面顯示的更美觀。例如文字的大小，顏色，圖片的寬高，設定個.wxml中個元件的位置，間距等。

注意：

## 1.小程式每個頁面必須有.w​​xml和.js文件，其他兩種類型的文件可以不需要2.文件名稱必須與頁面的資料夾名稱相同，如index資料夾，檔案只能是index.wxml、index.wxss、index.js和index.json.

1.2 utils

#該文件件主要用於存放全域的一些.js文件，公共用到的一些事件處理程式碼檔案可以放到該資料夾下，用於全域呼叫。例如，公用的方法：對時間的處理等。

1. 
   

2. 
   

3. #module.exports = {  

#  formatTime: formatTime  

#}  

##複製程式碼

#對於允許外部呼叫的方法，用module.exports進行聲明，才能在其他js檔案中用程式碼引入

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

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

。

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

1. 
   

2. 
   

function util(){

3. 
   

#  console.log("模組被呼叫了！！")

4. 
   

#}

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

1. 
   

2. 
   

3. 
   

   App({################  onLaunch: function () {######

4.     console.log('App Launch')
   

5. #  },
   

6. 
   

7. 
   

8. 
   

9. 
   

10. onShow: function () {

    
    

11.     console.log('App Show')

    
    

12.   },

  onHide: function () {    console.log('App Hide')

#  }})

#複製程式碼

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

1. 
   

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

3. 
   

#  "pages":[

    "pages/index/index",#    "pages/logs/logs"##  ],

複製程式碼

#（

##在框架中的json優先權高於全域的json優先權。 .wxss : 全域的介面美化程式碼，並不是必須的。其優先權同樣沒有框架中的wxss的優先權高。

範例：在index.wxss中有頭像的外邊距設定

1. 
   

2. ##.usermotto {
   

3. #  margin-top: 200px;

}

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

1. 
   

2. .usermotto {
   

3.   margin-top: 400px ;

}

複製程式碼在執行重啟的過程中，我們可以看到全域的參數被index .wxss裡面的覆蓋了。


微信小程式的圖片新增和處理

################

以上是微信小程式實戰開發之小程式基本目錄結構講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！