企业官网建设流程全解析

markdown

# 微信小程序案例3.4 数据和事件绑定（新增学生专业属性） ## 一、案例需求介绍 本案例为微信小程序数据绑定与事件绑定练习。 基础要求：完成数据绑定、点击事件绑定。 拓展修改：在学生的对象结构里面，**增加专业major属性**。 功能效果：页面渲染学生姓名、年龄、专业；点击按钮，触发事件，修改全部学生信息并刷新视图。 ## 二、开发思路 1. 在Page的data中定义student对象，包含name、age，额外添加major（专业）属性。 2. wxml使用双大括号`{{}}`，完成**数据绑定**，把学生信息展示到页面。 3. 在button上用`bindtap`绑定点击事件函数`changeInfo`，实现**事件绑定**。 4. 在事件函数内调用`setData`，修改student对象，小程序自动更新页面视图。 5. 模拟器运行测试，验证初始信息和点击修改后的信息，确认专业属性正常显示、更新。 >知识点： >1. 插值语法 `{{}}`：单向数据绑定，把js数据渲染到wxml页面。 >2. bindtap：绑定点击事件。 >3. setData：唯一修改data并更新页面的方法。 ## 三、关键代码 ### index.wxml ```xml <view class="box"> <view>学生信息</view> <view>姓名：{{student.name}}</view> <view>年龄：{{student.age}}</view> <view>专业：{{student.major}}</view> <button bindtap="changeInfo">点击修改学生信息</button> </view>

index.js

js

运行

Page({ data: { // 学生结构体，增加专业major属性 student:{ name:"张三", age:20, major:"软件工程" } }, changeInfo(){ this.setData({ student:{ name:"李四", age:21, major:"大数据技术" } }) } })

app.json

json

{ "pages":[ "pages/index/index" ], "window":{ "navigationBarTitleText":"案例3.4 数据和事件绑定" }, "sitemapLocation":"sitemap.json" }

四、运行效果

页面加载，初始展示：姓名张三，年龄 20，专业软件工程。 点击按钮后，页面刷新，变成李四，年龄 21，专业大数据技术。 （粘贴截图：模拟器初始界面、点击按钮之后的界面两张截图）

五、遇到的问题与解决总结

1. 问题：新增专业属性页面不显示 原因：只在 js 加了 major，忘记在 wxml 写{{student.major}}。 解决：wxml 中把专业字段写出来。

2. 问题：直接给 data 赋值，页面不变 错误写法：this.data.student.name="xxx"，页面不会刷新。 原理：必须用setData，通知小程序更新视图。

3. 拼写错误，bindtap 写成 bindTap 导致事件不触发 小程序事件区分大小写，必须小写 bindtap。

六、开发总结

本案例学习小程序数据绑定和事件绑定。 数据绑定使用插值表达式，将逻辑层的数据渲染到视图层； 事件绑定用 bindtap 绑定点击回调函数； setData 用来修改数据并且驱动页面刷新。