微信小程序WXML模板语法总结-猿码集

1. 什么是WXML？

WXML是微信小程序里专门用来描述页面结构的一种语言，类似于HTML标签。在WXML中可以使用常见的HTML标签如<view>、<text>等，还有微信小程序自己新增的标签如<button>、<input>等。

1.1 WXML的语法规则：

1. 所有的WXML标签都是小写字母。

2. 所有的WXML标签都是封闭的，即必须有一个结束标签。如果该标签没有内容，则可以使用简化写法。比如<text/>。

3. 所有的WXML标签都可以有属性，属性必须放在开始标签里面。属性的格式为：属性名=“属性值”。


<view id="myId" class="myClass">这是一段文本</view>

上面的例子中，“id”和“class”就是该标签的属性。可以在同一个标签里定义多个属性。另外，WXML中的注释和HTML中的注释是一样的，可以使用””。

1.2 WXML的数据绑定

WXML不仅可以用来描述页面结构，还可以用来绑定数据。WXML中可以通过“{{}}”来绑定变量。

在js文件中，定义一个数据变量，如下：


Page({
  data: {
    message: "Hello World"
  }
})

在WXML文件中，可以把变量绑定到标签内部：


<text>{{message}}</text>

这样，当js文件中的message变量的值改变时，绑定的标签内容也会随之变化。

1.3 WXML的列表渲染

在WXML文件中，可以使用“wx:for”指令来渲染列表。可以把数组中的数据渲染成视图列表。


<view wx:for="{{items}}" wx:key="id">
  <text>{{item.title}}</text>
  <image src="{{item.pic}}"/>
</view>

上面的例子中，“items”是包含若干条数据的数组。使用“wx:for”指令来遍历数组，并将每个数组元素中的数据绑定到视图标签上。

2. WXML中的事件绑定

在WXML文件中，可以为视图标签绑定一些常见的事件，如click、input等。


<button bindtap="tapHandler">点击我</button>

上面的例子中，“button”标签绑定了一个“bindtap”事件，该事件触发后会执行名为“tapHandler”的函数。

2.1 WXML中的事件对象

WXML文件中的事件触发后，会自动传入一个事件对象event，该对象包含了触发事件的一些信息，如id、dataset等。


tapHandler: function(event) {
  console.log(event.currentTarget.id);
  console.log(event.target.dataset.info);
}

上面的例子中，在绑定的事件处理函数中，可以通过“event”对象获取到触发该事件的标签对象的id属性值以及data-* 自定义属性。

3. WXML的模板和组件

除了可以用WXML来描述一整个页面的结构之外，还可以使用WXML来对某个标签片段进行封装，并抽象出一个组件。

3.1 WXML的模板

WXML中的模板就是一个代码片段，可以在多个地方复用。在WXML中定义一个模板，可以使用“template”关键字。


// 在WXML中定义一个模板
<template name="myTemplate">
  <text>{{message}}</text>
</template>
// 在某个标签内部使用这个模板
<view>
  <template is="myTemplate" data="{{message: 'Hello World'}}"/>
</view>

上面的例子中，在WXML文件中定义了一个名为“myTemplate”的模板，然后在某个视图标签内部使用，“message”变量将会被渲染到“text”标签内部。

3.2 WXML的组件

WXML中的组件是一种更加高级的封装形式，可以将一部分页面结构和相关的逻辑抽象成一个独立的实体，可以在多个页面中重复使用。

要定义一个组件需要经过以下几个步骤：

1. 定义一个WXML文件，文件名以“.wxml”结尾。

2. 定义一个WXSS文件，文件名以“.wxss”结尾，用来定义组件外观样式。

3. 定义一个JS文件，文件名以“.js”结尾，用来定义组件的逻辑和数据。

4. 在需要用到该组件的WXML文件中，通过“usingComponents”关键字导入该组件。


// 在WXML文件中引用组件
<using-components name="my-component" src="./my-component.wxml"/>
// my-component.wxml
<view class="my-component">
  <text>{{message}}</text>
</view>
// my-component.wxss
.my-component {
  color: white;
  background-color: #ccc;
}
// my-component.js
Component({
  data: {
    message: "Hello World"
  }
})

上面的例子中，创建了一个名为“my-component”的组件，并在别的WXML文件中引用。

4. WXML的条件渲染

在WXML文件中，可以通过“wx:if”、“wx:else-if”和“wx:else”标签来条件渲染视图。


<view wx:if="{{flag}}">
  <text>如果flag为true，会显示该视图标签</text>
</view>
<view wx:else-if="{{age>30}}">
  <text>如果age>30，会显示该视图标签</text>
</view>
<view wx:else>
  <text>当以上条件都不满足时，会显示该视图标签</text>
</view>

上面的例子中，如果flag变量为true，则会显示第一个view标签，如果不满足，则判断age是否大于30，如果大于，则显示第二个view标签，否则显示第三个view标签。

5. WXML中的样式绑定

与HTML中类似，WXML中也可以绑定样式，可以通过“class”、“style”等属性来设置标签样式。

5.1 WXML中的样式类

在WXML中，可以使用样式类来定义标签的样式，可以将通用的样式规则抽出来作为样式类，在需要使用的标签上添加class属性即可。


// 在WXSS文件中定义样式类
.my-class {
  color: red;
  font-size: 16px;
}
// 在WXML文件中使用样式类
<view class="my-class">Hello World</view>

5.2 WXML中的内联样式

除了使用样式类绑定样式之外，还可以使用内联样式，使用“style”属性可以设定标签的CSS属性。


<view style="width: {{width}}px;height: {{height}}px;background-color: {{color}};">
  Hello World
</view>

上面的例子中，“width”、“height”和“background-color”都是动态绑定的变量，在JS文件中定义后可以在WXML中使用。

6. 总结

本文简要介绍了WXML的基本语法规则以及常见的用法，包括数据绑定、列表渲染、事件绑定、条件渲染、样式绑定等。WXML作为微信小程序中的一种专门用于描述页面结构的语言，为开发小程序提供了丰富的标签和语法，让开发者可以仅使用HTML、CSS、JS就能轻松开发出优秀的小程序。

微信小程序WXML模板语法总结