程序基础实战 10

{{message}}wx:if="{{condition}}"wx:for="{{array}}"templatename=import/include第4章WXML语法课堂讲解《微信小程序开发实战教程（Node.js+MySQL）（AI协同）（微课版）（第2版）》本章内容第4章WXML语法WXML是微信小程序框架设计的一套标签语言，它结合了基础组件和事件系统，可以构建起小程序的页面结构。WXML的语法和功能与HTML相似，但WXML专为微信小程序开发而设计，可以满足小程序的特定需求。WXML提供了数据绑定、条件渲染、列表渲染等功能，使开发者能声明式地描述界面。数据绑定：将数据从逻辑层传递到视图层，实现动态更新页面内容。条件渲染：按条件决定是否渲染某部分内容。列表渲染：用数组生成列表项。在微信小程序开发中，WXML文件常与WXSS和JS文件配合使用，以打造美观且功能丰富的小程序页面。2学习目标第4章WXML语法1掌握数据绑定的方法2掌握条件渲染的方法3掌握列表渲染的方法4掌握定义及使用模板的方法5掌握文件引用方式34.1

数据绑定第4章WXML语法WXML中呈现的动态数据均来自对应页面的data字段。例如，在JS文件中有以下data声明。Page({data:{message:'Hello',id:'item1',condition:true,flag:true,a:1,b:2}})则可在对应的WXML文件中使用相应数据。数据绑定的方法是利用Mustache语法（双大括号）将变量包围起来。44.1

数据绑定（续）第4章WXML语法常用的使用方式如下。（1）绑定组件内容，如下。<view>{{message}}</view>（2）绑定组件属性（需要在双引号和双大括号之内），如下。<viewid="{{id}}"></view>（3）绑定控制属性（需要在双引号和双大括号之内），如下。<viewwx:if="{{condition}}"></view>（4）绑定关键字（需要在双引号和双大括号之内），如下。<checkboxchecked="{{false}}"></checkbox>【注意】不可写为checked="false"，因为"false"会被当作字符串处理，在布尔运算中仍视为真值后代表真值。54.1

数据绑定（续）第4章WXML语法（5）绑定运算，可以在{{}}内进行简单的运算，如下。三元运算。<viewhidden="{{flag?true:false}}">Hidden</view>算数运算。<view>{{a+b}}</view>【注意】数据绑定是单向的。对象状态变化会影响视图，但视图变化不会影响对象状态。64.1

数据绑定（续）第4章WXML语法【演练4.1】编写代码，熟悉数据绑定语法。WXML中的动态数据均来自对应页面的data。数据绑定的实现步骤通常如下。1在JS文件中声明data。Page({data:{stuNo:'20200001'}})2在WXML文件中绑定数据，如果绑定组件内容，则可使用双大括号将变量括起来。<view>{{stuNo}}</view>如果绑定组件属性，则需要将属性放在双引号之内。<viewid="{{stuNo}}"></view>74.1

数据绑定（续）第4章WXML语法【演练4.1】编写代码，熟悉数据绑定语法。下面在实际项目中进行操作。1打开第3章中完成的项目。修改p1.js文件，其内容如图4-1所示。图4-1

p1.js文件的内容代码作用：在data部分声明两个简单变量。84.1

数据绑定（续）第4章WXML语法【演练4.1】编写代码，熟悉数据绑定语法。2修改p1.wxml文件，代码如下。编译运行，运行结果如图4-2所示。<view><view>-展示data数据-</view><view>{{stuNo}}</view><view>{{stuName}}</view></view>图4-2

运行结果代码作用：绑定在data部分声明的变量stuNo和stuName。此处使用双大括号将变量括起来，表示绑定变量内容。94.1

数据绑定（续）第4章WXML语法【演练4.1】编写代码，熟悉数据绑定语法。3修改p1.wxml文件，其内容如图4-3所示，保存并运行文件。代码作用：绑定在data部分声明的变量。此处使用双大括号和双引号将变量包围起来，表示绑定变量属性。对比观察两种绑定数据的语法，可以看到属性（此处为id，其他属性类似）需要放在双引号之内。图4-3

