wxml 判断 小程序_微信小程序WXML-小样儿960
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: LayerNorm
- 下一篇: ADO.NET 概述