## 一、实验介绍本次案例学习微信小程序中 checkbox 复选框组件与 radio 单选框组件实现对文本样式和字体大小的动态控制。复选框支持多选可以同时设置文字加粗、倾斜、下划线单选框只能选择一项用来切换诗词的字体尺寸。本次作业在原有案例基础上新增 30rpx 字号选项选中后页面文字自动切换为 30rpx加深对表单组件事件绑定与数据驱动视图的理解。## 二、组件原理1. **checkbox-group checkbox 复选框组**checkbox-group 作为复选框的容器通过 bindchange 绑定切换事件。当勾选或者取消勾选复选框时触发绑定的事件函数e.detail.value 返回一个数组数组里面存放所有被选中复选框的value值。我们可以根据数组内容动态设置文本的字体样式。复选框的特点是支持多选多个选项可以同时选中。2. **radio-group radio 单选框组**radio-group 是单选框容器同样使用bindchange监听选择变化。e.detail.value返回字符串是当前选中单选框的value。单选框同一组内只能选中一个选项适合做互斥选择本案例用来切换字体大小。3. **小程序数据绑定**小程序采用 MVVM 思想在Page的data中定义变量wxml 通过{{}}语法绑定变量。使用this.setData()修改 data 内数据页面视图会自动刷新不需要手动操作 DOM 元素。## 三、功能实现思路页面展示一首《满江红・写怀》诗词分为两个功能区域- 复选框区域提供加粗、倾斜、下划线三个选项。勾选对应选项诗词实时变化样式取消勾选则样式消失。- 单选框区域原有 40rpx、50rpx、60rpx 基础上**新增 30rpx 选项**。点击不同字号单选按钮诗词字体大小同步改变。页面整体使用 view 容器包裹添加边框。标题居中红色正文设置首行缩进排版整洁美观。## 四、开发过程遇到的问题与解决办法1. **模拟器顶部出现黑色区域**一开始误以为是页面代码问题后来发现是开发者工具模拟器开启了【显示设备边框】黑色是手机外壳不是页面内容。关闭模拟器设备边框黑条就消失了不需要修改任何代码。2. **点击复选框、单选框没有任何效果**事件绑定名称拼写错误是最主要原因bindchange的大小写必须严格匹配wxml 绑定的函数名要和 js 里面定义的函数名完全一致。另外修改代码后需要清理缓存再编译旧缓存会导致页面不更新。3. **样式不生效**动态样式写在标签的 style 属性内依靠 data 变量控制。需要确认this.setData正确更新数据才能驱动页面刷新样式。## 五、功能测试1. 勾选加粗诗词文字加粗同时勾选倾斜、下划线多种样式叠加生效取消勾选则对应样式消失。2. 单选字号测试选择 30rpx文字变小选择 40rpx、50rpx、60rpx字体逐级变大。单选框同一时间只能选中一个符合单选组件特性。## 六、实验总结通过这个案例掌握了checkbox-group与radio-group表单组件的使用。分清复选框返回数组、单选框返回字符串的区别理解bindchange事件的使用场景。体会小程序数据驱动视图的核心思想修改 data 数据页面自动更新。同时也注意开发调试的细节例如清理缓存、检查事件名拼写、区分模拟器外壳和页面内容这些都是小程序开发里容易踩坑的地方。本次作业增加 30rpx 选项进一步熟悉单选组件动态修改页面样式的开发流程。
## 一、实验介绍本次案例学习微信小程序中 checkbox 复选框组件与 radio 单选框组件实现对文本样式和字体大小的动态控制。复选框支持多选可以同时设置文字加粗、倾斜、下划线单选框只能选择一项用来切换诗词的字体尺寸。本次作业在原有案例基础上新增 30rpx 字号选项选中后页面文字自动切换为 30rpx加深对表单组件事件绑定与数据驱动视图的理解。## 二、组件原理1. **checkbox-group checkbox 复选框组**checkbox-group 作为复选框的容器通过 bindchange 绑定切换事件。当勾选或者取消勾选复选框时触发绑定的事件函数e.detail.value 返回一个数组数组里面存放所有被选中复选框的value值。我们可以根据数组内容动态设置文本的字体样式。复选框的特点是支持多选多个选项可以同时选中。2. **radio-group radio 单选框组**radio-group 是单选框容器同样使用bindchange监听选择变化。e.detail.value返回字符串是当前选中单选框的value。单选框同一组内只能选中一个选项适合做互斥选择本案例用来切换字体大小。3. **小程序数据绑定**小程序采用 MVVM 思想在Page的data中定义变量wxml 通过{{}}语法绑定变量。使用this.setData()修改 data 内数据页面视图会自动刷新不需要手动操作 DOM 元素。## 三、功能实现思路页面展示一首《满江红・写怀》诗词分为两个功能区域- 复选框区域提供加粗、倾斜、下划线三个选项。勾选对应选项诗词实时变化样式取消勾选则样式消失。- 单选框区域原有 40rpx、50rpx、60rpx 基础上**新增 30rpx 选项**。点击不同字号单选按钮诗词字体大小同步改变。页面整体使用 view 容器包裹添加边框。标题居中红色正文设置首行缩进排版整洁美观。## 四、开发过程遇到的问题与解决办法1. **模拟器顶部出现黑色区域**一开始误以为是页面代码问题后来发现是开发者工具模拟器开启了【显示设备边框】黑色是手机外壳不是页面内容。关闭模拟器设备边框黑条就消失了不需要修改任何代码。2. **点击复选框、单选框没有任何效果**事件绑定名称拼写错误是最主要原因bindchange的大小写必须严格匹配wxml 绑定的函数名要和 js 里面定义的函数名完全一致。另外修改代码后需要清理缓存再编译旧缓存会导致页面不更新。3. **样式不生效**动态样式写在标签的 style 属性内依靠 data 变量控制。需要确认this.setData正确更新数据才能驱动页面刷新样式。## 五、功能测试1. 勾选加粗诗词文字加粗同时勾选倾斜、下划线多种样式叠加生效取消勾选则对应样式消失。2. 单选字号测试选择 30rpx文字变小选择 40rpx、50rpx、60rpx字体逐级变大。单选框同一时间只能选中一个符合单选组件特性。## 六、实验总结通过这个案例掌握了checkbox-group与radio-group表单组件的使用。分清复选框返回数组、单选框返回字符串的区别理解bindchange事件的使用场景。体会小程序数据驱动视图的核心思想修改 data 数据页面自动更新。同时也注意开发调试的细节例如清理缓存、检查事件名拼写、区分模拟器外壳和页面内容这些都是小程序开发里容易踩坑的地方。本次作业增加 30rpx 选项进一步熟悉单选组件动态修改页面样式的开发流程。
