企业官网建设流程全解析

一、实验目的

1. 掌握多选框checkbox和多选组checkbox‑group的用法；
2. 掌握单选框radio和单选组radio‑group的用法；
3. 学会通过bindchange事件获取选中项，动态修改页面样式；
4. 拓展新增30rpx字号单选选项；
5. 理解skyline渲染引擎对部分CSS样式不兼容的问题。

二、实验环境

微信开发者工具，小程序基础库3.17.3

三、实验内容

页面展示《满江红·写怀》词文。使用checkbox多选框，勾选后叠加文字样式（加粗、倾斜、下划线）；使用radio单选框切换字体大小，基础选项40rpx、50rpx、60rpx，拓展新增30rpx选项。JS获取选中项之后，通过setData修改data中的样式变量，利用动态行内style绑定，实时改变文本样式。

核心代码1：app.json

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black" }, "style": "v2" }

⚠ 注意：删除skyline渲染引擎配置，否则text-indent首行缩进样式不生效。

核心代码2：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 bindchange="checkboxChange"> <checkbox value="isBold">加粗 </checkbox> <checkbox value="isItalic">倾斜</checkbox> <checkbox value="isUnderline">下划线 </checkbox> </checkbox-group> <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>

✅拓展部分：radio组内第一行新增<radio value="30rpx">30rpx</radio>。

核心代码3：index.js

Page({ data:{ myFontSize:'50rpx', myBold:'', myItalic:'', myUnderline:'' }, checkboxChange:function(e){ let selected = e.detail.value; let myBold = ''; let myItalic = ''; let myUnderline = ''; for(let i=0;i<selected.length;i++){ const ele = selected[i]; if(ele === 'isBold'){ myBold = 'bold'; } if(ele === 'isItalic'){ myItalic = 'italic'; } if(ele === 'isUnderline'){ myUnderline = 'underline'; } } this.setData({ myBold, myItalic, myUnderline }) }, radioChange:function(e){ this.setData({ myFontSize:e.detail.value }) } })

核心代码4：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; }

核心代码5：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; }

四、运行效果

1. 初始页面：默认字号50rpx，无加粗、无倾斜、无下划线，首行缩进正常显示。
2. 勾选"加粗"：文字变粗；勾选"倾斜"：文字变斜；勾选"下划线"：文字出现下划线。三者可以任意组合多选。
3. 点击radio单选框切换字号：选择30rpx字体变小，选择60rpx字体变大；同时只能选中一个字号。
4. 拓展效果：30rpx选项已经添加，选中后文本字号切换为30rpx，符合作业拓展要求。

五、实验问题分析

1. checkbox与radio的取值区别：
   • 多选checkbox-group的e.detail.value是数组，需要遍历数组判断选中项；
   • 单选radio-group的e.detail.value是单个字符串，直接赋值即可。
2. skyline渲染引擎兼容性问题：一开始项目启用了skyline渲染引擎，text-indent首行缩进样式失效，段落开头没有空格。删除app.json中的skyline相关配置，使用默认webview渲染引擎之后，缩进样式正常显示。
3. 动态样式绑定：在view标签的style属性中使用{{变量名}}绑定样式值，JS中修改data变量，页面样式实时更新。变量为空字符串的时候，对应的CSS样式就不生效。

六、实验总结

本次实验掌握了小程序多选框和单选框组件的用法。checkbox-group支持多选，返回值是数组；radio-group支持单选，返回值是单个字符串。通过事件回调获取选中值，结合动态行内样式，实现了对文本样式的实时控制。拓展作业新增30rpx字号选项，完成作业要求。开发过程中遇到skyline渲染引擎不兼容部分CSS样式的问题，通过修改app.json配置解决，加深了对小程序渲染引擎的理解。