微信小程序开发实战教程课件

第4章WXML语法微信小程序开发实战教程（PHP+Laravel+MySQL）（微课版）学习目标掌握数据绑定的方法掌握条件渲染的用法掌握列表渲染的用法掌握定义及引用模板的方法掌握include引用方式123454.1数据绑定微信小程序是通过什么方法来实现数据绑定的呢？例如，一个文本框绑定JS文件中data声明的变量value的值的代码如下。<inputvalue="{{value}}"/>4.1数据绑定【演练】编写代码以熟悉数据绑定语法WXML中的动态数据均来自对应Page的data。其实现步骤通常如下。在JS文件中声明data，例如：Page({data:{stuNo:'20200001'}})4.1数据绑定在WXML文件中绑定数据，如果是绑定内容，则可使用Mustache语法（双大括号）将变量包括起来，例如：<view>{{stuNo}}</view>如果是绑定组件属性，则需将属性包括在双引号之内，例如：<viewid="{{stuNo}}"></view>4.1数据绑定在App()函数中添加代码。其中，“data1:'全局变量1'”声明了一个变量data1，并在onLaunch()函数中使用“console.log(this.data1);”语句输出该变量的值。在“Console”标签页中可以观察到输出了该变量的值。4.1数据绑定编写p1.wxml，其内容如图所示，保存并运行文件。4.1数据绑定如图所示，在“调试器”标签页中选中“AppData”标签页，修改stuNo的值，可以立即反映到运行界面上。4.1数据绑定修改p1.js文件，添加图中阴影部分所示的代码，即添加一个对象类型变量student。4.1数据绑定修改p1.wxml文件，使用对象类型声明的数据，如图所示。保存文件，观察运行结果。代码说明：这里学习如何使用对象类型声明的数据。4.2条件渲染【演练】编写代码以熟悉条件渲染语句修改p1.js文件，添加图中阴影部分所示的代码。代码作用：在data部分声明两个布尔变量，用于控制显示、隐藏元素。4.2条件渲染修改p1.wxml文件，添加第一个方框中的代码，保存文件。4.2条件渲染修改p1.wxml文件，添加block语句。4.2条件渲染也可以使用wx:else来进行更多的逻辑控制。4.3列表渲染<viewwx:for="{{array}}">{{index}}:{{item.字段}}</view>在组件上使用wx:for控制属性绑定一个数组，就可以使用数组中各项的数据重复渲染该组件。循环时，当前项的变量名默认为item，当前项的下标变量名默认为index。其语法格式如下。4.3列表渲染<viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itemName">{{idx}}:{{itemName.字段}}</view>也可以使用wx:for-item指定数组当前元素的默认变量名item，使用wx:for-index指定数组当前下标的默认变量名index。其语法格式如下。如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如input中输入的内容，switch的选中状态），则需要使用wx:key来指定列表中项目的唯一标识符。4.3列表渲染wx:key的值以以下两种形式提供。12字符串：表示for循环的array中item的某个property，该property的值需要是列表中唯一的字符串或数字，且不能动态改变。保留关键字*this：表示for循环中的item本身。这种表示需要item本身是一个唯一的字符串或者数字，实际开发时通常都可满足该条件。4.3列表渲染【演练】编写代码以熟悉列表渲染语句修改p1.js文件，添加图中方框所示的代码。代码作用：在data部分声明一个students数组4.3列表渲染修改p1.wxml文件，添加wx:for语句，保存文件。自行观察运行结果，可以看到循环输出了students中的每一项，包括stuNo、stuName和index。4.4模板WXML提供了模板（template）功能，可以在模板中定义代码片段，并在不同的地方调用这些代码，达到重用的目的。具体操作如下。12定义模板：使用name属性作为模板的名称，并在<template>内定义代码片段。使用模板：使用is属性声明需要使用的模板，并将模板所需要的data传入。注意，传入data时，item前面使用“...”解构展开。4.4模板【演练】编写代码以熟悉如何定义及使用模板修改p1.wxml文件，定义和使用模板，保存文件，观察运行结果。4.5引用import语句可以使用目标文件中使用template语句定义的模板。其语法格式如下。<importsrc="包含模板定义的文件"/>import有作用域的概念，即只会import目标文件中定义的template。例如，CimportB，BimportA，C可以使用B定义的template，B可以使用A定义的template，但是C不能使用A定义的template。4.5引用【演练】编写代码，熟悉如何使用import引用模板修改p2.js文件，其内容如图所示。4.5引用改写p2.wxml，其内容如下<importsrc="../p1/p1.wxml"/><view><templateis="studentMsg"data="{{stuNo,stuName}}"/></view>保存并运行文件，在底部导航中选中“页面2”标签页，观察运行结果，可以看到使用模板时，显示的数据是页面自身定义的数据，即p2.js中定义的student。4.5引用【演练】编写代码，熟悉如何使用include引用模板建一个页面，模拟项目的共同头部菜单。在目录树中右键单击“pages”，在弹出的快捷菜单中选择“新建文件夹”选项，输入文件夹名称“head”。在目录树中右键单击“head”文件夹，在弹出的快捷菜单中选择“新建Page”选项，输入页面名称“head”。4.5引用修改p1.wxml文件，在开始处添加如下代码，表示使用头部菜单。<includesrc="../head/head.wxml"/>修改p