# 微信小程序案例 2.10：自动随机变化的颜色

开源框架应用课程案例笔记。记录《案例 2.10 自动随机变化的颜色》的实现思路并分享功能扩展标题颜色与第一行诗的正文颜色相同、定时随机改变。一、案例效果这个案例很有趣味性页面上展示一首诗包括诗的标题、作者和正文样式经过设计显示美观。小程序启动后每隔几秒钟诗的每一行颜色都会随机改变一次 —— 每行诗的颜色可能不同也可能相同完全由随机数决定。页面上还有一个 “改变颜色” 按钮点击它每行诗的颜色也会立刻随机变化。同时在控制台会打印出每行诗的颜色方便观察验证。二、实现思路整个案例的核心是 “随机生成颜色 定时更新界面”。实现上可以分成页面结构和逻辑两个部分。页面结构方面。最外层是一个容器视图里面依次嵌套了三个视图组件和一个按钮组件。第一个视图显示诗的标题第二个视图显示作者第三个视图是诗的正文部分正文内部又嵌套了四个视图每个视图显示一行诗。这样每行诗都能独立设置颜色。诗的颜色是通过行内样式动态绑定的这样每次颜色值变化时界面就能即时刷新而不需要重写样式文件。按钮绑定了一个点击事件用来手动触发换色。逻辑方面是重点。首先是随机颜色的生成小程序里可以用随机数函数生成 0 到 1 之间的随机小数再乘以 256 并向下取整就得到 0 到 255 的数值分别作为红、绿、蓝三个颜色分量最后转成十六进制拼接成完整的颜色值。每次生成一行诗的颜色就调用一次这个函数四行诗就得到四种颜色。然后是定时变化在页面加载的生命周期函数里先立即执行一次换色让页面一开始就显示彩色的诗然后开启一个定时器每隔 5 秒自动执行一次换色函数。页面卸载时记得清除定时器避免页面销毁后定时器还在后台运行。最后是按钮点击按钮绑定的事件处理函数和定时器调用的是同一个换色函数所以无论是自动定时还是手动点击走的都是同一套换色逻辑界面效果完全一致。每次换色完成后把四种颜色组成一个数组打印到控制台数组有四个元素每个元素对应一行诗的颜色。三、功能扩展在基本功能之上我完成了一项扩展标题的颜色也定时随机改变并且跟第一行诗的正文颜色相同点击 “改变颜色” 按钮时标题颜色也随之改变。实现方式很简洁换色函数生成四个颜色时把第一个颜色同时赋值给标题和第一行诗这样标题和第一行诗始终保持一致而且无论是定时触发还是按钮触发标题颜色都会同步更新。这个小改动让整个页面的色彩变化更有整体感视觉上也更协调。四、运行效果编译运行后页面立即显示出一首颜色各异的诗。等待 5 秒四行诗的颜色整体换一批再等 5 秒又换一批周而复始。期间点击 “改变颜色” 按钮颜色也会立刻刷新。打开调试器的 Console 面板每隔 5 秒就能看到一行数组输出数组里的四个颜色值分别对应四行诗的当前颜色和界面显示完全一致。标题颜色始终跟随第一行诗变化同步功能扩展验证正常。五、总结通过这个案例我掌握了几项核心知识一是随机数的使用随机函数配合向下取整可以生成任意范围内的整数这是生成随机颜色的基础二是定时器的用法周期性地执行某个函数实现自动变化的效果同时要注意在页面卸载时清理定时器三是数据绑定和动态样式颜色值通过数据绑定驱动界面更新让 “数据变、界面跟着变” 变得非常自然四是事件绑定按钮点击与定时器共用同一套逻辑代码简洁且不易出错。这个案例虽然小巧但把随机数、定时器、数据绑定和事件处理这几个小程序开发的基础能力完整串联了一遍收获很大。