(1)什么是WXML

官方描述：WXML（WXML）是框架设计的一套标签语言。结合基本组件和事件系统，可以构建页面的结构。

之前我们提到过，WXML可以理解为我们传统页面中的HTML。它是微信提供的一套标签语言。可以说它是我们小程序的脸面（虽然没有CSS装饰）。一定要亮丽漂亮），正在开发的WXML页面作为我们一些逻辑行为的入口和效果展示的载体。

说得通俗一点：你看到的小程序页面是什么样子的（不涉及幕后做了什么动作，只是表面），是通过WXML（主体）+WXSS（美化）来实现的

在这篇文章中，我们主要介绍WXML的数据绑定、操作等，但在学习之前，显然我们需要了解几个常见的标签。后面我们会总结一些常用的标签，下面会用到。抵达的人包括：

，还有一些标签。你直接阅读官网文档即可。这是非常清楚的。我们这里重点讨论一些标签语法问题。

官网-WXML语法文档

官网-组件文档

<text>这是text标签1text> <text>这是text标签2text> <view>这是div标签1view> <view>这是div标签2view> <view> <image mode='widthFix' style='width:60%' src='https://www.ideal-20.cn/medias/avatar.jpg'>image> view>

看看效果

(2)数据绑定

虽然不涉及页面美化和复杂标签，但是现在已经可以构建一个非常简单的静态页面了。归根结底，我们都需要与前后台数据进行交互，而微信小程序则为我们提供了很多有用的方法来快速进行数据绑定操作。

有一个先决条件。我们先模拟一些数据。我们只需要在页面的js文件中的data对象中定义小程序初始化的数据即可。例如，在下面的代码中，我们可以用一些常见的数据类型来模拟它。

Page({ /** * 页面的初始数据 */ data: { msg: "你好，微信小程序", status: 100, isLogin: true, person:{ name: "张三", age: 22, profession: "student" }, isChecked: true }, })

（一）常见类型常见写法

如何在WXML标签组件中绑定数据其实很简单。在微信小程序中，使用{{}}来解析刚刚在JS中模拟的变量。

注意：通过{{}}直接解析的变量都是在页面js文件中的Page-->data下。

答：字符串

字符串内容可以通过用两个大括号括起来直接接收。上面我们有这样的定义：

msg：“你好，微信小程序”，所以只需将msg括起来即可获取后续值

<view>{{msg}}view>

B：数值

也可以直接获取数值

<view>{{status}}view>

C：布尔类型

类型的第一个代码是直接打印出它的类型true或者

<view>{{isLogin}}view>

下面的组合可以达到选择或不选择的效果

<view> <checkbox checked="{{isChecked}}">checkbox> view>

D：物体

如果直接打印对象，会输出一个类型，所以如果想要获取对象的属性值，就必须指定具体的属性。

<view>{{person.name}}view> <view>{{person.age}}view> <view>{{person.profession}}view>

看看上面所有的绑定效果

(2) 在组件属性中

例如，我们的视图组件的 id 值前缀是固定的 user- 后面是用户的序列号。这时候就可以通过变量巧妙的解析成属性。

注意：不要随意添加空格，否则可能会导致读取失败。例如：

<view id="user-{{uid}}">view>

看一下Wxml的源代码id。该属性已被拼接。这种方法也常用于or。通过三元运算，可以很好的实现一些要求。我们下面会提到。

(3) 操作

首先我们还是定义一些数据，三个整数，两个字符串

Page({ data: { a: 11, b: 22, c: 33, msg: "姓名", name: "张三" }, })

(1)算术运算

直接在{{}}中进行加、减、乘、除等计算，直接得到结算结果，例如：

<view>{{a + b + c}}view> <view>{{a + b}} + {{c}}view>

(2)字符串操作

如果是字符串类型数据，使用+进行运算，结果就是拼接的效果。

