WXML

WXML(WeiXin Markup Language)是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。

數據綁定

WXML 中的動態數據均來自對應 Page 的 data。

{{ message }}

Page({

data: {

message: 'Hello MINA!',

id: 0,

condition: true,

}

})

特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型后代表真值。

運算

可以在 {{}} 內進行簡單的運算，支持的有如下幾種方式：

Hidden

1

2

3

view1

view2

{{a + b}} + {{c}} + d

{{"hello" + name}}

{{object.key}} {{array[0]}}

Page({

data: {

a: 1,

b: 2,

c: 3，

name: 'MINA'，

object: {

key: 'Hello '

},

array: ['MINA']，

}

})

wx:if 與 hidden的區別

因為 wx:if 之中的模板也可能包含數據綁定，所有當 wx:if 的條件值切換時，框架有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。

同時 wx:if 也是惰性的，如果在初始渲染條件為 false，框架什么也不做，在條件第一次變成真的時候才開始局部渲染。

相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好

組合

也可以在 Mustache 內直接進行組合，構成新的對象或者數組。

.....這個暫時沒有用過不寫。

列表渲染

wx:for

在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。

默認數組的當前項的下標變量名默認為 index，使用 wx:for-index 可以自定義數組當前下標的變量名, 數組當前項的變量名默認為 item。使用 wx:for-item 可以自定義數組當前元素的變量名：

{{index}}: {{item.product_name}}

{{productsIndex}}: {{productsItem.product_name}}

Page({

data: {

products: [{

product_name: 'book',

}, {

product_name: 'computer'

}]

}

})

wx:for也可以進行嵌套循環。九九乘法表。

{{i}} * {{j}} = {{i * j}}

我認為的雙層循環。注意添加 wx:key="key"來防止報錯。

{{shopgroupcart.shop_name}} >

{{shopcart.product_name}}

￥ {{shopcart.promote_price}}

這里有很多循環的注意事項 暫時不提及。

模板

還沒有用過暫時不寫。

事件

事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。事件對象可以攜帶額外信息，如 id, dataset, touches。

Click me!

Page({

//事件處理函數

tapName: function(e) {

e.currentTarget.dataset.id ==== WeChat

e.currentTarget.dataset.alphaBeta === 1 // - 會轉為駝峰寫法

e.currentTarget.dataset.alphabeta === 2 // 大寫會轉為小寫

console.log(e)

}

})

常用的事件是tap(手指觸摸后馬上離開),事件綁定的方法是bind+tap,或者catch+tap,bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

tap屬于冒泡事件類型。

引用

引用是配合模板一起用的 暫時沒有用到。

總結

以上是生活随笔為你收集整理的wxml 判断 小程序_微信小程序WXML-小样儿960的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。