企业官网建设流程全解析

微信小程序案例3.4：数据绑定和事件绑定详解与实现

一、案例描述

设计一个小程序，演示数据绑定和事件绑定的功能和实现方法。

本案例通过index.wxml页面中的 Mustache 语法（双大括号）与index.js中的data数据进行绑定，并使用button组件的bind:tap事件绑定点击处理函数，配合this.setData()方法演示数据更新与视图刷新的完整流程。

二、知识要点

1. 什么是数据绑定

WXML 中的数据绑定使用 Mustache 语法（双大括号）将变量包起来，与index.js中data对象的数据建立绑定关系。这种方式的绑定是单向的，数据只能由index.js传递给index.wxml。

2. 数据绑定的几种形式

3. 什么是事件绑定

button组件通过bind:tap="modify"绑定了一个点击事件处理函数modify。当用户点击按钮时，逻辑层执行modify()，函数内部通过调用this.setData()修改绑定的数据。执行setData()会将数据从逻辑层传输到视图层，触发视图层页面渲染更新。

三、实现步骤

1. 修改 index.wxml 文件

在index.wxml中编写数据绑定和事件绑定的页面结构，通过{{}}语法绑定数据，通过bind:tap绑定点击事件：

<!--index.wxml--><navigation-bartitle="数据和事件绑定"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="box"><viewclass="title">各种类型的数据绑定示例</view><viewclass="txt-style"><view>算术运算绑定: {{a}}+{{b}}+{{c}}={{a + b + c}}</view><view>对象绑定--学号: {{student.stuId}}</view><view>对象绑定--姓名: {{student.name}}</view><view>对象绑定--生日: {{student.birthDay}}</view><view>对象绑定--专业: {{student.major}}</view><view>数组绑定--array[0]: {{array[0]}}</view><view>数组绑定--array[1]: {{array[1]}}</view><view>数组绑定--array[2]: {{array[2]}}</view></view><buttontype="primary"bind:tap="modify">修改绑定数据</button></view></scroll-view>

2. 修改 index.js 文件

在index.js的data对象中初始化绑定的数据，并定义modify事件响应函数，通过this.setData()修改绑定数据：

// index.jsPage({data:{a:10,b:20,c:30,student:{stuId:'20250822',name:'张三',birthDay:'2005-09-01',major:'软件工程和大数据'},array:['2023','2024','2025']},// 事件响应函数modify(){this.setData({a:100,b:200,c:300,student:{stuId:'20220123',name:'李四',birthDay:'2002-12-10',major:'软件工程和大数据'},array:['2018','2019','2020']})}})

3. 修改 index.wxss 文件

其中page和.scrollarea的样式定义是创建项目的时候自动生成的，其它是新增的：

/**index.wxss**/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}.txt-style{font-size:40rpx;line-height:2em;margin-left:20rpx;}

4. 修改 app.wxss 文件

在app.wxss中定义内容卡片.box和标题.title的样式：

/**app.wxss**/.box{/* 设置外边距 */margin:20rpx;/* 设置内边距 */padding:20rpx;/* 设置边框 */border:2rpx solid silver;}.title{/* 设置字体大小 */font-size:40rpx;/* 设置字体加粗 */font-weight:bolder;/* 设置居中对齐 */text-align:center;/* 设置下外边距 */margin-bottom:30rpx;/* 设置字体颜色 */color:red;}

5. 增加学生的专业属性（案例扩展）

在作业要求中，需要在学生的结构中增加专业属性，主要分三步完成：

第一步，在index.js的data.student对象中增加major字段，值为'软件工程和大数据'；

第二步，在index.wxml中增加一行"对象绑定–专业"的绑定，通过数据路径{{student.major}}展示专业信息；

第三步，在modify()事件函数中同步保留major字段，保证点击按钮后专业信息仍然正常显示。

四、运行效果

1. 页面初始状态

编译运行后，页面显示内容如下：

算术运算绑定：10+20+30=60 对象绑定--学号：20250822 对象绑定--姓名：张三 对象绑定--生日：2005-09-01 对象绑定--专业：软件工程和大数据 数组绑定--array[0]：2023 数组绑定--array[1]：2024 数组绑定--array[2]：2025

2. 点击"修改绑定数据"按钮

点击按钮以后，页面的数据发生变化：

算术运算绑定：100+200+300=600 对象绑定--学号：20220123 对象绑定--姓名：李四 对象绑定--生日：2002-12-10 对象绑定--专业：软件工程和大数据 数组绑定--array[0]：2018 数组绑定--array[1]：2019 数组绑定--array[2]：2020

结论：点击按钮后，modify()函数通过this.setData()将数据从逻辑层传输到视图层，触发视图层页面渲染更新，实现数据绑定的动态更新效果。

五、总结

1. 数据绑定使用 Mustache 语法（双大括号）将变量包起来，这种绑定是单向的，数据只能由index.js传递给index.wxml。
2. 普通数据绑定直接使用变量名实现；对象绑定通过"对象名.属性名"实现，也称为数据路径运算；数组绑定通过下标变量实现。
3. Mustache 语法支持算术运算等简单表达式，可以直接在页面中渲染计算结果。
4. button组件通过bind:tap绑定点击事件处理函数，事件函数中调用this.setData()修改数据并触发视图更新。
5. 使用setData()时应只传入发生变化的字段，并控制调用频率，避免引发性能问题。

参考文档：

• 微信小程序 WXML 数据绑定
• 微信小程序 setData 性能建议