<view>{{'a' + 'b' + 'c'}}view> <view>{{'11' + '22' + '33'}}view> <view>{{msg + '：' +name}}view>

(3)逻辑判断

这是一个常见的if判断。例如，如果使用 wx:if 属性，则仅当后续表达式为 true 并且大于 0 时才会显示文本 a。

<view wx:if="{{a > 0}}">a 大于 0view>

(4)三元运算

三元运算的应用场景还是很多的（方程？：真实案例、案例）

<view>{{11 + 22 === 33 ? true : false}}view> <view>{{11 + 22 === 33 ? '正确' : '错误'}}view> <view>{{a + b === c ? '等式成立' : '等式不成立'}}view>

三元补差：

通过解析属性中的变量，可以根据变量的值指定不同的名称，以显示不同的样式。

比如我们的css样式是这样的。它是我们共享的，所以可以直接写在属性中。是否使用 icon-back 或 icon- 可以通过变量进行操作。例如，我们下面的内容是在js中。 data 中定义的布尔变量

.iconfont {......} .icon-back:before {......} .icon-remove:before {......}

当为true时，执行是这样的=“icon-”。如果使用另一种，我们可以通过控制变量值来不同地显示。

查看以上所有操作的执行结果（不包括补充结果）

(4)列表循环(列表渲染) (1)模拟数据

我们还是给出一些模拟数据。一个是这样的对象，里面有一些属性，另一个是学生集合，其中包含三个学生的数据。

Page({ data: { person:{ pid: 1, name: "张三", age: 22, profession: "student" }, studentList:[{ sid:1, name:"汤姆", gender:"男" },{ sid:2, name:"杰克", gender:"男" },{ sid:3, name:"玛丽", gender:"女" } ] }, })

如果我们在后台接收到一些集合或者数组，循环遍历是一个很常见的操作。

（二）正式使用

在组件（标签）上使用wx:for，可以绑定数组或者集合内容，组件可以用数组中每一项的数据重复渲染。

先举个例子

<view> <view wx:for="{{studentList}}" wx:for-item="item" wx:for-index="index" wx:key="sid"> {{index}} --- {{item.name}} view> view>

我们分别解释一下：

如果传递此键值，则会弹出警告。

(3) 嵌套使用补充说明

嵌套的正确写法

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i" wx:key="*this"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j" wx:key="*this"> <view wx:if="{{i <= j}}" wx:key="*this"> {{i}} * {{j}} = {{i * j}} view> view> view>

再举个例子（遍历一个对象的所有属性）：

<view> <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="pid"> {{key}} --- {{value}} view> view>

看看执行效果

(4)循环(渲染)标签

如果我们使用两个不同的组件（标签）来看看最终渲染的结果有什么不同？

方法一（查看标签）

<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="pid"> {{key}} --- {{value}} view>

<view> pid --- 1 view> <view> name --- 张三 view> <view> age --- 22 view> <view> profession --- student view>

方法二（标签）

<block wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="pid"> {{key}} --- {{value}} block>

pid --- 1 name --- 张三 age --- 22 profession --- studen

通过控制台中的Wxml界面可以看到，只有在视图组件下遍历内容时，才真正生成dom结构。如果直接使用的话，内容只是被写入了几次，并不会成为真正的dom元素。

（5）逻辑判断（条件渲染） （1）用法

没有什么难以理解的。无非就是一些逻辑上的判断。看个例子就清楚了。

注：是用js模拟的数据。它被赋予 true 或其他值，例如 null。根据逻辑值显示不同的内容。

<view wx:if="{{isLogin == true}}">已经登录，逻辑为 trueview> <view wx:elif="{{isLogin == false}}">未登录，逻辑为 falseview> <view wx:else>不确定逻辑view>

（二）补充

附加用法()：

可以通过上面的if else等来控制视图等组件的显示，还有一个属性也可以根据逻辑值来控制组件的显示。

比如你传入一个，就会显示出来。

<view hidden="{{false}}">不隐藏view>