企业官网建设流程全解析

一、案例简介

本案例是微信小程序基础实践项目，核心练习小程序数据绑定、JS 随机函数、定时器以及动态行内样式。页面展示古诗《望庐山瀑布》，基础功能：页面加载后，每隔 5 秒自动随机改变四句诗句文字颜色；点击按钮可手动触发颜色切换，每次变色在控制台输出颜色数组。扩展需求：古诗标题颜色定时随机改变，与第一行诗文颜色保持一致；点击改变颜色按钮，标题同步跟随变色。开发环境：微信开发者工具，渲染引擎 webview。

二、核心知识点

1. 随机数Math.random()：生成区间[0,1)的随机小数；Math.floor()向下取整，用来随机选取十六进制颜色字符。

2. 十六进制颜色：格式#RRGGBB，由 6 位 0-9、A-F 字符组成，可以用来表示网页 / 小程序文字颜色。

3. 定时器setInterval()：周期性定时器，单位为毫秒，本案例设置 5000ms，每 5s 自动执行一次颜色生成函数。

4. 动态样式绑定：WXML 中通过style="color:{{变量}}"将 JS 中的颜色数据绑定到视图，实现文字颜色动态修改。

5. 小程序数据更新setData()：逻辑层修改数据后，必须调用setData，才能将新数据传递到视图层，更新页面渲染。

6. 扩展实现思路：标题直接复用颜色数组第 0 项colors[0]，不需要额外生成颜色，保证标题与第一行诗句颜色完全同步。

三、完整代码实现

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.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++) { let randomIndex = Math.floor(Math.random() * 16) c += letters[randomIndex] } colors.push(c) } console.log(colors) this.setData({ colors }) } })

index.wxss

.container{ border:2rpx solid red; margin:20rpx; padding:40rpx 20rpx; } .title{ font-size:44rpx; text-align:center; font-weight:bold; } .author{ text-align:center; color:blue; font-size:36rpx; margin:20rpx 0 50rpx; } .poem{ font-size:38rpx; text-align:center; line-height:80rpx; letter-spacing:10rpx; } .btn{ background-color:#07c160; color:#fff; margin-top:60rpx; }

四、运行效果

1. 页面布局：红色边框容器，居中显示标题《望庐山瀑布》、作者李白、四句古诗，底部绿色【改变颜色】按钮，和作业截图界面保持一致。

2. 初始加载：页面打开，立刻生成一组随机颜色，标题颜色和第一行诗句颜色相同。

3. 自动变色：定时器每 5 秒自动生成新的一组颜色，标题与第一行诗文同步变色。

4. 手动变色：点击绿色 “改变颜色” 按钮，立即触发颜色更新，标题同样跟随第一行同步变化。

5. 控制台输出：每次生成颜色，开发者工具 Console 面板打印包含 4 个十六进制色值的数组，数组第一个颜色对应标题和第一行诗句。

五、开发踩坑记录

1. 标题颜色不同步：最开始标题写死固定颜色，没有绑定colors[0]，自动变色时标题不会变化。将标题 style 绑定数组第 0 项，即可实现颜色共用。

2. 定时器单位问题：setInterval单位是毫秒，误写为 5 会导致疯狂刷新文字；修改为 5000，实现 5 秒切换一次。

3. 缺少#前缀：生成颜色时忘记添加#，颜色不是合法十六进制值，文字无法上色。

4. 忘记 setData 更新数据：只在 JS 中修改数组，不调用setData，视图层页面不会刷新。

5. 随机下标取值错误：Math.random()得到小数，不向下取整，读取字符数组会得到 undefined，颜色生成失败。

六、总结

本案例熟悉了小程序逻辑层与视图层的数据通信方式。利用Math.random()循环批量生成十六进制随机色，setInterval定时器实现页面周期性执行任务。WXML 动态样式绑定是小程序修改页面样式的常用方案。本次扩展功能的核心思路是复用已有颜色变量，不重复生成颜色，保证标题和首行诗句颜色统一，代码简洁高效。在实际项目开发中，页面销毁时建议清除定时器clearInterval，避免页面关闭后定时器继续后台运行，造成资源占用。