p1.wxml文件的内容104.1

数据绑定（续）第4章WXML语法【演练4.1】编写代码，熟悉数据绑定语法。在“调试器”标签页中选中“Wxml”标签页，在这里可以看到绑定数据后的结果。同时，“模拟器”标签页中会高亮显示相应内容。也可以双击内容或属性的值进行编辑，这样运行时可随时修改变量并观察不同情形下的运行结果，方便调试。当然，这里修改的值都是临时性的，下次运行时将按程序逻辑重新计算，即这里修改的值不会影响页面中data的值。4如图4-4所示，在“调试器”标签页中选中“AppData”标签页，修改stuNo的值，修改结果会立即反映到界面上。图4-4

修改stuNo的值114.1

数据绑定（续）第4章WXML语法【演练4.1】编写代码，熟悉数据绑定语法。在WXML中，普通的属性的绑定是单向的，对象状态变化会影响视图，但视图变化不会影响对象状态。但可用model关键字实现简单数据的双向绑定，如：<inputmodel:value="{{stuNo}}"/>5修改p1.js文件，添加图4-5中阴影部分的代码，即添加一个对象类型的变量student。这里为了方便读者理解和学习，使用了以“对象类型”方式声明和创建变量，操作看上去有些重复，实际开发时可根据具体情况进行设计。图4-5

添加一个对象类型的变量student124.1

数据绑定（续）第4章WXML语法【演练4.1】编写代码，熟悉数据绑定语法。6修改p1.wxml文件，使用以对象类型方式声明的数据，如图4-6所示。编译运行，观察运行结果。【说明】演示如何使用以对象类型方式声明的数据。图4-6

使用以对象类型方式声明的数据134.2

条件渲染第4章WXML语法wx:if是条件渲染语句，用于判断某个条件是否成立。如果元素中wx:if的返回值为true，则渲染这个元素，否则不渲染。可以使用wx:if控制元素的显示和隐藏。其语法格式如下。<viewwx:if="{{condition}}">展示的内容</view>【演练4.2】编写代码，熟悉条件渲染语句。1修改p1.js文件，添加图4-7中阴影部分的代码。代码作用：在data部分声明两个布尔类型的变量，用于控制元素的显示和隐藏。图4-7

修改p1.js文件144.2

条件渲染（续）第4章WXML语法【演练4.2】编写代码，熟悉条件渲染语句。2如图4-8所示，修改p1.wxml文件，添加第一个方框中的代码，编译运行。在“调试器”标签页中选中“AppData”标签页，勾选“isShow”右侧的复选框，在选中和取消选中两种状态之间进行切换，可以看到，当选中该复选框时，会显示相应内容。同样地，勾选“isHidden”右侧的复选框，在选中和取消选中两种状态之间进行切换，可以看到，当选中该复选框时，会隐藏相应内容。可以看到，使用wx:if和hidden都可以控制是否显示数据，但二者之间是有一些区别的。图4-8

修改p1.wxml文件154.2

条件渲染（续）第4章WXML语法这是因为wx:if中的模板可能包含数据绑定语句，所以当wx:if的条件值变化时，框架会进行局部渲染，以确保条件值在变化时被销毁或重新渲染。同时，wx:if是惰性的，如果初始渲染条件为false，则框架什么也不做，仅在条件第一次变为true时，才开始局部渲染。相比之下，hidden组件始终会被渲染，只是简单地控制数据的显示和隐藏。一般来说，wx:if有更高的切换消耗，而hidden有更高的初始渲染消耗。通常项目开发使用wx:if较多，在需要频繁切换的情景下，考虑使用hidden。164.2

条件渲染（续）第4章WXML语法【演练4.2】编写代码，熟悉条件渲染语句。3修改p1.wxml文件，添加block语句，如图4-9所示。图4-9

添加block语句【说明】因为wx:if是控制属性，所以需要将它添加到标签中。如果要一次性判断多个组件标签，则可以使用<block></block>标签将多个组件包围起来，并在其中使用wx:if控制属性。例如：<blockwx:if="{{true}}"><view>view1</view><view>view2</view></block>【注意】block语句不会在页面中做任何渲染，只接收控制属性。174.2

