微信小程序案例 2.10自动随机变化的颜色 —— 用 setData 定时器实现逐行诗句变色一、前言这是《微信小程序开发》课程里的一个经典小案例页面上显示一段文字每隔一段时间文字颜色自动随机变化同时提供一个按钮可以手动触发变色。我在完成基础功能后做了两点扩展一是把演示文本换成了一首完整的古诗《春晓》加上诗名和作者二是让每一行诗句拥有独立的随机颜色而作者姓名始终保持黑色不变。这个过程中踩了几个坑也顺带把 setData、setInterval 和样式绑定的关系彻底搞清楚了。二、需求分析基础要求页面标题为“自动随机变化的颜色”每隔 2 秒文字颜色自动变为随机色点击按钮可手动改变颜色标题颜色与正文颜色同步变化。自我扩展正文改为《春晓》全诗包含诗名与作者诗名与第一句诗句颜色同步第二句独立变色作者“【唐】孟浩然”永远为黑色不参与变色字体放大、整体居中具备诗词展示的视觉效果。三、实现思路核心思路其实只有一句话颜色由 data 中的数据决定样式通过 style“color: {{变量}}” 绑定到视图上JS 里只需修改数据界面就会自动更新。具体拆成三步WXML不写死颜色而是给每个需要变色的元素绑定一个不同的变量titleColor、line1、line2作者那行干脆不绑天然就是 WXSS 里定义的黑色WXSS只管排版居中、字号、行高不管颜色颜色和排版彻底分离JS写一个生成 #RRGGBB 随机色的工具函数在 changeColor 里给每个变量分别赋值onLoad 里用 setInterval 每 2 秒调用一次onUnload 里清除定时器。四、代码实现4.1 页面结构 index.wxmlxml编辑自动随机变化的颜色 春晓!-- 作者永远黑色不参与变色 -- view classpoem-author【唐】孟浩然/view !-- 每句诗各自独立颜色 -- view classpoem-content view stylecolor: {{line1}}春眠不觉晓处处闻啼鸟。/view view stylecolor: {{line2}}夜来风雨声花落知多少。/view /view改变颜色这里的关键点是想让哪几个元素同色就给它们绑定同一个变量。诗名和第一句都绑了 line1所以它们永远一致作者没有内联 style因此不受 JS 控制。4.2 页面样式 index.wxsscss编辑/* 页面整体布局 */.container {display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 100vh;background-color: #f8f9fa;padding: 40rpx;}/* 顶部标题 */.title {font-size: 52rpx;font-weight: bold;margin-bottom: 80rpx;text-align: center;}/* 古诗整体容器 */.poem-wrapper {display: flex;flex-direction: column;align-items: center;width: 100%;margin-bottom: 100rpx;}/* 诗名 */.poem-title {font-size: 64rpx;font-weight: bold;margin-bottom: 30rpx;text-align: center;}/* 作者/.poem-author {font-size: 42rpx;margin-bottom: 50rpx;text-align: center;color: #000000; /强制黑色永不变化 */}/* 正文诗句 */.poem-content {font-size: 50rpx;line-height: 2.4;text-align: center;width: 100%;}/* 按钮 */.btn {width: 70%;font-size: 36rpx;}4.3 页面逻辑 index.jsjavascript编辑Page({data: {titleColor: ‘#000000’,line1: ‘#000000’,line2: ‘#000000’},// 页面加载时启动定时器onLoad() {this.changeColor(); // 先变一次避免首屏全是黑色this.timer setInterval(() {this.changeColor();}, 2000); // 2000 毫秒 2 秒},// 按钮点击触发changeColor() {this.setData({titleColor: this.getRandomColor(), // 标题独立变色line1: this.getRandomColor(), // 诗名 第一句同步变色line2: this.getRandomColor() // 第二句独立变色});},// 生成形如 #A3F01C 的随机颜色getRandomColor() {const letters ‘0123456789ABCDEF’;let color ‘#’;for (let i 0; i 6; i) {color letters[Math.floor(Math.random() * 16)];}return color;},// 页面卸载时清除定时器防止内存泄漏onUnload() {clearInterval(this.timer);}});五、运行效果此处插入两张截图① 初始状态② 点击按钮或等待 2 秒后的变色状态从效果可以看出标题自成一个颜色诗名与第一句完全一致第二句又是另一个颜色而作者始终为黑色符合预期。六、踩坑记录坑一CSS 全部挤成一行导致编译报错。第一次改样式时我是直接在原文件上追加结果所有规则粘在一起、注释也混进了选择器里模拟器直接白屏。教训修改样式文件前先全选清空再整段粘贴保证每条规则独立成行。坑二改了 WXML 却没改 JS 的变量名。WXML 里写了 {{line1}}但 data 里还留着旧的 textColor控制台报 undefined颜色不生效。教训新增绑定变量后必须回到 JS 的 data 和 setData 里补上对应字段三者要一一对应。坑三忘记清定时器。一开始没写 onUnload反复编译预览后控制台出现一堆定时器叠加的警告。小程序页面销毁后定时器不会自动停止必须手动 clearInterval。坑四首屏全是黑色。只在 setInterval 里调用变色函数会导致页面刚打开的前 2 秒仍是初始黑色。解决办法是在 onLoad 里先主动执行一次 this.changeColor()。七、知识点总结表格知识点 本案例中的体现数据绑定 style“color: {{titleColor}}” 实现动态样式setData 唯一能驱动视图更新的方式直接改 this.data 无效事件绑定 bindtap“changeColor” 实现按钮点击交互定时器 setInterval 实现自动轮播clearInterval 防止泄漏生命周期 onLoad 初始化、onUnload 清理资源样式与逻辑分离 WXSS 管布局JS 管颜色互不干扰八、后续可扩展方向把两行诗改成四行每句一行用数组 wx:for 渲染代码会更简洁加入背景色同步变化做成“整页换肤”效果增加一个“暂停/继续”开关练习 clearInterval 与状态控制把颜色变化做成渐变过渡动画使用 CSS transition 提升观感。