一、案例简介本案例是微信小程序选择类组件的实战练习综合运用了checkbox/checkbox-group多选和radio/radio-group单选两套组件。页面上方是一段示例文字下方有两组选项一组checkbox可多选分别控制文字是否加粗、斜体、下划线一组radio单选用于设置文字的字号大小。勾选或切换选项时上方示例文字的样式会实时变化。本次作业在基础案例之上在 radio 组里额外增加了一个「30rpx」选项选中后文字字号随之变为 30rpx。二、学习知识点表格知识点作用说明checkbox-group多选框容器必须把多个checkbox包在里面才能触发bindchangecheckbox单个多选框value是选中时的值radio-group单选框容器包裹多个radio通过bindchange监听选中radio单个单选框同组内互斥checkboxChange多选回调e.detail.value是选中值组成的数组radioChange单选回调e.detail.value是单个选中值动态样式绑定在style中用{{}}三元表达式根据数据实时切换样式关键区别checkbox 取到的是数组可多选radio 取到的是单值互斥单选。三、开发步骤新建不使用云服务、不使用模板的小程序项目。在index.wxml编写示例文字其style用数据动态绑定字体粗细、斜体、下划线、字号。用checkbox-group包裹三个checkbox加粗 / 斜体 / 下划线绑定checkboxChange。用radio-group包裹若干radio30 / 40 / 50 / 60rpx绑定radioChange。在index.js中维护isBold / isItalic / isUnderline / fontSize四个数据。勾选 checkbox 时更新三个布尔值切换 radio 时更新字号。编写样式编译预览测试。四、核心代码1. 页面结构index.wxmlview classcontainer view classtitle字体样式预览/view !-- 示例文字样式动态绑定 -- view classcontent stylefont-weight:{{isBold ? bold : normal}}; font-style:{{isItalic ? italic : normal}}; text-decoration:{{isUnderline ? underline : none}}; font-size:{{fontSize}}rpx; 这是一段用于演示字体样式和字号的示例文字。 /view !-- 多选字体样式 -- checkbox-group bindchangecheckboxChange labelcheckbox valuebold /加粗/label labelcheckbox valueitalic /斜体/label labelcheckbox valueunderline /下划线/label /checkbox-group !-- 单选字体大小作业新增 30rpx 选项 -- radio-group bindchangeradioChange labelradio value30 /30rpx/label labelradio value40 /40rpx/label labelradio value50 /50rpx/label labelradio value60 /60rpx/label /radio-group /view2. 逻辑index.jsPage({ data: { isBold: false, // 加粗 isItalic: false, // 斜体 isUnderline: false, // 下划线 fontSize: 40 // 字号默认 40rpx }, // 多选e.detail.value 是数组 checkboxChange(e) { const values e.detail.value this.setData({ isBold: values.indexOf(bold) -1, isItalic: values.indexOf(italic) -1, isUnderline: values.indexOf(underline) -1 }) }, // 单选e.detail.value 是单个值 radioChange(e) { this.setData({ fontSize: e.detail.value }) } })3. 样式index.wxss.container { padding: 40rpx; } .content { background: #fff; border-radius: 12rpx; padding: 30rpx; line-height: 1.8; }五、遇到的问题与解决方案问题 1单独放一个 checkbox /radio 不触发事件。原因小程序要求选择项必须放在checkbox-group/radio-group容器里。 解决用checkbox-group包裹所有 checkbox用radio-group包裹所有 radio。问题 2checkbox 取到的值判断不准。原因误以为e.detail.value是单个值实际它是数组。 解决用indexOf(xxx) -1判断某项是否被勾选。问题 3字号切换没反应。原因e.detail.value是字符串30直接当数字用会有隐患。 解决在 style 里用{{fontSize}}rpx拼接字符串30拼上rpx同样生效。六、运行效果初始文字为 40rpx、常规样式勾选「加粗」「斜体」「下划线」文字实时变粗、变斜、加下划线可组合选择「30rpx / 40rpx / 50rpx / 60rpx」文字大小随之变化互斥单选作业要求的「30rpx」选项已加入并生效。七、案例总结通过本案例掌握了checkbox-group多选与radio-group单选的用法理解了两者事件回调中数组与单值的区别并学会了在 WXML 中用style{{}}做动态样式绑定从而实现选择项实时驱动界面变化。新增的 30rpx 选项加深了对 radio 单选数据流的理解。