一：理解視圖層
? ? 類似于“視圖引擎模板”(jsp,freemaker,velocity,thymeleaf等)
? ??框架的視圖層由 WXML 與 WXSS 編寫，由組件來進行展示。
? ??將邏輯層的數據反應成視圖，同時將視圖層的事件發送給邏輯層。
? ? 那么wxml，wxss以及組件是什么鬼？
? ??????WXML(WeiXin Markup language) 用于描述頁面的結構。
? ??????WXSS(WeiXin Style Sheet) 用于描述頁面的樣式。
? ??????組件(Component)是視圖的基本組成單元。
? ? ? ? 另：
????????WXS(WeiXin Script) 是小程序的一套腳本語言，結合?WXML，可以構建出頁面的結構。
二：WXML
? ??WXML（WeiXin Markup Language）是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。
? ??WXML 具有什么能力：數據綁定、列表渲染、條件渲染、模板、事件、引用
? ? 1.數據綁定(WXML 中的動態數據均來自對應 Page 的 data)
? ??????數據綁定使用 Mustache 語法（雙大括號將變量包起來)
? ??????注意：?花括號和引號之間如果有空格，將被解析成為字符串
? ? ? ? 1)簡單綁定_內容綁定
? ??????????<view> {{ message }} </view>
? ??????????Page({ data: { message:'Hello MINA!'}})
? ? ? ? 2)簡單綁定_組件屬性(需要在雙引號之內)
? ??????????<view id="item-{{id}}"> </view>
? ??????????Page({ data: { id:0}})
? ? ? ? 3)簡單綁定_控制屬性(需要在雙引號之內)
? ??????????<view wx:if="{{condition}}"> </view>
? ??????????Page({ data: { condition:true}})
? ? ? ? 4)簡單綁定_關鍵字(需要在雙引號之內)
? ??????????true：boolean 類型的 true，代表真值。
? ??????????false： boolean 類型的 false，代表假值。
? ??????????<checkbox checked="{{false}}"> </checkbox>
? ??????????特別注意：不要直接寫?checked="false"，其計算結果是一個字符串，
? ??????????????????????????????轉成 boolean 類型后代表真值。
? ??????可以在?{{}}?內進行簡單的運算
????????5)綁定_運算_三元運算
? ??????????<view hidden="{{flag ? true : false}}"> Hidden </view>
? ??????6)綁定_運算_算數運算
? ??????????<view> {{a + b}} + {{c}} + d </view>
? ??????????Page({ data: { a:1, b:2, c:3}})
? ??????????view中的內容為?3 + 3 + d
? ? ? ? 7)綁定_運算_邏輯判斷
? ??????????<view wx:if="{{length > 5}}"> </view>
? ? ? ? 8)綁定_運算_字符串運算
? ??????????<view>{{"hello" + name}}</view>
? ??????????Page({ data:{ name:'MINA'}})
? ? ? ? 9)綁定_運算_數據路徑運算
? ??????????<view>{{object.key}} {{array[0]}}</view>????
? ??????????Page({ data: { object: { key:'Hello '}, array: ['MINA'] }})
? ??????也可以在 Mustache 內直接進行組合，構成新的對象或者數組。
? ? ? ? 10)綁定_組合_數組
? ??????????<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
? ??????????age({ data: { zero:0}})
? ??????????最終組合成數組[0, 1, 2, 3, 4]
? ??????11)綁定_組合_對象1
? ??????????<template is="objectCombine" data="{{for: a, bar: b}}"></template>
? ??????????Page({ data: { a:1, b:2}})
? ??????????最終組合成的對象是?{for: 1, bar: 2}
? ??????12)綁定_組合_對象2
? ??????????如果對象的 key 和 value 相同，也可以間接地表達。
? ??????????<template is="objectCombine" data="{{foo, bar}}"></template>
? ??????????Page({ data: { foo:'my-foo', bar:'my-bar'}})
? ??????????最終組合成的對象是?{foo: 'my-foo', bar:'my-bar'}
? ??????13)綁定_組合_對象3
? ??????????也可以用擴展運算符?...?來將一個對象展開
? ??????????< template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}">< /template>
? ??????????Page({ data: { obj1: { a:1, b:2}, obj2: { c:3, d:4} }})
? ??????????最終組合成的對象是?{a: 1, b: 2, c: 3, d: 4, e: 5}
? ??????14)綁定_組合_對象4
? ??????????上述方式可以隨意組合，但是如有存在變量名相同的情況，后邊的會覆蓋前面
? ? ? ? ? ??<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
? ??????????Page({ data: { obj1: { a:1, b:2}, obj2: { b:3, c:4}, a:5}
? ??????????最終組合成的對象是?{a: 5, b: 3, c: 6}
????2.列表渲染
? ? ? ? 1)?wx:for
? ??????????在組件上使用?wx:for?控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。
? ? ? ? ? ? 1>默認數組的當前項的下標變量名默認為?index，數組當前項的變量名默認為?item
? ??????????????<view wx:for="{{array}}">
????????????????????{{index}}: {{item.message}}
? ? ? ? ? ? ? ? </view>
? ??????????????Page({ data: { array: [{ message:'foo'}, { message:'bar'}] }})
? ? ? ? ? ? 2>指定變量名
? ??????????????使用?wx:for-item?可以指定數組當前元素的變量名
? ??????????????使用?wx:for-index?可以指定數組當前下標的變量名
? ??????????????<view wx:for="{{array}}" wx:for-index="idx"wx:for-item="itemName" >
?????????????????????{{idx}}: {{itemName.message}}
????????????????</view>
? ? ? ? ? ? 3>wx:for?也可以嵌套，下邊是一個九九乘法表
? ??????????????<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
????????????????????<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
????????????????????????<view wx:if="{{i <= j}}">
????????????????????????????{{i}} * {{j}} = {{i * j}}
????????????????????????</view>
????????????????????</view>
????????????????</view>
? ? ? ? ? ? 4>循環中出現警告
????????????????warning： Now you can provide attr "wx:key" for a "wx:for" to improve performance.?
? ??????????????如果列表中項目的位置會動態改變或者有新的項目添加到列表中
? ??????????????希望列表中的項目保持自己的特征和狀態
? ??????????????如<input/>中的輸入內容，<switch/>的選中狀態
? ??????????????需要使用?wx:key?來指定列表中項目的唯一的標識符
? ? ? ? ? ? ? ? 目的：
????????????????????當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件
? ??????????????????框架會確保他們被重新排序，而不是重新創建
? ??????????????????以確保使組件保持自身的狀態，并且提高列表渲染時的效率。
? ? ? ? ? ? ? ??wx:key?的值以兩種形式提供：
? ? ? ? ? ? ? ? ? ? 1.字符串，代表在 for 循環的 array 中 item 的某個 property，
? ? ? ? ? ? ? ? ? ? ?????該 property 的值需要是列表中唯一的字符串或數字，且不能動態改變，
? ? ? ? ? ? ? ? ? ? ? ? 所以使用{{index}}是不錯的選擇，肯定是一個不重復的數字
? ? ? ? ? ? ? ? ? ? 2.保留關鍵字?*this?代表在 for 循環中的 item 本身
? ? ? ? ? ? ? ? ? ? ? ? 使用*this需要 item 本身是一個唯一的字符串或者數字，來確保Key是唯一的。
? ? ? ? ? ? ? ? ? ? ? ? 即如果數據數組是字符串或數字，且每項都是唯一的，則可以使用wx:key="*this"
? ? ? ? ? ? ? ?? ?????<view wx:for="{{array}}"?wx:for-index="idx"wx:for-item="iName"?wx:key="{{idx}}"?>
? ?????????????如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略不使用wx:key的警告。
? ? ? ? 2）block wx:for
? ??????????可以將?wx:for?用在標簽上，以渲染一個包含多節點的結構塊。
? ??????????<block wx:for="{{[1, 2, 3]}}">
????????????????<view> {{index}}: </view>
????????????????<view> {{item}} </view>
????????????</block>
????3.條件渲染
? ??????wx:if?
? ? ? ? 1>在框架中，使用?wx:if="{{condition}}"?來判斷是否需要渲染該代碼塊
? ? ? ? ? ?????<view wx:if="{{condition}}"> True </view>
? ? ? ? 2>也可以用?wx:elif?和?wx:else?來添加一個 else 塊
? ??????????????<view wx:if="{{length > 5}}"> 1 </view>
????????????????<view wx:elif="{{length > 2}}"> 2 </view>
????????????????<view wx:else> 3 </view>
? ? ? ? 3>block wx:if
? ??????????因為?wx:if?是一個控制屬性，需要將它添加到一個標簽上。
????????????如果要一次性判斷多個組件標簽，可以使用一個??標簽將多個組件包裝起來，
????????????并在上邊使用?wx:if?控制屬性。
? ??????????<block wx:if="{{true}}">
????????????????<view> view1</view>
????????????????<view> view2</view>
????????????</block>
? ? ? ? ? ? 注意：?不是一個組件，僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
? ? ? ? 4>wx:if?vs?hidden
? ??????????因為?wx:if?之中的模板也可能包含數據綁定，所有當?wx:if?的條件值切換時，框架有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。
? ??????????同時?wx:if?也是惰性的，如果在初始渲染條件為?false，框架什么也不做，在條件第一次變成真的時候才開始局部渲染。
? ??????????相比之下，hidden?就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。
? ??????????一般來說，wx:if?有更高的切換消耗而?hidden?有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用?hidden?更好，如果在運行時條件不大可能改變則?wx:if?較好。????
????4.模板
? ??????WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調用
? ??????模板的作用域：只能使用 data 傳入的數據以及模版定義文件中定義的??模塊
? ? ? ? 模板應用場景：可以做母板頁
? ? ? ? 1>定義模板(使用 name 屬性，作為模板的名字。然后在內定義代碼片段)
? ??????????<template name="msgItem">
????????????????<view>
????????????????????<text> {{index}}: {{msg}}
????????????????????<text> Time: {{time}}
????????????????</view>
????????????</template>
? ? ? ? ? ? 模板中定義名稱=msgItem，且定義了使用模板時需要傳入的3個data數據
????????2>使用模板(使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入)
????????????<template is="msgItem" data="{{...item}}"/>
? ? ? ? ? ? 指定使用名稱=msgItem的模板，數據是一個item對象
? ??????????Page({ data: { item: { index:0, msg:'this is a template', time:'2016-09-15'} }})
? ? ? ? ? ? 注意：
? ? ? ? ? ? ? ? ? ? 如果模板里需要傳遞是多個數據的話，使用...表示多個值，如data="{{...item}}"
? ??????????????????如果模板里需要傳遞是單個數據的話，直使用簡單綁定，如data="{{item}}"
? ? ? ? ? ? ? ? ? ? 可直接使用數據，如data="{{index:1,msg:This is message,time:123323231}}"
? ? ? ? 3>is再一例(is 屬性可以使用 Mustache 語法，來動態決定具體需要渲染哪個模板)
? ??????????<template name="odd">
????????????????<view> odd </view>
????????????</template>
????????????<template name="even">
????????????????<view> even </view>
????????????</template>
????????????<block wx:for="{{[1, 2, 3, 4, 5]}}">
????????????????<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
????????????</block>
????5.事件(此處事件不是頁面生命周期事件，是自定義函數事件)
? ??????事件是視圖層到邏輯層的通訊方式
? ??????事件可以將用戶的行為反饋到邏輯層進行處理
? ??????事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數
? ??????事件對象可以攜帶額外信息，如 id, dataset, touches
? ??????事件的使用方式：
? ? ? ? ? ? 1>在組件中綁定一個事件處理函數
? ? ? ? ? ? 2>在邏輯層相應的Page定義中寫上相應的事件處理函數，參數是event
? ? ? ? ? ? 簡單示例：
? ??????????????<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
? ??????????????Page({ tapName:function(event){console.log(event) }})
? ? ? ? ? ? ? ? 輸出結果：
? ??????????????{"type":"tap","timeStamp":895,"target": {"id":"tapTest","dataset": {"hi":"WeChat"}},
????????????????"currentTarget": {"id":"tapTest","dataset": {"hi":"WeChat"}},
????????????????"detail": {"x":53,"y":14},
????????????????"touches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14}],
????????????????"changedTouches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14}]}
? ? ? ? 1)事件分類
? ??????????冒泡事件：當一個組件上的事件被觸發后，該事件會向父節點傳遞
? ??????????非冒泡事件：當一個組件上的事件被觸發后，該事件不會向父節點傳遞。
? ??????????冒泡事件列表
? ??????????????類型? ? ? ? ? ? ? ? ? ? ? ? ? ? ?觸發條件? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 最低版本
? ??????????????touchstart? ? ? ? ? ? ? ? ? 手指觸摸動作開始?
????????????????touchmove? ? ? ? ? ? ? ? ?手指觸摸后移動
????????????????touchcancel? ? ? ? ? ? ? ?手指觸摸動作被打斷，如來電提醒，彈窗?
????????????????touchend? ? ? ? ? ? ? ? ? ? 手指觸摸動作結束?
????????????????tap? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 手指觸摸后馬上離開
????????????????longpress? ? ? ? ? ? ? ? ? ? 手指觸摸后，超過350ms再離開，? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1.5.0
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果指定了事件回調函數并觸發了這個事件，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? tap事件將不被觸發?
????????????????longtap? ? ? ? ? ? ? ? ? ? ? ? 手指觸摸后，超過350ms再離開
????????????????????????????????????????????????????（推薦使用longpress事件代替）
????????????????transitionend? ? ? ? ? ? ?會在 WXSS transition 或
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? wx.createAnimation 動畫結束后觸發
????????????????animationstart? ? ? ? ? 會在一個 WXSS animation 動畫開始時觸發
????????????????animationiteration? ?會在一個 WXSS animation 一次迭代結束時觸發
????????????????animationend? ? ? ? ? ? 會在一個 WXSS animation 動畫完成時觸發
? ? ? ? ? ? 非冒泡事件:除上表之外的組件自定義事件都是非冒泡事件(特殊聲明的事件除外),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件
????????2)事件綁定和冒泡
? ? ? ? ? ? 1>事件綁定的寫法同組件的屬性，以 key、value 的形式。
? ? ? ? ? ? 2>key 以bind或catch開頭，然后跟上事件的類型，如bindtap、catchtouchstart。
? ? ? ? ? ? 3>自基礎庫 1.5.0起，bind和catch緊跟一個冒號，含義不變，如bind:tap、catch:touchstart
? ? ? ? ? ? 4>value 是一個字符串，需在邏輯層的 Page 中定義同名的函數,不然當觸發事件的時候會報錯
? ? ? ? ? ? 5>bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
? ? ? ? ? ? ? ? 示例：
? ??????????????????<view id="outer" bindtap="hTap1">
????????????????????????outerView
????????????????????????<view id="middle" catchtap="hTap2">
????????????????????????????middleView
? ? ? ? ? ? ? ? ? ? ? ? ? ? <view id="inner" bindtap="hTap3">inner view</view>
????????????????????????</view>
????????????????????</view>
? ? ? ? ? ? ? ?分析：
????????????????????點擊 innerView 會先后調用hTap3和hTap2，middleView的catchtap 阻止了tap 事件冒泡?
? ??????????????????點擊 middleView 會觸發hTap2
????????????????????點擊 outerView 會觸發hTap1。
????????3)事件的捕獲階段
? ? ? ? ? ? 1>自基礎庫版本 1.5.0起，觸摸類事件支持捕獲階段。
? ? ? ? ? ? 2>捕獲階段位冒泡階段之前，且在捕獲階段中，事件到達節點的順序與冒泡階段恰好相反。
? ? ? ? ? ? 3>需要在捕獲階段監聽事件時，可采用capture-bind、capture-catch關鍵字，
????????????????后者將中斷捕獲階段和取消冒泡階段。
? ? ? ? ? ? 示例：
? ??????????????<view id="outer" bind:touchstart="hTap1" capture-bind:touchstart="hTap2">
????????????????????outerView
????????????????????<view id="inner" bind:touchstart="hTap3" capture-bind:touchstart="hTap4">
????????????????????????innerView
????????????????????</view>
????????????????</view>
? ??????????????點擊 innerView會先后調用hTap2、hTap4、hTap3、hTap1
? ??????????????<view id="outer" bind:touchstart="hTap1" capture-catch:touchstart="hTap2">
????????????????????outerView
????????????????????<view id="inner" bind:touchstart="hTap3" capture-catch:touchstart="hTap4">
? ? ? ? ? ? ? ? ? ? ? ? ?innerView
????????????????????</view>
????????????????</view>
? ??????????????將只觸發hTap2，因為capture-catch將中斷捕獲階段和取消冒泡階段
????????4)事件對象
? ??????????如無特殊說明，當組件觸發事件時，邏輯層對應的該事件的處理函數會收到一個事件對象
? ? ? ? ? ? 1>BaseEvent 基礎事件對象屬性列表
? ??????????????屬性? ? ? ? ? ? ? ? ? ? ? ? ?類型? ? ? ? ? ? ? ? ? 說明
? ??????????????type? ? ? ? ? ? ? ? ? ? ? ? ? String? ? ? ? ? ? ? 事件類型
????????????????timeStamp? ? ? ? ? ? ? Integer? ? ? ? ? ?事件生成時的時間戳
? ? ? ? ? ? ? ? target? ? ? ? ? ? ? ? ? ? ? ?Object? ? ? ? ? ? ?觸發事件的組件的一些屬性值集合
????????????????currentTarget? ? ? ? Object? ? ? ? ? ? ?當前組件的一些屬性值集合
? ? ? ? ? ? 2>CustomEvent 自定義事件對象屬性列表（繼承 BaseEvent）
? ??????????????屬性? ? ? ? ? ? ? ? ? ? ? ? ?類型? ? ? ? ? ? ? ? ? 說明
? ??????????????detail? ? ? ? ? ? ? ? ? ? ? ?Object? ? ? ? ? ? ? 額外的信息
? ? ? ? ? ? 3>TouchEvent 觸摸事件對象屬性列表（繼承 BaseEvent）
? ??????????????屬性? ? ? ? ? ? ? ? ? ? ? ? ?類型? ? ? ? ? ? ? ? ? 說明
? ??????????????touches? ? ? ? ? ? ? ? ? ? Array? ? ? ? ? ? ? ? 觸摸事件，當前停留在屏幕中的觸摸點信息的數組
????????????????changedTouches? ?Array? ? ? ? ? ? ? ? 觸摸事件，當前變化的觸摸點信息的數組
???????????特殊事件： <canvas/> 中的觸摸事件不可冒泡，所以沒有 currentTarget。
????????5)每個事件對象詳解
? ? ? ? ? ? 1>type:代表事件的類型
? ? ? ? ? ? 2>timeStamp:頁面打開到觸發事件所經過的毫秒數。
? ? ? ? ? ? 3>target:觸發事件的源組件一些屬性值集合
? ??????????????屬性? ? ? ? ? ? ?類型? ? ? ? ? ? ? 說明
? ??????????????id? ? ? ? ? ? ? ? ? String? ? ? ? ? ?事件源組件的id
????????????????tagName? ? ?String? ? ? ? ? ?當前組件的類型
????????????????dataset? ? ? ? ?Object? ? ? ? ? 事件源組件上由data-開頭的自定義屬性組成的集
????????????4>currentTarget:事件綁定的當前組件的一些屬性值集合
? ? ? ? ? ? ? ? 與target的屬性值是一樣的。
? ? ? ? ? ? ? ? 那兩都有什么區別呢？
? ? ? ? ? ? ? ? 根據上面的示例，????????
????????????????????點擊 innerView 時，hTap3 收到的事件對象 target 和 currentTarget 都是 inner，
????????????????????而 hTap2 收到的事件對象 target 就是 inner，currentTarget 就是 middle。
? ? ? ? ? ? ? ? 分析一下dataset:
? ??????????????????在組件中可以定義數據，這些數據將會通過事件傳遞給 SERVICE。
????????????????????書寫方式： 以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉成小寫)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如data-element-type，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 最終在 event.currentTarget.dataset 中會將連字符轉成駝峰elementType????
? ? ? ? ? ? ? ? ? ? 再簡單地說：要想在邏輯service層接收的參數名稱是駝峰式的，則每部分之間-分隔? ??
? ? ? ? ? ? ? ? ? ??<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bvTap"> Test </view>
? ??????????????????Page({ bindViewTap:function(event){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?????event.currentTarget.dataset.alphaBeta ===1// 會轉為駝峰寫法????????????????????????????
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?event.currentTarget.dataset.alphabeta ===2// 大寫會轉為小寫}})
????????????5>touches:是一個數組，每個元素為一個 Touch 對象(canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數組)。表示當前停留在屏幕上的觸摸點。
? ??????????????屬性? ? ? ? ? ? ? ? ? ? ? ? ? 類型? ? ? ? ? ? ? 說明
? ??????????????identifier? ? ? ? ? ? ? ? ?Number? ? ? ? 觸摸點的標識符
????????????????pageX, pageY? ? ? ? ?Number? ? ? ? 距離文檔左上角的距離，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?文檔的左上角為原點 ，橫向為X軸，縱向為Y軸
????????????????clientX, clientY? ? ? Number? ? ? ? 距離頁面可顯示區域（屏幕除去導航條）左上角距離，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?橫向為X軸，縱向為Y軸
? ??????????????CanvasTouch 對象
? ??????????????屬性? ? ? ? ? ? ? ? ? ? ? ? ? 類型? ? ? ? ? ? ? 說明
? ??????????????dentifier? ? ? ? ? ? ? ? ? Number? ? ? ? 觸摸點的標識符
????????????????x, y? ? ? ? ? ? ? ? ? ? ? ? ? ?Number? ? ? ? ?距離 Canvas 左上角的距離，Canvas 的左上角為原點 ，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?橫向為X軸，縱向為Y軸? ? ? ? ? ?
????????????6>changedTouches:?數據格式同 touches。 表示有變化的觸摸點，如從無變有(touchstart),位置變化(touchmove),從有變無(touchend、touchcancel)
? ? ? ? ? ? 7>detail
? ??????????????自定義事件所攜帶的數據，如表單組件的提交事件會攜帶用戶的輸入，
????????????????媒體的錯誤事件會攜帶錯誤信息，詳見組件定義中各個事件的定義。
????????????????點擊事件的detail 帶有的 x, y 同 pageX, pageY 代表距離文檔左上角的距離
?????6.引用
? ? ? ? 1).邏輯服務層js文件之間引用：require(jsFileRelativeNotAbsolutePath)函數引用
? ? ? ? 2).wxml視圖層文件引用：import標簽和include標簽
? ? ? ? ? ? import標簽引用的是目標wxml文件中的所有<template></template>模板代碼塊
? ??????????<import src="wxml模板文件代碼塊，相對路徑"/>
? ??????????import 作用域：只import 目標文件中 template，不 import 目標文件 import 的 template。
? ??????????include標簽引用的是目標wxml文件中的所有非<template</template><wxs/>模板代碼塊
? ??????????<import src="wxml非模板文件代碼塊，相對路徑"/>
? ??????????include可將目標文件除了<template/> <wxs/>外的整個代碼引入，相當拷貝到include位置
? ? ? ? ? ? 與視圖層的模板塊關聯理解
? ? ? ? 3).wxss文件之間引用：@import "wxssFileRelativeNotAbsolutePath";
? ? ? ? 4).引申
????????????每個頁面都對應有4個文件.wxml,.js,wxss,.json，在.wxml文件不引用也能直接使用
? ? ? ? ? ? 因為在同一個文件夾底，文件名稱相同，只是擴展名不同，
????????????系統自動根據相同的文件名稱整合成一個前面界面
? ? ? ? ?5)由此可見：
? ? ? ? ? ? 小程序頁面需要引用外部共用的js邏輯文件，在頁面相同名稱的js中通過require()引用
? ? ? ? ? ? 同理于外部共用的wxss文件引用。
三：wxss文件
? ??WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式
? ??WXSS 用來決定 WXML 的組件應該怎么顯示
? ??WXSS 具有 CSS 大部分特性。同時為更適合開發小程序，WXSS 對 CSS 進行了擴充以及修改。
? ? 擴展的特性有：尺寸單位和樣式導入
? ? 1.尺寸單位?(rpx：responsive pixel）,目標：這個單位可以根據屏幕寬度進行自適應
????????規定屏幕寬為750rpx
????????小程序中rpx與px的轉換：
?????????????例如：設計稿750px寬度
? ??????????????????????你ps上量出寬度是多少，那么你就定義多少rpx，也就是 1px = 1rpx
? ??????????例如：設計稿640px寬度
? ??????????????????????那么很遺憾，你需要轉換一下 1px = 750/640 rpx? ? ? ? ??
? ? 2.樣式導入
? ??????@import語句導入外聯樣式表，@import后跟需導入的外聯樣式表相對路徑，用;表示語句結束
? ? 3.內聯樣式
? ? ? ? 與css一樣，框架組件上支持使用 style、class 屬性來控制組件的樣式。
? ? ? ? 注意：請盡量避免將靜態的樣式寫進 style 中，以免影響渲染速度
? ??????<view style="color:{{color}};" />
? ??????<view class="normal_view" />
? ? 4.class屬性類名選擇器
? ??????選擇器? ? ? ? ? ? ? ? ? ? ? ? 樣例? ? ? ? ? ? ? ? ? ? ? ? ? ? ?樣例描述
? ??????.class? ? ? ? ? ? ? ? ? ? ? ? ? .intro? ? ? ? ? ? ? ? ? ? ? ? ? ? 選擇所有擁有 class="intro" 的組件
????????#id? ? ? ? ? ? ? ? ? ? ? ? ? ? ? #firstname? ? ? ? ? ? ? ? ?選擇擁有 id="firstname" 的組件
????????element? ? ? ? ? ? ? ? ? ? ? view? ? ? ? ? ? ? ? ? ? ? ? ? ? ?選擇所有 view 組件
????????element, element? ? ?view, checkbox? ? ? ? ? ?選擇所有文檔的 view 組件和所有的 checkbox 組件
????????::after? ? ? ? ? ? ? ? ? ? ? ? ? view::after? ? ? ? ? ? ? ? ? ?在 view 組件后邊插入內容
????????::before? ? ? ? ? ? ? ? ? ? ? ?view::before? ? ? ? ? ? ? ? 在 view 組件前邊插入內容
? ? 5.引申：全局樣式與局部樣式
? ??????定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。
????????在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，
????????????并會覆蓋 app.wxss 中相同的選擇器。
四：WXS
? ??WXS(WeiXin Script) 是小程序的一套腳本語言，結合?WXML，可以構建出頁面的結構。
? ??wxs 不依賴于運行時的基礎庫版本，可以在所有版本的小程序中運行
? ??wxs 與 javascript 是不同的語言，有自己的語法，并不和 javascript 一致
? ??wxs 的運行環境和其他 javascript 代碼是隔離的，
????????????wxs 中不能調用其他 javascript 文件中定義的函數，
????????????也不能調用小程序提供的API
? ??wxs 函數不能作為組件的事件回調
? ??由于運行環境的差異，在 iOS 設備上小程序內的 wxs 會比 javascript 代碼快 2 ~ 20 倍。
????????????在 android 設備上二者運行效率無差異
? ? 使用示例1：wxs定義暴露對象或屬性
? ??????<wxs module="m1">
????????????var msg = "hello world";
????????????module.exports.message = msg;
????????</wxs>
????????<view> {{m1.message}} < /view>
? ? ?使用示例2：wxs定義暴露函數
? ??????<wxs module="m1">
????????????var getMax = function(array) {
????????????????var max = undefined;
????????????????for (var i = 0; i < array.length; ++i) {
????????????????????max = max === undefined ?
? ? ? ? ? ? ? ? ? ? array[i] :
????????????????????(max >= array[i] ? max : array[i]);
????????????????}
????????????????return max;
????????????}
????????????module.exports.getMax = getMax;
????????</wxs>
? ??????<view> {{m1.getMax(array)}} </view>
? ? 總結：
? ? ? ? 1.wxs原來就是weixin script，專門定義一套頁面中協助wxml渲染的處理邏輯
? ? ? ? 2.wxs不互通
? ? ? ? 3.wxs詳細請法請點擊我
五：組件
? ? 請看一下節視圖層_組件：
