本文主要介紹微信小程序的框架頁面結(jié)構(gòu)钝满。

小程序目錄結(jié)構(gòu)

小程序包含一個(gè)描述整體程序的 app 和多個(gè)描述各自頁面的 page
一個(gè)小程序主體部分由三個(gè)文件組成弧械，必須放在項(xiàng)目根目錄下

一個(gè) 小程序頁面由四個(gè)文件組成，分別是

配置

app.json 文件對(duì)微信小程序進(jìn)行全局配置，決定頁面文件的路徑牵触，窗口表現(xiàn)，設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間咐低，設(shè)置多個(gè) tab 等揽思。

{
  "pages": [
    "page/index/index",
    "page/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "page/index/index",
      "text": "首頁"
    }, {
      "pagePath": "page/logs/logs",
      "text": "日志"}]
    },
    "networkTimeout": {
      "request": 10000,
      "downloadFile": 10000
    },
    "debug": true
}

app.json 配置項(xiàng)列表

pages
接受一個(gè)字符串?dāng)?shù)組，來指定小程序由那些頁面組成见擦，每一項(xiàng)代表頁面的信息钉汗，數(shù)組的第一項(xiàng)代表小程序的初始頁面。
小程序新增鲤屡、減少頁面损痰，都需要對(duì) pages 數(shù)組進(jìn)行修改。
window 用于設(shè)置小程序的狀態(tài)欄酒来、導(dǎo)航條卢未、標(biāo)題、窗口背景色

頁面.json 只能設(shè)置 window 相關(guān)的配置項(xiàng)翘鸭，以決定本頁面窗口表現(xiàn)滴铅，所以無需寫 window 這個(gè)關(guān)鍵字。

tabBar
如果我們小程序是一個(gè)多 tab 應(yīng)用就乓，那么我們可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)汉匙，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁面。
tabBar 是一個(gè)數(shù)組生蚁，只能配置最少 2 個(gè)噩翠，最多 5 個(gè) tab，tab 按數(shù)組的順序排序守伸。

其中 list 接受一個(gè)數(shù)組尼摹，數(shù)組中的每一項(xiàng)都是一個(gè)對(duì)象见芹，其屬性如下:

networkTimeout
設(shè)置各種網(wǎng)絡(luò)請求超時(shí)時(shí)間

debug
可以在開發(fā)者工具中開啟 debug 模式，在開發(fā)者工具的控制臺(tái)面板惕它，調(diào)試信息以 info 的形式給出怕午，其信息有 Page 的注冊，頁面路由淹魄，數(shù)據(jù)更新郁惜，事件觸發(fā) 。

小程序框架與 MVC 簡述

小程序框架

小程序劃分為視圖層（View）和邏輯層（AppService）的兩層框架甲锡，并在視圖層和邏輯層之間提供數(shù)據(jù)傳輸和事件系統(tǒng)兆蕉。嚴(yán)格意義上，按照 MVC 的框架模式而言缤沦，小程序的邏輯層包含 MVC 中的 Model 以及 Controller.

MVC 簡述

View 有兩層作用虎韵，其一是負(fù)責(zé)從 Model層接收、渲染和顯示數(shù)據(jù);其二是負(fù)責(zé)接受和傳遞數(shù)據(jù)到 Controller 層缸废；
Controller 也有兩層作用包蓝，其一是接收 View 層抑或是請求 URL傳遞的表單數(shù)據(jù)，并對(duì)表單數(shù)據(jù)進(jìn)行控制校驗(yàn)呆奕，其二是處理用戶交互體驗(yàn)效果养晋，比如在 View 進(jìn)行動(dòng)畫效果設(shè)置衬吆、滾動(dòng)加載體驗(yàn)等梁钾；
Model 層,負(fù)責(zé)接受 Controller傳輸?shù)臄?shù)據(jù)并對(duì)數(shù)據(jù)進(jìn)行邏輯處理后返回給 View 層。

MVC 優(yōu)點(diǎn)

其一逊抡，分層的設(shè)計(jì)有助于管理復(fù)雜的應(yīng)用程序姆泻，將數(shù)據(jù)邏輯與界面顯示分離，有助于后期針對(duì)相應(yīng)的層級(jí)維護(hù)和管理冒嫡；
其二拇勃，簡化分組開發(fā)，能夠獨(dú)讓負(fù)責(zé)不同業(yè)務(wù)模塊的開發(fā)者進(jìn)行模塊化功能開發(fā)孝凌，并行推進(jìn)項(xiàng)目進(jìn)度.
小程序入口文件 app.js方咆、 app.json 以及 app.wxss.

app.js,小程序入口配置
 App({
 onLaunch: function() {
 //小程序生命周期初始化，全局加載(調(diào)用)一次蟀架，一般是用于程序啟動(dòng)時(shí)加載應(yīng)用共享資源瓣赂，
 },
 onShow: function() {
 //當(dāng)小程序啟動(dòng)，或從`后臺(tái)進(jìn)入前臺(tái)顯示`片拍，會(huì)觸發(fā) onShow煌集，監(jiān)聽小程序顯示，會(huì)被調(diào)用多次
 },
 onHide: function() {? //當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)時(shí)捌省，會(huì)觸發(fā) onHide 事件苫纤，會(huì)被調(diào)用多次

},
 globalData: 'I am global data'
})

