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 classbox view学生信息/view view姓名{{student.name}}/view view年龄{{student.age}}/view view专业{{student.major}}/view button bindtapchangeInfo点击修改学生信息/button /viewindex.jsjs运行Page({ data: { // 学生结构体增加专业major属性 student:{ name:张三, age:20, major:软件工程 } }, changeInfo(){ this.setData({ student:{ name:李四, age:21, major:大数据技术 } }) } })app.jsonjson{ pages:[ pages/index/index ], window:{ navigationBarTitleText:案例3.4 数据和事件绑定 }, sitemapLocation:sitemap.json }四、运行效果页面加载初始展示姓名张三年龄 20专业软件工程。 点击按钮后页面刷新变成李四年龄 21专业大数据技术。 粘贴截图模拟器初始界面、点击按钮之后的界面两张截图五、遇到的问题与解决总结问题新增专业属性页面不显示 原因只在 js 加了 major忘记在 wxml 写{{student.major}}。 解决wxml 中把专业字段写出来。问题直接给 data 赋值页面不变 错误写法this.data.student.namexxx页面不会刷新。 原理必须用setData通知小程序更新视图。拼写错误bindtap 写成 bindTap 导致事件不触发 小程序事件区分大小写必须小写 bindtap。六、开发总结本案例学习小程序数据绑定和事件绑定。 数据绑定使用插值表达式将逻辑层的数据渲染到视图层 事件绑定用 bindtap 绑定点击回调函数 setData 用来修改数据并且驱动页面刷新。
