一、项目介绍本次完成小程序案例《自动随机变化的颜色》展示古诗《望庐山瀑布》。基础功能为点击按钮四句诗句文字随机更换颜色根据作业要求做功能扩展古诗标题颜色与第一行正文颜色保持一致无论是定时自动变色还是点击按钮手动变色标题都会同步更新。 核心技术点WXML动态内联样式、JS随机生成十六进制颜色、定时器setInterval、点击事件bind:tap、小程序数据驱动setData。二、项目文件结构pages/index ├── index.wxml //页面结构 ├── index.wxss //页面局部样式 app.wxss //全局样式文件三、完整代码实现index.wxml!--index.wxml-- navigation-bar title自动随机变化的颜色 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox !-- 扩展需求标题绑定colors[0]和第一句诗共用同一个颜色 -- view classtitle stylecolor:{{colors[0]}}望庐山瀑布/view view classsubtitle李白/view view classflex-wrap view stylecolor:{{colors[0]}}日照香炉生紫烟/view view stylecolor:{{colors[1]}}遥看瀑布挂前川。/view view stylecolor:{{colors[2]}}飞流直下三千尺/view view stylecolor:{{colors[3]}}疑是银河落九天。/view /view button typeprimary bind:tapchangeColor改变颜色/button /view /scroll-viewindex.wxss/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .flex-wrap { margin-top: 40rpx; font-size: 40rpx; text-align: center; line-height: 2em; letter-spacing: 1em; } button { margin-top: 40rpx; margin-bottom: 40rpx; }app.wxss/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid red; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; /* 删除固定color避免覆盖wxml动态样式 */ } .subtitle { text-align: center; color: blue; }index.js// index.js Page({ data: { colors: [] }, onLoad() { // 每隔5秒自动触发颜色更新 setInterval(() { this.createColor() }, 5000) }, // 按钮点击事件 changeColor() { this.createColor() }, // 生成4组随机十六进制颜色 createColor() { let colors [] const letters 0123456789ABCDEF for (let i 0; i 4; i) { let c # for (let j 0; j 6; j) { c letters[Math.floor(Math.random() * 16)] } colors.push(c) } console.log(colors); this.setData({ colors }) } })四、核心代码解析随机颜色生成十六进制颜色格式为#RRGGBB由0-9、A-F共16个字符组成。通过两层循环外层循环生成4个颜色内层循环拼接6位随机字符组成完整色值存入colors数组。动态样式渲染小程序支持在标签style属性中写入{{ }}绑定data中的变量。本次作业扩展标题望庐山瀑布绑定colors[0]和第一句诗句使用同一个颜色实现同步变色。定时器 setInterval页面onLoad生命周期触发后开启定时器每5秒自动调用createColor()自动刷新整套颜色。点击事件 bind:tap点击按钮触发changeColor手动调用颜色生成函数立刻更换颜色。setDatasetData是小程序关键API修改data数据并驱动页面视图自动更新。五、总结这个案例很好地理解小程序数据驱动视图的思想。利用JS生成随机数据传递到WXML中动态渲染样式。本次作业扩展不需要修改颜色生成逻辑只需要复用同一个数组下标就轻松实现标题和第一句诗颜色保持一致。