前臺(tái)：指重新打開小程序顯示，即從退出當(dāng)前應(yīng)用，用戶又打開該應(yīng)用
后臺(tái)：是指退出小程序應(yīng)用（并非完全退出或關(guān)閉）卷拘，相當(dāng)于按手機(jī)返回鍵退出當(dāng)前應(yīng)用喊废，但是小程序還在所謂的【后臺(tái)】運(yùn)行
App() 必須在 app.js 中注冊，且不能注冊多個(gè)
不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() 栗弟，使用 this 就可以拿到 app 實(shí)例
不要在 onLaunch 的時(shí)候調(diào)用 getCurrentPage()操禀，此時(shí) page 還沒有生成
通過 getApp() 獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù),即onLaunch,onShow,onHide這三個(gè)周期函數(shù),自定義的函數(shù)是不屬于周期函數(shù)范圍內(nèi)
app.json,小程序應(yīng)用模塊的路由配置横腿、窗口以及 Tab 配置颓屑，#僅作為注釋說明，實(shí)際配置應(yīng)該去掉

 {
 "pages":[
 "page/index/index", ##page配置的數(shù)組的第一項(xiàng)作為小程序的初始頁面 
 "page/logs/logs"
 ],

  "window":{
    # 配置導(dǎo)航條
    "navigationBarBackgroundColor":"#9084cc", ##背景顏色耿焊，HexColor 類型（16 進(jìn)制顏色值）
    "navigationBarTextStyle":"dark",##標(biāo)題顏色揪惦，僅支持 dark/white
    "navigationBarTitleText":"我的訂單",##標(biāo)題內(nèi)容,String

    # 配置窗口
    "backgroundColor":"#909902",##窗口背景色，HexColor 類型
    "backgroundTextStyle":"dark",##下拉背景字體,String,僅支持 dark/light
    "enablePullDownRefresh"true罗侯，##是否開啟下拉刷新
  },
  "tabBar":{
    "color":"", ##tab 上的文字顏色
    "selectedColor":"", ##tab 上的文字選中時(shí)的顏色
    "backgroundColor":"", ##tab 的背景色
    "borderStyle":"", ##tabbar 上邊框的顏色器腋， 僅支持 black/white

## tab 的列表，最少 2 個(gè)钩杰、最多 5 個(gè) tab
    "list":[
     {
       "pagePath":"", ##頁面路徑纫塌，必須在 pages 中先定義
       "text":"", ##tab 上按鈕文字
       "iconPath":"", ##圖片路徑，icon 大小限制為 40kb
       "selectedIconPath":"" ##選中時(shí)的圖片路徑讲弄，icon 大小限制為 40kb
     },
    ]
  },
## 時(shí)間單位 「毫秒」
  "networkTimeout":{
    "request":3000, ## wx.request 的超時(shí)時(shí)間
    "connectSocket":5000, ## wx.connectSocket 的超時(shí)時(shí)間
    "uploadFile":10000, ## wx.uploadFile 的超時(shí)時(shí)間
    "downloadFile":10000 ## wx.downloadFile 的超時(shí)時(shí)間
  },

## 開發(fā)者工具的控制臺(tái)面板措左，調(diào)試信息以 info 的形式給出，
## 其信息有 Page 的注冊避除，頁面路由怎披，數(shù)據(jù)更新，事件觸發(fā)
? "debug":true
}

pages 是屬于 Array 類型瓶摆，Array 的每一項(xiàng)都是 url 的字符串凉逛，url 為相對(duì)根目錄下的 module 路徑，無需擴(kuò)展名群井，框架會(huì)自動(dòng)加載 module 下的js状飞、 wxml、 wxss书斜、 json 文件
配置的 pages 下的 module 的 js,wxss,json诬辈，wxml必須為相同的名稱，框架會(huì)根據(jù) module 名稱自動(dòng)加載上述的擴(kuò)展名文件
tab 上的 list菩佑，最少 2 個(gè)自晰、最多 5 個(gè)

**app.wxss **

app.wxss
 /**定義的樣式將應(yīng)用到小程序所有的模塊中**/
 view,image,scroll-view,text{
 margin: 0px;
 padding: 0px;
 }
 .headerView{
 width: 100%;
 height: 32px;
 background: floralwhite;
 }

其他樣式

尺寸單位

• responsive pixel,即rpx,響應(yīng)式像素，是一種能夠提供各種設(shè)備都能閱讀的一種設(shè)計(jì)方法,在微信小程序中稍坯，以 iphone6 作為屏幕標(biāo)準(zhǔn)酬荞，1rpx = 0.5px,微信小程序在底層會(huì)根據(jù)我們設(shè)定的 px來對(duì)屏幕自適應(yīng)搓劫，有助于開發(fā)者更集中于開發(fā)，應(yīng)用場景在設(shè)置間距混巧、長寬等
• root em,即 rem枪向，是 css3 新定義的一種長度單位，相對(duì)于頁面定義的 html 根元素來調(diào)整大小咧党，與 em 相對(duì)父元素調(diào)整大小更兼具相對(duì)和絕對(duì)字體調(diào)整大小的優(yōu)勢秘蛔，在微信小程序中，1rem = 750/20 rpx = 75px傍衡，規(guī)定標(biāo)準(zhǔn)的 iphone6 的寬度是 20rem深员，應(yīng)用場景在于設(shè)置字體大小

樣式導(dǎo)入
使用@import 語句可以導(dǎo)入外聯(lián)樣式表，@import 后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑蛙埂，用;表示語句結(jié)束
框架組件上支持使用 style倦畅、 class 屬性來控制組件的樣式

原文鏈接:http://layjoy.space/2017/01/14/wechat-2/