微信小程序教程入門篇【3】,MINA框架的目錄結(jié)構(gòu)和配置
2017-12-20
導(dǎo)讀：本帖最后由 狂兔科技 于 2016-11-1 18:10 編輯 1. 開篇導(dǎo)言 本節(jié)目標(biāo)：通過 上一節(jié) 的講解，相信大家對(duì)小程序框架MINA有了初步了解。接下來將會(huì)對(duì)其進(jìn)行深入介紹。 目標(biāo)用戶：無編程經(jīng)驗(yàn)...
1. 開篇導(dǎo)言
- 本節(jié)目標(biāo)：通過上一節(jié)的講解，相信大家對(duì)小程序框架MINA有了初步了解。接下來將會(huì)對(duì)其進(jìn)行深入介紹。
- 目標(biāo)用戶：無編程經(jīng)驗(yàn)，但對(duì)微信小程序感興趣的同學(xué)。
- 學(xué)習(xí)目標(biāo)：了解MINA框架的目錄結(jié)構(gòu)和配置。
- 案例分析：helloworld小程序。
- 代碼下載
- 傳送門：
上一篇：微信小程序教程-入門篇【2】
下一篇：微信小程序教程-入門篇【4】
- 備注：有編程經(jīng)驗(yàn)或看過微信官網(wǎng)簡(jiǎn)易教程的同學(xué)，請(qǐng)酌情略過該章節(jié)。
2. 目錄結(jié)構(gòu)概述
如上圖所示，MINA框架的文件結(jié)構(gòu)分為兩部分。其中，綠色為業(yè)務(wù)邏輯部分，藍(lán)色為程序主體部分，即app部分。
- 業(yè)務(wù)邏輯部分
對(duì)于不同的項(xiàng)目，根據(jù)其具體的業(yè)務(wù)邏輯表現(xiàn)，文件有不同的組織方式，但基本元素(頁面Page)的結(jié)構(gòu)不變。
在helloworld項(xiàng)目中，如上圖綠色所示為：pages/utils。
pages：該文件夾下存放不同的業(yè)務(wù)邏輯頁面，在這里為index文件夾(主頁面)，logs文件夾(log頁面)。
utils：該文件夾下存放工具類函數(shù)，并通過module.exports導(dǎo)出formatTime來供其他文件調(diào)用。
- 程序主體部分
由三個(gè)文件組成，必須放在項(xiàng)目的根目錄，如下圖：
(該圖來源于官網(wǎng))
3. 配置文件-app.json
- 名詞解釋
app.json是微信小程序的全局配置文件，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多tab等。本項(xiàng)目app.json如下圖：
該文件為json文件，對(duì)于json文件不熟悉的同學(xué)，請(qǐng)點(diǎn)擊傳送門，去了解下。
- 配置項(xiàng)列表
(該圖片來自于官網(wǎng))
pages：pages接受一個(gè)字符串?dāng)?shù)組，來指定小程序由哪些頁面組成。每一項(xiàng)代表對(duì)應(yīng)頁面的【路徑+文件名】信息，數(shù)組的第一項(xiàng)代表小程序的初始頁面。
小程序中新增/減少頁面，都需要對(duì)pages數(shù)組進(jìn)行修改。pages中的路徑為相對(duì)路徑。文件名不需要寫文件后綴，因?yàn)镸INA會(huì)自動(dòng)去尋找路徑.json,.js,.wxml,.wxss的四個(gè)文件進(jìn)行整合。
本項(xiàng)目pages代碼如下：
- "pages":[
- "pages/index/index",
- "pages/logs/logs"
- ],
window：用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。具體配置項(xiàng)如下：
(該圖來源于官網(wǎng))
注：HexColor（十六進(jìn)制顏色值），如"#000000"，黑色。"#ffffff"，白色。
本項(xiàng)目window代碼如下：
- "window":{
- "backgroundTextStyle":"light",
- "backgroundColor":"#000000",
- "navigationBarBackgroundColor": "#ffffff",
- "navigationBarTitleText": "WeChat",
- "navigationBarTextStyle":"black"
- }
backgroundTextStyle：背景文本樣式為【light】。
backgroundColor：背景顏色為【白色】。當(dāng)切換兩個(gè)page的時(shí)候，顯示背景色。比如：點(diǎn)擊page1上按鈕，page1消失，出現(xiàn)背景色【白色】，page2出現(xiàn)。
navigationBarBackgroundColor：導(dǎo)航欄背景顏色為【黑色】。
navigationBarTitleText：導(dǎo)航欄標(biāo)題文本為【W(wǎng)eChat】。
navigationBarTextStyle：導(dǎo)航欄文本樣式為【black】。
4. 配置文件-app.wxss
- 名詞解釋
WXSS(WeiXin Style Sheets)是MINA設(shè)計(jì)的一套樣式語言，用于描述WXML的組件樣式，也用來決定WXML的組件的顯示方式。
從定位上講WXSS相當(dāng)于css，對(duì)于css不了解的同學(xué)，請(qǐng)點(diǎn)擊傳送門，去了解一下。
本項(xiàng)目app.wxss代碼如下：
- /**app.wxss**/
- /** height: 100% 相對(duì)父高度100% **/
- /** display: flex 多欄多列布局或彈性布局 **/
- /** flex-direction: column flex子項(xiàng)將垂直顯示，正如一個(gè)列一樣。**/
- /** align-items: center flex子項(xiàng)位于容器的中心**/
- /** justify-content: space-between flex子項(xiàng)目位于各行之間留有空白的容器內(nèi)。**/
- /** padding: 200rpx 0 上內(nèi)邊距為200rpxrpx 右內(nèi)邊距為0rpx **/
- /** box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。**/
- /** border-box 為元素設(shè)定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何
- 內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過從已設(shè)定的寬度
- 和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。**/
- .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(小程序公共樣式表)中，所以其可以在多個(gè)pages中被調(diào)用。在本項(xiàng)目中，我們?cè)趇ndex.wxml/logs.wxml中使用。如下圖：
- 尺寸單位
rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。
如在iPhone6上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
(該圖來源于官網(wǎng))
- 選擇器
(該圖來源于官網(wǎng))
5. 小結(jié)
知識(shí)點(diǎn)：了解MINA框架的目錄結(jié)構(gòu)和配置(app.json,app.wxss)。其中app.json：pages和window。app.wxss：類選擇器及尺寸單位rpx。
6. 預(yù)告
下一節(jié)繼續(xù)了解MINA框架的視圖層(View)，邏輯層(App Service)，及其之間的交互關(guān)系。
第二部分：如何開通一個(gè)小商店
掃碼免費(fèi)領(lǐng)取運(yùn)營(yíng)資料包
