{{view 視圖層}}微信小程序

微信小程序 view 視圖層//自學

　　1.數據綁定

數據綁定WXML中的動態數據均來自對應Page的data。
簡單綁定數據綁定使用"Mustache"語法（雙大括號）將變量包起來，可以作用于：
內容<view> {{ message }} </view>Page({data: {message: 'Hello MINA!'}
})組件屬性(需要在雙引號之內)<view id="item-{{id}}"> </view>Page({data: {id: 0}
})控制屬性(需要在雙引號之內)<view wx:if="{{condition}}"> </view>Page({data: {condition: true}
})關鍵字(需要在雙引號之內)true：boolean 類型的 true，代表真值。false： boolean 類型的 false，代表假值。<checkbox checked="{{false}}"> </checkbox>特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型后代表真值。運算可以在{{}}內進行簡單的運算，支持的有如下幾種方式：
三元運算<view hidden="{{flag ? true : false}}"> Hidden </view>算數運算<view> {{a + b}} + {{c}} + d </view>Page({data: {a: 1,b: 2,c: 3}
})view中的內容為3 + 3 + d
邏輯判斷<view wx:if="{{length > 5}}"> </view>字符串運算<view>{{"hello" + name}}</view>Page({data:{name:"MINA"}
})數據路徑運算<view>{{object.key}} {{array[0]}}</view>Page({data: {object: {key: 'Hello '},array: ['MINA']}
})組合也可以在Mustache內直接進行組合，構成新的對象或者數組
數組<view wx:for-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>Page({data: {zero: 0}
})最終組合成數組[0, 1, 2, 3, 4]
對象<template is="objectCombine" data="{{for: a, bar: b}}"></template>Page({data: {a: 1,b: 2}
})最終組合成的對象是{for: 1, bar: 2}也可以用擴展運算符...來將一個對象展開<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}如果對象的key和value相同，也可以間接地表達<template is="objectCombine" data="{{foo, bar}}"></template>Page({data: {foo: 'my-foo',bar: 'my-bar'}
})最終組合成的對象是{foo: 'my-foo', bar:'my-bar'}注意：上述方式可以隨意組合，但是如有存在變量名相同的情況，后邊的會覆蓋前面，如<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.條件渲染

 wx:if
 在MINA中，我們用wx:if="{{condition}}"來判斷是否需要渲染該代碼塊：
 <view wx:if="{{condition}}"> True </view>
 也可以用wx:elif和wx:else來添加一個else塊：
 <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view>
 block wx:if
 因為wx:if 是一個控制屬性，需要將它添加到一個標簽上。但是如果我們想一次性判斷多個組件標簽，我們可以使用一個<block/>標簽將多個組件包裝起來，并在上邊使用wx:if控制屬性。
 <block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>
 注意： <block/>并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
 wx:if vs hidden
 因為wx:if之中的模板也可能包含數據綁定，所有當wx:if的條件值切換時，MINA有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。
 同時wx:if也是惰性的，如果在初始渲染條件為false，MINA什么也不做，在條件第一次變成真的時候才開始局部渲染。
 相比之下，hidden就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。
 一般來說，wx:if有更高的切換消耗而hidden有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用hidden更好，如果在運行時條件不大可能改變則wx:if較好。

?　　3.列表渲染，類似于TP的volist for循環

默認下：使用wx:for="{{變量名}}"嵌套到標簽內，循環；
默認index為數組的key，item為value值；可以通過wx:for-index="i"更改為i,wx:for-item="vo"更改為vo值；

在組件上使用wx:for控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。默認數組的當前項的下標變量名默認為index，數組當前項的變量名默認為item<view wx:for="{{items}}">{{index}}: {{item.message}}
</view>Page({items: [{message: 'foo',},{message: 'bar'}]
})使用wx:for-item可以指定數組當前元素的變量名使用wx:for-index可以指定數組當前下標的變量名：<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}
</view>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>block wx:for類似block wx:if，也可以將wx:for用在<block/>標簽上，以渲染一個包含多節點的結構塊。例如：<block wx:for="{{[1, 2, 3]}}"><view> {{index}}: </view><view> {{item}} </view>
</block>wx:key如果列表中項目的位置會動態改變或者有新的項目添加到列表中，并且希望列表中的項目保持自己的特征和狀態（如 <input/> 中的輸入內容，<switch/> 的選中狀態），需要使用 wx:key 來指定列表中項目的唯一的標識符。wx:key 的值以兩種形式提供字符串，代表在 for 循環的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數字，且不能動態改變。保留關鍵字 *this 代表在 for 循環中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數字，如：當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，并且提高列表渲染時的效率。如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。示例代碼：<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button><switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>Page({data: {objectArray: [{id: 5, unique: 'unique_5'},{id: 4, unique: 'unique_4'},{id: 3, unique: 'unique_3'},{id: 2, unique: 'unique_2'},{id: 1, unique: 'unique_1'},{id: 0, unique: 'unique_0'},],numberArray: [1, 2, 3, 4]},switch: function(e) {const length = this.data.objectArray.lengthfor (let i = 0; i < length; ++i) {const x = Math.floor(Math.random() * length)const y = Math.floor(Math.random() * length)const temp = this.data.objectArray[x]this.data.objectArray[x] = this.data.objectArray[y]this.data.objectArray[y] = temp}this.setData({objectArray: this.data.objectArray})},addToFront: function(e) {const length = this.data.objectArray.lengththis.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)this.setData({objectArray: this.data.objectArray})},addNumberToFront: function(e){this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)this.setData({numberArray: this.data.numberArray})}
})