条件渲染（续）第4章WXML语法也可以使用wx:else来进行更复杂的逻辑控制，如图4-10所示。在“调试器”标签页中选中“AppData”标签页，勾选“isShow”右侧的复选框，在选中和取消选中两种状态之间进行切换，可以看到当取消选中该复选框时，会显示“其他情况的数据”。图4-10

使用wx:else进行逻辑控制184.3

列表渲染第4章WXML语法在组件上使用wx:for语句控制属性绑定一个数组，就可以使用数组中各项的数据重复渲染该组件。循环时，当前元素的变量名默认为item，当前元素的下标变量名默认为index。其语法格式如下。<viewwx:for="{{array}}">{{index}}:{{item.字段}}</view>也可以使用wx:for-item修改数组当前元素的变量名（默认item），使用wx:for-index修改数组当前元素的下标的变量名（默认index）。其语法格式如下。<viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itemName">{{idx}}:{{itemName.字段}}</view>194.3

列表渲染（续）第4章WXML语法如果列表中元素的位置会动态改变，或者有新的元素添加到列表中，并且希望列表中的元素保持自己的特征和状态（如输入框内容、开头状态等），则需要在wx:for语句中使用wx:key指定列表中元素的唯一标识符。wx:key取值方式如下。（1）字符串形式：指定列表项中某个属性名作为唯一标识。该属性值必须在列表中独一无二，且不可在渲染过程中发生变化。（2）保留关键字*this：直接使用列表项本身作为唯一标识。要求列表项本身是唯一的字符串或数字。在实际开发中，简单类型的数组通常满足这一条件。204.3

列表渲染（续）第4章WXML语法当数据发生变化并触发重新渲染时，框架会根据wx:key对组件进行校正：带有key的列表项会被重新排序，而不是被销毁后重新创建，从而保证组件的状态得以保留，并提升列表渲染的效率。如果未设置wx:key，系统会给出警告；但在确定列表内容固定不变，或项目顺序对界面效果影响不大的情况下，可以忽略该提示。214.3

列表渲染（续）第4章WXML语法【演练4.3】编写代码，熟悉列表渲染语句。1修改p1.js文件，添加图4-11中方框所示的代码。代码作用：在data部分声明一个students数组。2修改p1.wxml文件，添加wx:for语句，如图4-12所示，编译运行。观察运行结果，可以看到循环输出了students中的每一项，包括stuNo、stuName和index。图4-11

添加代码图4-12

添加wx:for语句224.4

模板第4章WXML语法WXML提供了模板（Template）功能，可以在模板中定义代码片段，并在不同地方调用，实现代码重用。具体操作如下。（1）定义模板。使用name属性命名模板，并在<template></template>内定义代码片段。<templatename="studentMsg">代码块</template>（2）使用模板。使用is属性声明需要使用的模板，并传入所需数据。注意，传入数据时，元素前需使用“...”进行解构。234.4

模板（续）第4章WXML语法【演练4.4】编写代码，熟悉如何定义及使用模板。修改p1.wxml文件，定义和使用模板，如图4-13所示，编译运行，观察运行结果。图4-13

定义和使用模板【说明】①可以在多个位置使用模板。②也可以在其他文件中使用模板，参考【演练4.5】。③可将模板定义在单独的文件中，以增强程序的可读性。244.5

引用第4章WXML语法WXML提供了两种文件引用方式：import和include。import语句可以导入目标文件中定义的模板。其语法格式如下。<importsrc="包含模板定义的文件"/>import有作用域的概念，即只导入目标文件中定义的模板。例如，CimportB，BimportA，表示C可以使用B定义的模板，B可以使用A定义的模板，但是C不能使用A定义的模板。include可以将目标文件中除<template/>之外的整个代码导入，相当于将除<template/>之外的内容复制到当前文件中。其语法格式如下。<includesrc="wxml目标文件"/>254.5

引用（续）第4章WXML语法【演练4.5】编写代码，熟悉如何使用import语句导入模板。1修改p2.js文件，其内容如图4-14所示。图4-14

p2.js文件的内容2修改p2.wxml文件，其内容如下。<impor