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