知了堂學習筆記-微信小程序框架
開發者文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html
一.文件結構
小程序包含一個描述整體程序的app和多個描述各自頁面的page。
一個小程序主題部分由三個文件組成，必須放在項目的根目錄，
如下：
app.js 必填 小程序邏輯
app.json 必填 小程序公共設置
app.wxss 否 小程序公共樣式
一個小程序頁面由四個文件組成，
分別是：
js 必填 頁面邏輯
wxml 必填 頁面結構
wxss 否 頁面樣式表
json 否 頁面配置
註意：為了方便開發者減少配置項，描述頁面的四個文件必須具有相同的路徑和文件名。
二、配置
app.json文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多tab等。
pages
接受一個數組，每一項都是字符串，來指定小程序有哪些頁面組成。每一項代表對應頁面
【路徑+文件名】信息，數組的第一項小程序的初始頁面。小程序中新增/減少頁面，都需要對pages數組進行修改。文件名不需要寫文件後綴，因為框架會自動去尋找路徑下.json,.js,.wxml,.wxss四個文件進行整合。
如開發目錄為：
則需要在app.json中寫:
tabBar
如果小程序是一個多tab應用（客戶端窗口的底部或頂部有tab欄可以切換頁面），可以通過tabBar配置項指定tab欄的表現，以及tab切換時顯示的對應頁面。
Tip:
1.當設置position為top時，將不會顯示icon
2.tabBar中的list是一個數組，只能配置最少2個、最多5個tab（太多圖片過小影響用戶體驗），tab按數組的順序排序。
屬性說明：
其中list接受一個數組，數組中的每一項都是一個對象，其屬性值如下：
三、頁面路由
在小程序中所有頁面的路由全部由框架進行管理。
頁面棧
框架以棧的形式維護了當前的所有頁面。當發生路由切換的時候，頁面棧的表現如下： 
路由方式
對於路由的觸發方式以及頁面生命周期函數如下：
註意：打開新頁面方式無法路由帶有Tab的頁面。
四、視圖層
數據綁定
WXML中的動態數據均來自對應的Page的data。
簡單的綁定
數據綁定使用Mustache語法（雙大括號）將變量包起來（類似C語言中‘\n‘），可以作用於:
內容
運算
可以在{{}}內進行簡單的運算，如
三元運算
五、列表渲染
wx:for
在組件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該數組。
默認數組的當前項的下標變量名為index，數組當前項的變量名默認為item
使用wx:for-item可以指定當前數組當前元素的變量名，
使用wx:for-index可以指定當前下標的變量名:
wx:for也可以嵌套，下邊是一個九九乘法表
六、條件渲染
wx:if
在框架中，使用wx:if="{{condition}}"來判斷是否需要渲染該代碼塊：
也可以用wx:elif和wx:else來添加一個else塊:
七、事件
什麽是事件
·事件是視圖層到邏輯層的通訊方式。
·事件可以將用戶的行為反饋到邏輯層進行處理。
·事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
·事件對象可以攜帶額外信息，如id,dataset,touches.
事件的使用方式
·在組件中綁定一個事件處理函數。
如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。
·在相應的Page定義中寫上相應的事件處理函數，參數是event。
·可以看到log出來的信息大致如下：
八、WXSS
WXX用來決定WXML的組件應該怎麽顯示。
尺寸單位
·rpx：可以根據屏幕寬度進行自適應。
建議：開發微信小程序時設計師可以用iPhone6作為視覺稿的標準。
註意：在較小的屏幕上不可避免的會用一些毛刺，請在開發時盡量避免這種情況。
選擇器
目前支持的選擇器有：
全局樣式與局部樣式
定義在app.wxss中的樣式為全局樣式，作用於每一個頁面。在page的wxss文件中定義的樣式為局部樣式，只作用在對應的頁面，並會覆蓋app.wxss中相同的選擇器。
2018/1/22
知了堂有溫度的大學生眾籌學習社區
知了堂學習筆記-微信小程序框架