html和wxml标签对比,微信小程序笔记（2）：wxml相比于html的扩展

wxml的概述

WXML(WeiXin Markup Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

与html不同的是，为了方便小程序的开发，wxml配合小程序渲染层与逻辑层分离的理念，新增了数据绑定、列表渲染、条件渲染、模板、引用功能。

数据绑定

小程序为了做到数据与逻辑的分离，可以在wxml中使用在js中定义的变量名，并且通过在js中调用setData的方法实时改变小程序的页面状态！

具体写法如下:

wxml文件中

{{message}}

js文件中

Page({

data: {

message: 'nihao!'

}

})

change:function()//要改变页面中message的内容只要绑定该事件即可！

{

this.setData({

message:"zaijian!"

})

}

条件渲染

在wxml中可以通过条件渲染来实现一些简单的逻辑交互。

具体的条件渲染属性有三个:wx:if``wx:elif``wx:else

具体写法如下:

wxml文件中

1

2

3

hidden与wx:if的选择与取舍

hidden的功能与wx:if非常相似，都可以控制某些条件来控制控件的渲染与隐藏。

不同的是，对于hidden来说不管最终是否被隐藏，它都会把控件先渲染出来。而wx:if则不然，如果条件判断不需要渲染，那么wx:if就不会渲染这个控件。

所以，在需要频繁切换控件的渲染与隐藏时，建议使用hidden，否则使用wx:if更好一些。

列表渲染

类似于一般编程语言的for循环。如果小程序的开发中可以直接使用wx:for来渲染列表中的内容，而不用重复的编写重复的html代码。

具体写法如下:

wxml文件中：

{{index}}: {{item.message}}

js文件中:

Page({

data: {

array: [{

message: 'foo',

}, {

message: 'bar'

}]

}

})

模板

暂未接触，待补充

引用

同上

原文：https://www.cnblogs.com/z-y-k/p/12393482.html