企业官网建设流程全解析

微信小程序案例 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.wxml
xml

编辑

自动随机变化的颜色 春晓

<!-- 作者：永远黑色，不参与变色 --> <view class="poem-author">【唐】孟浩然</view> <!-- 每句诗各自独立颜色 --> <view class="poem-content"> <view style="color: {{line1}}">春眠不觉晓，处处闻啼鸟。</view> <view style="color: {{line2}}">夜来风雨声，花落知多少。</view> </view>

改变颜色

这里的关键点是：想让哪几个元素同色，就给它们绑定同一个变量。诗名和第一句都绑了 line1，所以它们永远一致；作者没有内联 style，因此不受 JS 控制。
4.2 页面样式 index.wxss
css

编辑

/* 页面整体布局 */
.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.js
javascript

编辑

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 提升观感。