　　4. 微信小程序模板(template)

模板WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調用。
定義模板使用name屬性，作為模板的名字。然后在<template/>內定義代碼片段，如：<!--index: intmsg: stringtime: string
-->
<template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view>
</template>使用模板使用is屬性，聲明需要的使用的模板，然后將模板所需要的data傳入，如：<template is="msgItem" data="{{...item}}"/>Page({data: {item: {index: 0,msg: 'this is a template',time: '2016-09-15'}}
})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>

　4. 微信小程序事件

事件是視圖層到邏輯層的通訊方式。
事件可以將用戶的行為反饋到邏輯層進行處理。
事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
事件對象可以攜帶額外信息，如id, dataset, touches。

  1 事件的使用方式
  2 
  3     在組件中綁定一個事件處理函數。 
  4 
  5 如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。
  6 
  7 <view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
  8 
  9     在相應的Page定義中寫上相應的事件處理函數，參數是event。 
 10 
 11 Page({
 12   tapName: function(event) {
 13     console.log(event)
 14   }
 15 })
 16 
 17     可以看到log出來的信息大致如下
 18 
 19     {
 20     "type": "tap",
 21     "timeStamp": 1252,
 22     "target": {
 23       "id": "tapTest",
 24       "offsetLeft": 0,
 25       "offsetTop": 0,
 26       "dataset": {
 27        "hi": "MINA"
 28       }
 29     },
 30     "currentTarget": {
 31       "id": "tapTest",
 32       "offsetLeft": 0,
 33       "offsetTop": 0,
 34       "dataset": {
 35         "hi": "MINA"
 36       }
 37     },
 38     "touches": [{
 39       "pageX": 30,
 40       "pageY": 12,
 41       "clientX": 30,
 42       "clientY": 12,
 43       "screenX": 112,
 44       "screenY": 151
 45     }],
 46     "detail": {
 47       "x": 30,
 48       "y": 12
 49     }
 50     }
 51 
 52 事件詳解
 53 事件分類
 54 
 55 事件分為冒泡事件和非冒泡事件
 56 
 57     冒泡事件：當一個組件上的事件被觸發后，該事件會向父節點傳遞。
 58     非冒泡事件：當一個組件上的事件被觸發后，該事件不會向父節點傳遞。 
 59 
 60 WXML的冒泡事件列表：
 61 類型     觸發條件
 62 touchstart     手指觸摸
 63 touchmove     手指觸摸后移動
 64 touchcancel     手指觸摸動作被打斷，如來電提醒，彈窗
 65 touchend     手指觸摸動作結束
 66 tap     手指觸摸后離開
 67 longtap     手指觸摸后，超過350ms再離開
 68 
 69 注：除上表之外的其他組件自定義事件都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(詳見各個組件)
 70 事件綁定
 71 
 72 事件綁定的寫法同組件的屬性，以key、value的形式。
 73 
 74     key以bind或catch開頭，然后跟上事件的類型，如bindtap, catchtouchstart
 75     value是一個字符串，需要在對應的Page中定義同名的函數。不然當觸發事件的時候會報錯。 
 76 
 77 bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
 78 
 79 如在下邊這個例子中，點擊inner view會先后觸發handleTap1和handleTap2(因為tap事件會冒泡到middle view，而middle view阻止了tap事件冒泡，不再向父節點傳遞)，點擊middle view會觸發handleTap2，點擊outter view會觸發handleTap1。
 80 
 81 <view id="outter" bindtap="handleTap1">
 82   outer view
 83   <view id="middle" catchtap="handleTap2">
 84     middle view
 85     <view id="inner" bindtap="handleTap3">
 86       inner view
 87     </view>
 88   </view>
 89 </view>
 90 
 91 事件對象
 92 
 93 如無特殊說明，當組件觸發事件時，邏輯層綁定該事件的處理函數會收到一個事件對象。
 94 
 95 事件對象的屬性列表：
 96 屬性     類型     說明
 97 type     String     事件類型
 98 timeStamp     Integer     事件生成時的時間戳
 99 target     Object     觸發事件的組件的一些屬性值集合
