微信小程序基本目錄結構學習

今天咱們就以firstdemo爲例，介紹一下小程序的基本目錄結構。
當咱們打開一個微信小程序項目後，點擊進入「編輯」菜單，咱們能夠看到有如下5個文件/文件夾）：pages文件夾，utils文件夾，全局文件app.js文件，全局文件app.json文件，圖片編輯文件工具app.wxss文件。
<ignore_js_op> 
小程序目錄結構的總體結構以下：
<ignore_js_op> 
<ignore_js_op> 

咱們詳細介紹下小程序目錄中每一個文件和文件夾的功能，以及注意事項。
1.pages目錄介紹

pages:主要存放小程序的頁面文件，其中每一個文件夾爲一個頁面，每一個頁面包含四個文件：

index.js

.js是小程序的邏輯文件，也稱事件交互文件和腳本文件，用於處理界面的點擊事件等功能，像設置初始數據，定義事件，數據的交互，邏輯的運算，變量的聲明，數組，對象，函數，註釋的方式等，其語法與javascript相同。咱們能夠打開仔細查看index.js裏面的代碼。

首先，咱們能夠在data裏面，motto是顯示hello word,改變成hello微信小程序。以下圖所示：

 

其次，咱們看一下bindViewTap: function()的功能，是點擊跳轉到日誌頁面。咱們能夠點擊頭像看一下演示效果，以下圖所示：
<ignore_js_op> 

最後，咱們看一下onLoad函數，是設置頁面啓動時的動做。咱們能夠修改頁面啓動時顯示頁面，也能夠新增函數，以下圖所示：
<ignore_js_op> 
經常使用的用.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.   onShow:function(){
14.     // 頁面顯示
15.     console.log('App onShow')
16.   },
17.   onHide:function(){
18.     // 頁面隱藏
19.     console.log('App onHide')
20.   },
21.   onUnload:function(){
22.     // 頁面關閉
23.     console.log('App onUnload')
24.   } 
25. })

複製代碼

index.json.json後綴的文件是配置文件，主要是json數據格式存放，用於設置程序的配置效果。咱們能夠在index目錄下建立.json爲配置文件，以下所示：
<ignore_js_op> 
index.json該配置文件只能配置本級目錄下的頁面配置文件，而且只能對導航欄的相關文件進行配置修改，如用於修改導航欄顯示樣式，如導航的文字，背景顏色，文字顏色等。其語法跟json語法相同。咱們舉例修改一下導航欄的背景顏色爲紅色，以下圖所示：

<ignore_js_op>

咱們能夠看到背景顏色變成的紅色。。(這顏色真是慘不忍睹啊！)

index.wxml

.wxml文件是界面文件，是頁面結構文件，用於構建頁面，在頁面上增長控件。全稱是weixin markup lanuage的縮寫，微信標記語言。跟其餘通常標記語言同樣，標籤成對， 標籤名小寫。能夠經過引用class來控制外觀，也能夠經過綁定事件來進行邏輯的處理，經過渲染來完成咱們須要的列表等。是鏈接用戶操做和後端邏輯的紐帶橋樑。咱們在頁面的看到的元素，均可以在這裏編輯。例如，咱們在頁面上放一個按鈕，以下圖所示：

<ignore_js_op>

在.wxml中如何對不須要的程序代碼進行註釋呢？以下：

1. <!--index.wxml-->
2. <view class="container">
3.   <view  bindtap="bindViewTap" class="userinfo">
4.     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
5.     <text class="userinfo-nickname">{{userInfo.nickName}}000</text>
6.   </view>
7.   <view class="usermotto">
8.     <text class="user-motto">{{motto}}</text>
9.   </view>
10.   <!--<button type="primary">按鈕</button>-->
11. </view>

複製代碼

注意：

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文件，公共用到的一些事件處理代碼文件能夠放到該文件夾下，用於全局調用。例如，公用的方法：對時間的處理等。

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. }
5. module.exports.util = util

複製代碼

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

1. var common = require('../../utils/util.js')

複製代碼

咱們能夠保存後，在後臺能夠看到，咱們定義的util內容被調用了，以下所示：

<ignore_js_op>

1.3 app.js、app.json、app.wxss

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

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

複製代碼

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

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

1.   "pages":[
2.     "pages/index/index",
3.     "pages/logs/logs"
4.   ],

複製代碼

（框架中的json優先級高於全局的json優先級。）

app.wxss : 全局的界面美化代碼，並非必須的。其優先級一樣沒有框架中的wxss的優先級高。

舉例：在index.wxss中有頭像的外邊距設置

1. .usermotto {
2.   margin-top: 200px;
3. }

複製代碼

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

1. .usermotto {
2.   margin-top: 400px;
3. }

複製代碼

在執行重啓的過程當中，咱們能夠看到全局的參數被index.wxss裏面的覆蓋了。

<ignore_js_op>

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