WeChat小程序基础篇~wxml

小程序讲解~wxml

WXML解释

类似于网页编程HTML文件，但它是微信自定义的文件，它于HTML标签不同。它还代表着组件。

WXML与HTML区别

1.html 常用标签是div,p,span.开发者在写一个页面的时候可以根据这些基础标签组合成不同组件。wxml直接使用标签，不需要单个组合。常用标签view，button，text等等。

2.多了wx:if这样的属性以及{{变量}}这样的表达式。使用MVVM的开发模式，把渲染和逻辑分离。

{{msg}}
js管理状态
this.setData({msg:"Hello World"})

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

• 数据绑定

xx.wxml
{{message}}
xx.js
Page({
data:{
message:"数据绑定"
}
})

• 列表渲染wx:for

xx.wxml
{{item}}

• 条件渲染wx:if

xx.wxml
王晟
xx.js
Page({
data:{
name:"晟"
}
})

• 模板

xx.wxml



xx.js
Page({
data:{
mobanA:{moban:"复制品A"},
mobanB:{moban:"复制品B"}
}
})

• 事件

xx.wxml
{{tan}}
xx.js
Page({
data:{
tan:""
},
shijian:function(e){
this.setData(
{
tan:"弹出事件"
})
}
})