100 currentTarget     Object     當前組件的一些屬性值集合
101 touches     Array     觸摸事件，觸摸點信息的數組
102 detail     Object     額外的信息
103 CustomEvent 自定義事件對象屬性列表（繼承 BaseEvent）：
104 屬性    類型    說明
105 detail    Object    額外的信息
106 
107 TouchEvent 觸摸事件對象屬性列表（繼承 BaseEvent）：
108 屬性    類型    說明
109 touches    Array    觸摸事件，當前停留在屏幕中的觸摸點信息的數組
110 changedTouches    Array    觸摸事件，當前變化的觸摸點信息的數組
111 
112 特殊事件： <canvas/> 中的觸摸事件不可冒泡，所以沒有 currentTarget。
113 
114 type
115 通用事件類型
116 timeStamp
117 
118 該頁面打開到觸發事件所經過的毫秒數。
119 target
120 
121 觸發事件的源組件。
122 屬性     說明
123 id     事件源組件的id
124 dataset     事件源組件上由data-開頭的自定義屬性組成的集合
125 offsetLeft, offsetTop     事件源組件的坐標系統中偏移量
126 currentTarget
127 
128 事件綁定的當前組件。
129 屬性    類型    說明
130 id    String    當前組件的id
131 tagName    String    當前組件的類型
132 dataset    Object    當前組件上由data-開頭的自定義屬性組成的集合
133 
134 說明： target 和 currentTarget 可以參考上例中，點擊 inner view 時，handleTap3 收到的事件對象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件對象 target 就是 inner，currentTarget 就是 middle。
135 dataset
136 
137 在組件中可以定義數據，這些數據將會通過事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉成小寫)如data-element-type，最終在 event.target.dataset 中會將連字符轉成駝峰elementType。
138 
139 示例：
140 
141 <view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
142 
143 Page({
144   bindViewTap:function(event){
145     event.target.dataset.alphaBeta === 1 // - 會轉為駝峰寫法
146     event.target.dataset.alphabeta === 2 // 大寫會轉為小寫
147   }
148 })
149 
150 touches
151 
152 touches 是一個數組，每個元素為一個 Touch 對象（canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數組）。 表示當前停留在屏幕上的觸摸點。
153 Touch 對象
154 屬性    類型    說明
155 identifier    Number    觸摸點的標識符
156 pageX, pageY    Number    距離文檔左上角的距離，文檔的左上角為原點 ，橫向為X軸，縱向為Y軸
157 clientX, clientY    Number    距離頁面可顯示區域（屏幕除去導航條）左上角距離，橫向為X軸，縱向為Y軸
158 CanvasTouch 對象
159 屬性    類型    說明    特殊說明
160 identifier    Number    觸摸點的標識符     
161 x, y    Number    距離 Canvas 左上角的距離，Canvas 的左上角為原點 ，橫向為X軸，縱向為Y軸     
162 changedTouches
163 
164 changedTouches 數據格式同 touches。 表示有變化的觸摸點，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。
165 detail
166 
167 自定義事件所攜帶的數據，如表單組件的提交事件會攜帶用戶的輸入，媒體的錯誤事件會攜帶錯誤信息，詳見組件定義中各個事件的定義。

　5. 微信小程序引用

引用兩種方式：
一、import
二、inclode

importimport可以在該文件中使用目標文件定義的template，如：在item.wxml中定義了一個叫item的template：<!-- item.wxml -->
<template name="item"><text>{{text}}</text>
</template>在index.wxml中引用了item.wxml，就可以使用item模板：<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>import的作用域import有作用域的概念，即只會import目標文件中定義的template，而不會import目標文件import的template。如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。<!-- A.wxml -->
<template name="A"><text> A template </text>
</template><!-- B.wxml -->
<import src="A.wxml"/>
<template name="B"><text> B template </text>
</template><!-- C.wxml -->
<import src="B.wxml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>includeinclude可以將目標文件除了<template/>的整個代碼引入，相當于是拷貝到include位置，如：<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/><!-- header.wxml -->
<view> header </view><!-- footer.wxml -->
<view> footer </view>