微信小程序 checkbox 和 radio 组件案例学习

## 一、实验介绍

本次案例学习微信小程序中 `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 选项，进一步熟悉单选组件动态修改页面样式的开发流程。