企业官网建设流程全解析

一、案例简介

本案例是小程序基础课程《案例 2.10 自动随机变化的颜色》，在原有基础上完成功能扩展：标题颜色与第一行诗句颜色保持一致。页面加载后每 5 秒自动随机切换文字颜色；点击「改变颜色」按钮可以手动触发变色；控制台打印生成的 4 个十六进制颜色数组。

知识点：JS 随机函数、定时器setInterval、WXML 动态内联样式、小程序数据绑定setData。

二、需求分析

1. 基础功能

• 页面展示古诗《望庐山瀑布》，一共 4 行诗句，每行独立随机颜色。
• 设置定时器，每 5 秒自动更换所有文字颜色。
• 提供【改变颜色】按钮，点击手动触发颜色刷新。
• 每次生成颜色，控制台输出长度为 4 的颜色数组。

2. 扩展要求（作业新增）

标题《望庐山瀑布》的颜色和第一行诗文颜色相同；自动变色、点击按钮变色时，标题同步跟着一起变化。

三、完整代码

1. app.json

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationBarTitleText": "自动随机变化的颜色" }, "style": "v2", "renderer": "webview", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }

2. pages/index/index.wxml

<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>

3. pages/index/index.wxss

.box { margin: 20rpx; padding: 20rpx; border: 2rpx solid red; } .title { font-size: 40rpx; font-weight: bold; text-align: center; margin-bottom: 30rpx; } .subtitle { text-align: center; color: blue; } .flex-wrap { margin-top: 40rpx; font-size: 40rpx; text-align: center; line-height: 2em; letter-spacing: 1em; } button { margin-top: 40rpx; margin-bottom: 40rpx; }

4. pages/index/index.js

Page({ data: { colors: [] }, onLoad() { // 页面一加载，立刻生成颜色，防止页面空白 this.createColor() // 设置定时器：每5000ms自动调用变色函数 setInterval(() => { this.createColor() }, 5000) }, // 点击按钮触发变色 changeColor() { this.createColor() }, // 生成4组十六进制随机颜色 createColor() { let colors = [] const letters = '0123456789ABCDEF' // 循环生成4个颜色 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 }) } })

5. pages/index/index.json

{ "navigationBarTitleText":"自动随机变化的颜色" }

四、代码讲解

1. 随机颜色生成逻辑
   十六进制颜色格式为#RRGGBB，由 6 位字符组成，取值范围0~9，A~F。Math.random()产生 0~1 随机小数，Math.floor()向下取整，从字符集中随机选取字符拼接成完整色值。循环 4 次，得到 4 个独立颜色存入数组colors。
2. 数据绑定动态颜色
   WXML 中style="color:{{colors[0]}}"，把 JS 里的颜色数组绑定到文字样式上。
   扩展需求实现：标题同样绑定colors[0]，保证标题与第一行诗句颜色永远一致。
3. 定时器 setIntervalsetInterval(回调函数,5000)，每隔 5 秒自动执行一次变色函数，实现自动变色效果。
4. 点击事件 bind:tap
   按钮绑定changeColor点击事件，手动调用颜色生成函数，实现点击变色。

五、运行效果

1. 进入页面，古诗直接加载出彩色文字；标题和第一行诗句颜色完全一样。
2. 等待 5 秒，全部文字自动更换随机颜色，标题同步更新。
3. 点击【改变颜色】按钮，所有文字立刻换色，控制台打印 4 个颜色组成的数组。
   

六、踩坑记录

1. app.json 配置错误：renderer:"webview"不能搭配componentFramework字段，二者渲染引擎冲突，会导致模拟器启动失败。
2. 复制代码引入不可见特殊字符：从网页直接粘贴代码，容易带入全角符号，触发 WXML/WXSS 编译报错，需要粘贴后清空文件重新粘贴纯净代码。
3. 页面空白：初始colors数组为空，页面加载没有颜色。解决方案：onLoad生命周期中先手动调用一次createColor()。

七、总结

这个案例练习了小程序数据绑定、内联动态样式、定时器和 JS 随机数。本次作业扩展点核心思路：复用同一个颜色数组下标，实现标题与首行诗句颜色联动，不管是自动定时还是点击触发，都能同步变化。