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

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

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

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

配置

app.json 文件對微信小程序進行全局配置，決定頁面文件的路徑，窗口表現(xiàn)，設置網(wǎng)絡超時時間，設置多個 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 配置項列表

pages
接受一個字符串數(shù)組，來指定小程序由那些頁面組成，每一項代表頁面的信息，數(shù)組的第一項代表小程序的初始頁面。
小程序新增、減少頁面，都需要對 pages 數(shù)組進行修改。
window 用于設置小程序的狀態(tài)欄、導航條、標題、窗口背景色

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

tabBar
如果我們小程序是一個多 tab 應用，那么我們可以通過 tabBar 配置項指定 tab 欄的表現(xiàn)，以及 tab 切換時顯示的對應頁面。
tabBar 是一個數(shù)組，只能配置最少 2 個，最多 5 個 tab，tab 按數(shù)組的順序排序。

其中 list 接受一個數(shù)組，數(shù)組中的每一項都是一個對象，其屬性如下:

networkTimeout
設置各種網(wǎng)絡請求超時時間

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

小程序框架與 MVC 簡述

小程序框架

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

MVC 簡述

View 有兩層作用，其一是負責從 Model層接收、渲染和顯示數(shù)據(jù);其二是負責接受和傳遞數(shù)據(jù)到 Controller 層；
Controller 也有兩層作用，其一是接收 View 層抑或是請求 URL傳遞的表單數(shù)據(jù)，并對表單數(shù)據(jù)進行控制校驗，其二是處理用戶交互體驗效果，比如在 View 進行動畫效果設置、滾動加載體驗等；
Model 層,負責接受 Controller傳輸?shù)臄?shù)據(jù)并對數(shù)據(jù)進行邏輯處理后返回給 View 層。

MVC 優(yōu)點

其一，分層的設計有助于管理復雜的應用程序，將數(shù)據(jù)邏輯與界面顯示分離，有助于后期針對相應的層級維護和管理；
其二，簡化分組開發(fā)，能夠獨讓負責不同業(yè)務模塊的開發(fā)者進行模塊化功能開發(fā)，并行推進項目進度.
小程序入口文件 app.js、 app.json 以及 app.wxss.

app.js,小程序入口配置
 App({
 onLaunch: function() {
 //小程序生命周期初始化，全局加載(調(diào)用)一次，一般是用于程序啟動時加載應用共享資源，
 },
 onShow: function() {
 //當小程序啟動，或從`后臺進入前臺顯示`，會觸發(fā) onShow，監(jiān)聽小程序顯示，會被調(diào)用多次
 },
 onHide: function() {? //當小程序從前臺進入后臺時，會觸發(fā) onHide 事件，會被調(diào)用多次

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

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

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

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

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

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

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

pages 是屬于 Array 類型，Array 的每一項都是 url 的字符串，url 為相對根目錄下的 module 路徑，無需擴展名，框架會自動加載 module 下的js、 wxml、 wxss、 json 文件
配置的 pages 下的 module 的 js,wxss,json，wxml必須為相同的名稱，框架會根據(jù) module 名稱自動加載上述的擴展名文件
tab 上的 list，最少 2 個、最多 5 個

**app.wxss **

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

其他樣式

尺寸單位

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

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

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