1. 開篇導言

• 本節目標：通過上一節的講解，相信大家對小程序框架MINA有了初步了解。接下來將會對其進行深入介紹。
• 目標用戶：無編程經驗，但對微信小程序感興趣的同學。
• 學習目標：了解MINA框架的目錄結構和配置。
• 案例分析：helloworld小程序。
• 代碼下載
• 傳送門：

目錄：微信小程序教程-開篇導言-很快微信小程序社區
上一篇：【helloworld】-微信小程序教程-入門篇【2】-很快微信小程序社區
下一篇：【helloworld】-微信小程序教程-入門篇【4】-很快微信小程序社區。

• 備註：有編程經驗或看過微信官網簡易教程的同學，請酌情略過該章節。

2. 目錄結構概述

• 業務邏輯部分

對於不同的項目，根據其具體的業務邏輯表現，文件有不同的組織方式，但基本元素(頁面Page)的結構不變。
在helloworld項目中，如上圖綠色所示為：pages/utils。
pages：該文件夾下存放不同的業務邏輯頁面，在這裏為index文件夾(主頁面)，logs文件夾(log頁面)。
utils：該文件夾下存放工具類函數，並通過module.exports導出formatTime來供其他文件調用。

• 程序主體部分

由三個文件組成，必須放在項目的根目錄，如下圖：

• 名詞解釋

app.json是微信小程序的全局配置文件，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多tab等。本項目app.json如下圖：

該文件為json文件，對於json文件不熟悉的同學，請點擊傳送門，去了解下。

• 配置項列表

(該圖片來自於官網)

pages：pages接受一個字符串數組，來指定小程序由哪些頁面組成。每一項代表對應頁面的【路徑+文件名】信息，數組的第一項代表小程序的初始頁面。
小程序中新增/減少頁面，都需要對pages數組進行修改。pages中的路徑為相對路徑。文件名不需要寫文件後綴，因為MINA會自動去尋找路徑.json,.js,.wxml,.wxss的四個文件進行整合。
本項目pages代碼如下：

"pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

window：用於設置小程序的狀態欄、導航條、標題、窗口背景色。具體配置項如下：

(該圖來源於官網)
註：HexColor（十六進制顏色值），如"#000000"，黑色。"#ffffff"，白色。

本項目window代碼如下：

"window":{
    "backgroundTextStyle":"light",
    "backgroundColor":"#000000",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }

backgroundTextStyle：背景文本樣式為【light】。
backgroundColor：背景顏色為【白色】。當切換兩個page的時候，顯示背景色。比如：點擊page1上按鈕，page1消失，出現背景色【白色】，page2出現。
navigationBarBackgroundColor：導航欄背景顏色為【黑色】。
navigationBarTitleText：導航欄標題文本為【WeChat】。
navigationBarTextStyle：導航欄文本樣式為【black】。

4. 配置文件-app.wxss

• 名詞解釋

WXSS(WeiXin Style Sheets)是MINA設計的一套樣式語言，用於描述WXML的組件樣式，也用來決定WXML的組件的顯示方式。
從定位上講WXSS相當於css，對於css不了解的同學，請點擊傳送門，去了解一下。

本項目app.wxss代碼如下：

/**app.wxss**/
/** height: 100%   相對父高度100% **/
/** display: flex  多欄多列布局或彈性布局 **/
/** flex-direction: column  flex子項將垂直顯示，正如一個列一樣。**/
/** align-items: center     flex子項位於容器的中心**/
/** justify-content: space-between  flex子項目位於各行之間留有空白的容器內。**/
/** padding: 200rpx 0 上內邊距為200rpxrpx 右內邊距為0rpx **/
/** box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。**/
/** border-box 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何
               內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度
               和高度分別減去邊框和內邊距才能得到內容的寬度和高度。**/
.container {
  height: 100%;  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

由於.container(類選擇器)在文件app.wxss(小程序公共樣式表)中，所以其可以在多個pages中被調用。在本項目中，我們在index.wxml/logs.wxml中使用。如下圖：

• 尺寸單位

rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。
如在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

(該圖來源於官網)

• 選擇器

(該圖來源於官網)

5. 小結
知識點：了解MINA框架的目錄結構和配置(app.json,app.wxss)。其中app.json：pages和window。app.wxss：類選擇器及尺寸單位rpx。

6. 預告
下一節繼續了解MINA框架的視圖層(View)，邏輯層(App Service)，及其之間的交互關系。

【helloworld】-微信小程序開發教程-入門篇【3】