企业官网建设流程全解析

一、案例简介

本案例以古诗《望庐山瀑布》为展示内容，实现诗句文字颜色随机切换。基础功能：页面加载后，每 5 秒自动生成 4 组十六进制随机颜色，分别为四句古诗上色；点击【改变颜色】按钮，手动触发颜色刷新。 功能扩展：将标题《望庐山瀑布》绑定第一行诗句的颜色，自动定时变色、点击按钮变色时，标题颜色和第一行诗句同步改变，满足作业扩展要求。本案例掌握小程序动态内联样式、定时器、随机算法、数据绑定的开发方法。

二、组件原理

1. scroll-view：滚动容器，开启scroll-y纵向滚动，适配页面内容超出屏幕场景。

2. view 容器：页面布局容器，用于划分标题、作者、诗句、按钮区域。

3. 动态 style 内联样式：style="color:{{colors[0]}}"，通过 Mustache 语法{{}}绑定 data 数组中的颜色值，动态修改文字颜色，优先级高于 wxss 静态样式。

4. button按钮：bind:tap绑定点击事件changeColor，触发手动刷新颜色。

5. setInterval 定时器：周期性执行函数，实现 5s 自动更换颜色。

6. Math随机函数：Math.random()生成 0~1 随机数，Math.floor()向下取整，从十六进制字符集中随机选取字符，生成#RRGGBB格式颜色码。

三、实现思路

1. 页面onLoad生命周期加载时，启动定时器setInterval，每隔 5 秒调用createColor()生成随机颜色数组。

2. createColor()函数：定义十六进制字符集，双层循环生成 4 组#开头的 6 位十六进制颜色，存入 colors 数组，使用setData更新页面 data 数据，驱动视图刷新。

3. WXML 页面中，四句诗句依次绑定colors[0]~colors[3]；标题同样绑定 colors [0]，保证标题颜色与第一行诗句颜色完全一致。

4. 按钮绑定changeColor点击事件，点击后直接调用createColor()，手动更新全部颜色，标题同步变色。

5. wxss 与 app.wxss 设置页面布局、间距、边框、文字基础排版；标题取消固定颜色，交给行内动态 style 控制。

四、核心代码

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"> <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; } .subtitle { text-align: center; color: blue; }

index.js

// index.js Page({ data: { colors: [] }, onLoad() { setInterval(() => { this.createColor() }, 5000) }, changeColor() { this.createColor() }, 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. 页面加载，展示红色边框盒子，居中显示标题《望庐山瀑布》、作者李白和四句古诗。

2. 自动定时：每 5 秒自动生成 4 组随机十六进制颜色；标题颜色与第一行诗句保持一致同步变化，其余三行诗句各自随机颜色，控制台打印生成的颜色数组。

3. 手动触发：点击【改变颜色】按钮，立刻刷新全部颜色，标题和第一行诗句同步更换为新颜色。

4. 页面布局：诗句居中，字间距、行间距美观，按钮在诗句下方。

六、知识点总结

1. 动态内联样式：在 wxml 的 style 属性中使用{{变量}}进行数据绑定，动态修改元素样式，内联样式优先级高于 wxss 静态样式。

2. Page 数据驱动：this.setData()修改 data 中的数组变量，自动驱动页面视图更新，小程序核心的 MVVM 响应式思想。

3. 定时器 setInterval：周期性执行回调函数，实现自动定时任务，单位毫秒，案例设置 5000ms（5 秒）自动刷新颜色。

4. JS 随机数：Math.random()生成 0~1 浮点数，Math.floor()向下取整，从字符集合中选取字符，构造十六进制 RGB 颜色#RRGGBB。

5. 数组操作：数组 push () 追加元素，通过数组下标colors[i]读取对应颜色值分配给不同 DOM 元素。

6. 事件绑定 bind:tap：给 button 绑定点击事件，实现用户手动交互触发函数。

7. scroll-view 滚动容器：scroll-y 开启纵向滚动，flex 布局实现页面弹性适配。