企业官网建设流程全解析

一、项目介绍

本次完成小程序案例《自动随机变化的颜色》，展示古诗《望庐山瀑布》。基础功能为点击按钮，四句诗句文字随机更换颜色；根据作业要求做功能扩展，古诗标题颜色与第一行正文颜色保持一致，无论是定时自动变色，还是点击按钮手动变色，标题都会同步更新。 核心技术点：WXML动态内联样式、JS随机生成十六进制颜色、定时器setInterval、点击事件bind:tap、小程序数据驱动setData。

二、项目文件结构

pages/index ├── index.wxml //页面结构 ├── index.wxss //页面局部样式 app.wxss //全局样式文件

三、完整代码实现

index.wxml

<!--index.wxml--> <navigation-bar title="自动随机变化的颜色" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <!-- 扩展需求：标题绑定colors[0]，和第一句诗共用同一个颜色 --> <view class="title" style="color:{{colors[0]}}">望庐山瀑布</view> <view class="subtitle">李白</view> <view class="flex-wrap"> <view style="color:{{colors[0]}}">日照香炉生紫烟，</view> <view style="color:{{colors[1]}}">遥看瀑布挂前川。</view> <view style="color:{{colors[2]}}">飞流直下三千尺，</view> <view style="color:{{colors[3]}}">疑是银河落九天。</view> </view> <button type="primary" bind:tap="changeColor">改变颜色</button> </view> </scroll-view>

index.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 }) } })

四、核心代码解析

1. 随机颜色生成十六进制颜色格式为#RRGGBB，由0-9、A-F共16个字符组成。通过两层循环，外层循环生成4个颜色，内层循环拼接6位随机字符，组成完整色值，存入colors数组。

2. 动态样式渲染小程序支持在标签style属性中写入{{ }}绑定data中的变量。本次作业扩展，标题望庐山瀑布绑定colors[0]，和第一句诗句使用同一个颜色，实现同步变色。

3. 定时器 setInterval页面onLoad生命周期触发后，开启定时器，每5秒自动调用createColor()，自动刷新整套颜色。
4. 点击事件 bind:tap点击按钮触发changeColor，手动调用颜色生成函数，立刻更换颜色。
5. setDatasetData是小程序关键API，修改data数据并驱动页面视图自动更新。

五、总结

这个案例很好地理解小程序数据驱动视图的思想。利用JS生成随机数据，传递到WXML中动态渲染样式。本次作业扩展不需要修改颜色生成逻辑，只需要复用同一个数组下标，就轻松实现标题和第一句诗颜色保持一致。