小程序講解~wxml

WXML解釋

類似于網(wǎng)頁編程HTML文件，但它是微信自定義的文件，它于HTML標簽不同。它還代表著組件。

WXML與HTML區(qū)別

1.html 常用標簽是div,p,span.開發(fā)者在寫一個頁面的時候可以根據(jù)這些基礎標簽組合成不同組件。wxml直接使用標簽，不需要單個組合。常用標簽view，button，text等等。

2.多了wx:if這樣的屬性以及{{變量}}這樣的表達式。使用MVVM的開發(fā)模式，把渲染和邏輯分離。

<text>{{msg}}</text>
js管理狀態(tài)
this.setData({msg:"Hello World"})

WXML在微信中具體使用方式：

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

xx.wxml
<view>{{message}}</view>
xx.js
Page({
data:{
message:"數(shù)據(jù)綁定"
}
})

• 列表渲染wx:for

xx.wxml
<view wx:for="{{array}}">{{item}}</view
xx.js
Page({
data:{
array:[1,2,3,4,5]
}
})

• 條件渲染wx:if

xx.wxml
<view wx:if="{{name=="王"}}">王</view
<view wx:elif="{{name=="晟"}}">晟</view>
xx.js
Page({
data:{
name:"晟"
}
})

• 模板

xx.wxml
<template name="moban">
<view>
我是模板:{{moban}}
</view>
</template>
<template is="moban" data="{{....mobanA}}"></template>
<template is="moban" data="{{....mobanB}}"></template>
xx.js
Page({
data:{
mobanA:{moban:"復制品A"},
mobanB:{moban:"復制品B"}
}
})

• 事件

xx.wxml
<view bindtap="shijian">{{tan}}</view>
xx.js
Page({
data:{
tan:""
},
shijian:function(e){
this.setData(
{
tan:"彈出事件"
})
}
})