上一章我們已經(jīng)介紹了微信小程序的目錄的整體了解以及app系列文件的講解,今天我們具體學習下Pages文件夾下的文件與小程序的配置又什么不同：
首先介紹小程序的框架，MINA框架中有四種類型的文件，其中json文件僅僅是小程序的配置:
WXML（WeiXin Markup Language）是框架設(shè)計的一套標簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。
WXML不同于網(wǎng)頁開發(fā)xml的就是里面的組件，因為官網(wǎng)已經(jīng)介紹的很清楚了，這里就不介紹了，提供鏈接：https://mp.weixin.qq.com/debug/wxadoc/dev/component/
用以下一些簡單的例子來看看 WXML 具有什么能力： 官方鏈接：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/
1 數(shù)據(jù)綁定：
利用大括號{{ text }}這樣的格式來進行信息的綁定，我們只需要在js文件的data屬性中加上 text代表的數(shù)據(jù)。
例如：
在.wxml文件中： {{ name }}
在.js中配置：
data{
name：“Wechat”
}
注意關(guān)鍵字 true和false 必須是這樣使用
特別注意：不要直接寫checked="false"，其計算結(jié)果是一個字符串，轉(zhuǎn)成 boolean 類型后代表真值。
2 列表渲染 ?:
利用wx：for 實現(xiàn)對數(shù)組進行循環(huán)展示時候使用，?wx:for-item指定數(shù)組當前元素的變量名 ?wx:for-index制定數(shù)組當前元素的下標 0，1
或者是直接在for循環(huán)的標簽內(nèi)部：{{item}} ?{{index}}同上面的功能一樣的 ?例如：
在index.js文件中設(shè)置data數(shù)據(jù) 定義一個array數(shù)組：
我們在wxml文件中利用wx:for把數(shù)據(jù)實時渲染上去：
編譯之后的結(jié)果:
上面我們可以看出{{ item }}和wx：for-item=“myitem”具有相同作用：都是代表array數(shù)組的item ，但是我們可以自定義item名稱，自定義的名稱一目了然。
wx:key當數(shù)據(jù)改變并且促發(fā)到了界面的渲染時候 在小程序進行數(shù)據(jù)渲染的時候會把去會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創(chuàng)建，已確保他們保存的狀態(tài)
如果有switch checkbox等需要保存狀態(tài)的組件時 需要帶有key關(guān)鍵值 用來保存之前的狀態(tài)? 。
3 條件渲染：
wx:if="{{hidden}}" ?判斷里面hidden的值進行判斷,一般情況下都是用來判斷是否首先是某個組件，通過js中的邏輯代碼，動態(tài)控制組件是顯示還是隱藏
如果需要一次性判斷多個條件 ?使用block標簽
view1
view2
<\block>
4 模板：模板其實就是android中的base類 也就是通用 例如每個界面的頭部相同的話，只需要引用template就可以了。
定義模板
使用name屬性，作為模板的名字。然后在內(nèi)定義代碼片段，如：
{{index}}:?{{msg}}
Time:?{{time}}
使用模板
使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入，如：
Page({? data: {? ? item: {? ? ? index:0,? ? ? msg:'this is a template',? ? ? time:'2016-09-15'}? }})
is 屬性可以使用 Mustache 語法，來動態(tài)決定具體需要渲染哪個模板：
odd
even
注意這個是在同一個mxml文件中的template 自我感覺沒有什么意義，一般情況下這個都是用來設(shè)置header和footer，定義在pages文件夾之外。
在下面的引入中會有使用外界的template
5 事件： 重點
事件可以用來對視圖層和邏輯層進行通信的方式
事件也可以將用戶的行為傳遞到邏輯層做處理 也就我們所說的點擊事件
事件可以綁定在組件上，當達到觸發(fā)事件，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。
事件對象可以攜帶額外信息，如 id, dataset, touches。 頁面跳轉(zhuǎn)時候都會發(fā)送信息過去。
點擊事件可以分為2類：
1：冒泡事件: 點擊事件會向點擊組件的父類進行傳遞
2：非冒泡事件：點擊事件不會向點擊組件的父類傳遞
WXML的冒泡事件列表：
類型觸發(fā)條件
touchstart手指觸摸動作開始
touchmove手指觸摸后移動
touchcancel手指觸摸動作被打斷，如來電提醒，彈窗
touchend手指觸摸動作結(jié)束
tap手指觸摸后馬上離開
longtap手指觸摸后，超過350ms再離開
注：除上表之外的其他組件自定義事件如無特殊申明都是非冒泡事件，如的submit事件，的input事件，的scroll事件，(詳見各個組件)
在事件的綁定有2種綁定方式 1：bind 2：catch ?但是bind事件不會阻止冒泡事件向上的傳遞。但是catch事件會阻止冒泡事件向上傳遞
outer?view
middle?view
inner?view
我點擊middle view時候出現(xiàn)：
我點擊inner view
從上面可以說明 catch綁定事件，是不會向父級目錄傳遞的，但是inner view使用bind綁定就向父級目錄傳遞了。
事件對象：
如無特殊說明，當組件觸發(fā)事件時，邏輯層綁定該事件的處理函數(shù)會收到一個事件對象。
bind：function(e){
console.log(e)
}
dataset
在組件中可以定義數(shù)據(jù)，這些數(shù)據(jù)將會通過事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉(zhuǎn)成小寫)如data-element-type，最終在 event.target.dataset 中會將連字符轉(zhuǎn)成駝峰elementType。
在使用過程中很簡單，只需要在wxml中的組件中加入 data-id=“”
這個時候在點擊事件的currentTarget /dataset目錄下就有了一個id的屬性 可以直接使用 e.currentTarget.dataset.id獲取id中的值，其實也就是傳遞數(shù)據(jù)的一種方式
6 引入
在小程序里面對于框架的引用有著import和include 其實都是對框架的引用
在import一般和template使用 引入框架 例如：
在下面我們設(shè)置了2個template模塊，一個是header 一個是footer
接下來是我們的引用了：
在引入使用src屬性定義路徑 注意路徑格式： ../../template/template.wxml
這里的第一個" ?../ ?"回到父級目錄，這里是pages目錄下， 第二個“../”這里是回到了pages目錄 而我們的template和pages在用同一個目錄下，
這樣就可以直接進入template
利用" is "確定是使用那個template ?data采用key-value的格式來設(shè)置數(shù)據(jù) 注意key必須和template中的一致 但是野可以直接在data屬性中設(shè)置參數(shù)
上面的例子 header直接使用key-value進行賦值，在footer模板中使用data動態(tài)渲染賦值
注意template的作用域:
import只能使用引用的目錄中的template ?如果在A import B ?C import A 即使C import A ?在C中也是不能使用B中的template
也就是說import不具備傳遞性
另外一種引入是 include標簽 include標簽就是將head.wxml中的布局復(fù)制過來 使用方式：
WXSS(WeiXin Style Sheets):是一套樣式語言，用于描述 WXML 的組件樣式。
WXSS 用來決定 WXML 的組件應(yīng)該怎么顯示。
為了適應(yīng)廣大的前端開發(fā)者，我們的 WXSS 具有 CSS 大部分特性。 同時為了更適合開發(fā)微信小程序，我們對 CSS 進行了擴充以及修改。
對于初學者而言 這可以說是最難的，但是熟悉之后確實最簡單的，因為著都是固定，不想業(yè)務(wù)邏輯動態(tài)改變。
與 CSS 相比我們擴展的特性有：
尺寸單位
樣式導(dǎo)入
尺寸單位：
rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素
對于android開發(fā)的人而言其實很簡單 也就是類似dp 設(shè)置的大小不會根據(jù)屏幕的大小改變而改變，根據(jù)屏幕的像素px來改變大小的，所以比例都是一樣大小的。
內(nèi)聯(lián)樣式
框架組件上支持使用 style、class 屬性來控制組件的樣式。
style：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動態(tài)的樣式，在運行時會進行解析，請盡量避免將靜態(tài)的樣式寫進 style 中，以免影響渲染速度。
class：用于指定樣式規(guī)則，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。
全局樣式與局部樣式
定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應(yīng)的頁面，并會覆蓋 app.wxss 中相同的選擇器。
