企业官网建设流程全解析

在微信小程序开发中，checkbox多选框、radio单选框是非常常用表单组件，必须配合checkbox‑group、radio‑group分组容器使用才能正常监听变化事件。本文通过《满江红》动态文本样式编辑器案例，讲解多选、单选组件事件机制、行内动态样式绑定，实现字体加粗、斜体、下划线、字体大小实时切换，最后完成作业扩展新增 30rpx 字号选项。

开发环境：微信开发者工具，不使用云服务、不使用模板，关闭 skyline 渲染引擎。

关键词

微信小程序；checkbox‑group；radio‑group；动态样式；表单组件

一、案例需求

实现诗词文本样式编辑器

1. 页面展示《满江红・写怀》诗词，标题红色居中。
2. 多选功能（checkbox）：提供加粗、倾斜、下划线三个复选框，可以任意多选，勾选后诗词文本实时生效对应样式。
3. 单选功能（radio）：提供字体大小选项，只能选择一个，切换选项立刻修改文字字号；作业扩展新增30rpx字号。
4. 文本段落需要首行缩进text‑indent:2em；⚠️skyline渲染引擎不支持该样式，需要在app.json删除"renderer":"skyline"配置。

二、核心知识点

1. checkbox‑group + checkbox（多选）

1. checkbox必须放到checkbox‑group标签内，绑定bindchange事件，单独 checkbox 无法触发 change 回调。
2. 事件回调e.detail.value返回数组，数组里面存放所有勾选的 checkbox 的value属性。
3. 可以同时勾选多个选项。

2. radio‑group + radio（单选）

1. radio必须放到radio‑group标签内，绑定bindchange事件。
2. 事件回调e.detail.value返回单个字符串，代表当前选中 radio 的value。
3. 同一分组内只能选中一项；checked="true"设置页面默认选中项。

3. 小程序动态行内样式

style="font-weight:{{myBold}};font-style:{{myItalic}}"

小程序不能直接操作 DOM 元素，通过{{}}数据绑定，js 使用setData修改 data 变量，页面样式自动更新。

注意：行内样式多个属性使用分号;隔开。

三、完整项目代码

3.1 app.json

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "webview" }

3.2 pages/index/index.wxml 页面结构

<!--index.wxml--> <navigation-bar title="checkbox 和 radio 组件" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">满江红·写怀</view> <!--动态绑定字体样式：加粗、斜体、下划线、字号--> <view class="txt" style="font-weight:{{myBold}};font-style:{{myItalic}};text-decoration:{{myUnderline}};font-size:{{myFontSize}};"> <view> 怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。 </view> <view> 靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。 </view> </view> <view class="other"> <!--多选框组checkbox‑group，绑定change事件--> <checkbox-group bindchange="checkboxChange"> <checkbox value="isBold">加粗 </checkbox> <checkbox value="isItalic">倾斜</checkbox> <checkbox value="isUnderline">下划线 </checkbox> </checkbox-group> <!--单选框组radio‑group，作业新增30rpx选项--> <radio-group bindchange="radioChange"> <radio value="30rpx">30rpx</radio> <radio value="40rpx">40rpx</radio> <radio value="50rpx" checked="true">50rpx</radio> <radio value="60rpx">60rpx</radio> </radio-group> </view> </view> </scroll-view>

3.3 app.wxss 全局公共样式

/**app.wxss**/ .box { /* 设置外边距 */ margin: 20rpx; /* 设置内边距 */ padding: 20rpx; /* 设置边框 */ border: 2rpx solid silver; } .title { /* 设置字体大小 */ font-size: 40rpx; /* 设置字体加粗 */ font-weight: bolder; /* 设置居中对齐 */ text-align: center; /* 设置下外边距 */ margin-bottom: 30rpx; /* 设置字体颜色 */ color: red; }

3.4 pages/index/index.wxss 页面局部样式

/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } radio, checkbox { margin: 20rpx; } .txt { /* 设置文本两端对齐 */ text-align: justify; text-indent: 2em; margin: 60rpx 0; } .other { text-align: center; margin: 60rpx 0; }

3.5 pages/index/index.js 业务逻辑

// index.js Page({ data: { myFontSize: '50rpx', myBold: '', myItalic: '', myUnderline: '' }, /** * checkbox‑group组件事件函数 */ checkboxChange(e) { console.log(e); // 定义存放checkbox‑group所有选中项数组 let selected = [] let myBold = '' let myItalic = '' let myUnderline = '' // 获取checkbox‑group中的所有选中项（数组） selected = e.detail.value // 循环遍历所有选中项 for (let index = 0; index < selected.length; index++) { const element = selected[index]; if (element === 'isBold') { myBold = 'bold' } if (element === 'isItalic') { myItalic = 'italic' } if (element === 'isUnderline') { myUnderline = 'underline' } } // 更新数据驱动视图 this.setData({ myBold, myItalic, myUnderline }) }, /** * radio‑group组件事件函数 */ radioChange(e) { console.log(e); this.setData({ myFontSize: e.detail.value }) } })

四、程序运行流程

1. 页面初始化，myFontSize='50rpx'，默认选中 50rpx；加粗、斜体、下划线全部为空，文本原始样式展示。
2. 用户勾选 / 取消多选框，触发checkboxChange事件。
3. e.detail.value拿到全部勾选项组成的数组，循环数组判断勾选哪些选项，给样式变量赋值；没有勾选则变量为空字符串，样式不生效。
4. setData更新 data 数据，页面行内 style 绑定变量自动刷新文本样式。
5. 用户切换 radio 单选按钮，触发radioChange，e.detail.value直接拿到字号字符串，赋值给myFontSize，字体大小立刻改变。
6. 作业扩展30rpx选项，只需要增加一条 radio 标签，js 代码无需修改，复用原有radioChange逻辑。

五、踩坑记录

1. ❌直接单独使用 checkbox/radio，不包裹在 group 组件，bindchange 事件不会触发，拿不到选中值。
2. ❌app.json 保留"renderer":"skyline"，text‑indent首行缩进样式失效，排版错乱。
3. ❌混淆 checkbox 与 radio 返回值：checkbox 返回数组；radio 返回单个字符串。
4. ❌行内 style 多个 css 属性忘记加分号，样式解析失效。
5. ❌没有选中任何 checkbox 时e.detail.value是空数组，循环不会执行，样式变量保持空字符串，文本恢复原始样式。

六、总结

1. checkbox、radio 组件不能脱离checkbox‑group、radio‑group分组容器使用，分组容器负责监听组内选项变化。
2. 多选返回数组，单选返回字符串，这是两个组件最核心区别。
3. 小程序动态样式依靠数据绑定 + setData 实现，不要尝试 DOM 操作。
4. 新增 radio 选项时，只需要新增 radio 标签，value 设置对应字号，原有 js 逻辑完全复用，扩展性好。