WXML

WXML(WeiXin Markup Language)是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。

數(shù)據(jù)綁定

WXML 中的動(dòng)態(tài)數(shù)據(jù)均來自對(duì)應(yīng) Page 的 data。

{{ message }}

Page({

data: {

message: 'Hello MINA!',

id: 0,

condition: true,

}

})

特別注意：不要直接寫 checked="false"，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成 boolean 類型后代表真值。

運(yùn)算

可以在 {{}} 內(nèi)進(jìn)行簡(jiǎn)單的運(yùn)算，支持的有如下幾種方式：

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的區(qū)別

因?yàn)?wx:if 之中的模板也可能包含數(shù)據(jù)綁定，所有當(dāng) wx:if 的條件值切換時(shí)，框架有一個(gè)局部渲染的過程，因?yàn)樗鼤?huì)確保條件塊在切換時(shí)銷毀或重新渲染。

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

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

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

組合

也可以在 Mustache 內(nèi)直接進(jìn)行組合，構(gòu)成新的對(duì)象或者數(shù)組。

.....這個(gè)暫時(shí)沒有用過不寫。

列表渲染

wx:for

在組件上使用 wx:for 控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。

默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，使用 wx:for-index 可以自定義數(shù)組當(dāng)前下標(biāo)的變量名, 數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item。使用 wx:for-item 可以自定義數(shù)組當(dāng)前元素的變量名：

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

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

Page({

data: {

products: [{

product_name: 'book',

}, {

product_name: 'computer'

}]

}

})

wx:for也可以進(jìn)行嵌套循環(huán)。九九乘法表。

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

我認(rèn)為的雙層循環(huán)。注意添加 wx:key="key"來防止報(bào)錯(cuò)。

{{shopgroupcart.shop_name}} >

{{shopcart.product_name}}

￥ {{shopcart.promote_price}}

這里有很多循環(huán)的注意事項(xiàng) 暫時(shí)不提及。

模板

還沒有用過暫時(shí)不寫。

事件

事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。事件對(duì)象可以攜帶額外信息，如 id, dataset, touches。

Click me!

Page({

//事件處理函數(shù)

tapName: function(e) {

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

e.currentTarget.dataset.alphaBeta === 1 // - 會(huì)轉(zhuǎn)為駝峰寫法

e.currentTarget.dataset.alphabeta === 2 // 大寫會(huì)轉(zhuǎn)為小寫

console.log(e)

}

})

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

tap屬于冒泡事件類型。

引用

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。