4 微信小程序pages 視圖層 wxml配置使用_W

1、第四講微信小程序 pages 視圖層 .wxml 配置使用學習要點： 1. 數(shù)據(jù)綁定2. 條件語句3. 列表循環(huán)wx:ifwx:elif wx:elsewx:for4. 模板 WXML 提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調用。 5. 模板在外部引用 importinclude合作網站：/ (千峰教育)合作網站：www.ionic.wang(Ionic 中文網)主講老師：樹根1. 數(shù)據(jù)綁定 WXML 中的動態(tài)數(shù)據(jù)均來自對應 Page 的 data。 簡單綁定 數(shù)據(jù)綁定使用 Mustache 語法（雙大括號）將

2、變量包起來，可以作用于： 組件屬性(需要在雙引號之內) Page(data: id: 0) message Page(data: message: Hello MINA!)控制屬性(需要在雙引號之內)運算可以在 內進行簡單的運算，支持的有如下幾種方式： 組合 也可以在 Mustache 內直接進行組合，構成新的對象或者數(shù)組。 數(shù)組 item Page(data: 算數(shù)運算 a + b + c + d Page(data: a: 1,b: 2,c: 3)view 中的內容為 3 + 3 + d。邏輯判斷 5 字符串運算 hello + name Page(data:name: MINA) Pag

3、e(data: condition: true)zero: 0)最終組合成數(shù)組0, 1, 2, 3, 4。 對象 Page(data: a: 1,b: 2)最終組合成的對象是 for: 1, bar: 2也可以用擴展運算符來將一個對象展開 Page(data: obj1: a: 1,b: 2,obj2: c: 3,d: 4)最終組合成的對象是 a: 1, b: 2, c: 3, d: 4, e: 5。 如果對象的 key 和 value 相同，也可以間接地表達。 Page(data: foo: my-foo,bar: my-bar)最終組合成的對象是 foo: my-foo, bar:my-b

4、ar。 2. 條件渲染 wx:ifwx:elifwx:elsewx:if在框架中，我們用 wx:if=condition 來判斷是否需要渲染該代碼塊： 也可以用 wx:elif 和 wx:else 來添加一個 else 塊： block wx:if因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上。但是如果我們想一次性判斷多個組件標簽， 我們可以使用一個 標簽將多個組件包裝起來，并在上邊使用 wx:if 控制屬性。 注意： 并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬 性。 3. 列表循環(huán) wx:for在組件上使用 wx:for 控制屬性綁定一個數(shù)組，即可

5、使用數(shù)組中各項的數(shù)據(jù)重復渲染該組件。 view1 view2 5 1 2 2 3 True 默認數(shù)組的當前項的下標變量名默認為 index，數(shù)組當前項的變量名默認為 item使用 wx:for-item 可以指定數(shù)組當前元素的變量名使用 wx:for-index 可以指定數(shù)組當前下標的變量名：wx:for 也可以嵌套，下邊是一個九九乘法表block wx:forview wx:if=i i * j = i * jidx: itemName.messageindex: item.message Page(data: items: message: foo, message: bar)類似 blo

6、ck wx:if，也可以將 wx:for 用在標簽上，以渲染一個包含多節(jié)點的結構塊。例如：4.模板WXML 提供模板（template），可以在模板中定義代碼片段，然后在不 同的地方調用。定義模板 使用 name 屬性，作為模板的名字。然后在內定義代碼片段，如：使用模板 使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入，如： Page(data: item: index: 0,msg: this is a template, time: 2016-09-15) index: msg Time: time index: item is 屬性可以使用 Mustache 語

7、法，來動態(tài)決定具體需要渲染哪個模板： 模板的作用域 模板擁有自己的作用域，只能使用 data 傳入的數(shù)據(jù)。5.模板在外部引用WXML 提供兩種文件引用方式import 和 include。 importimport 可以在該文件中使用目標文件定義的 template，如：在 item.wxml 中定義了一個叫item 的 template： 在 index.wxml 中引用了 item.wxml，就可以使用 item 模板：import 的作用域 import 有作用域的概念，即只會 import 目標文件中定義的 template，而不會 import 目標文件 text odd even import 的 template 。如：C import B，B import A，在 C 中可以使用 B 定義的 template，在 B 中可以使用 A 定義的 template， 但是 C 不