企业官网建设流程全解析

2.10：自动随机变化的颜色

一、案例描述

本次案例使用微信小程序实现一个展示古诗《望庐山瀑布》的页面，主要功能如下：

1. 页面上展示一首诗，包括诗的标题、作者、正文，并用样式控制诗的显示美观；

2. 页面上有一个“改变颜色”按钮；

3. 小程序启动后，每隔 5 秒钟改变一次颜色，每行诗的颜色可能不同，也可能相同，都是随机生成的十六进制颜色；

4. 点击按钮时，每行诗的颜色也会立即改变；

5. 每次变色时，在控制台打印出每行诗的颜色（一个包含 4 个元素的数组）。

功能扩展 ：标题的颜色也定时随机改变，且与第一行诗的正文颜色相同；点击“改变颜色”按钮时，标题的颜色也随之改变。

二、实现效果

- 界面一开始就显示一种随机颜色的诗（页面加载时先初始化一次颜色）；

- 每隔 5 秒，每行诗和标题的颜色随机变化一次；

- 点击“改变颜色”按钮时，标题和每行诗的颜色同时变化；

- 控制台每次打印一个数组，数组中有 4 个元素，例如：`["#F2EBE9", "#6C3C62", "#995A3C", "#8F985C"]` ，每个元素代表一行诗（及标题）的颜色。

三、项目创建

在微信开发者工具中新建一个 不使用云服务、不使用模板 的小程序项目，项目名称为“自动随机变化的颜色”。

四、代码实现

1. 修改 app.json —— 使用 webview 渲染引擎

新建项目默认使用 skyline 渲染，这里改为 webview：

2. 修改 index.wxml —— 页面结构

代码最外层 view 内部嵌套标题、作者、正文容器和一个按钮组件，第 3 个 view 组件又嵌套了 4 个 view 组件，每个 view 组件用来显示不同颜色的文本内容。

3. 修改 app.wxss —— 全局样式（盒子、标题、作者）

其中 page 的样式和 .scrollarea 的样式是创建项目时自动生成的（在 index.wxss 中）

4. 修改 index.wxss —— 页面样式（诗的正文、按钮）

代码中定义了创建四种随机颜色的函数`createColor()` 、生命周期函数`onLoad()` 、按钮点击事件响应函数`changeColor()` ：

五、要点解释

1. `onLoad()` ：生命周期回调，监听页面加载。页面加载时先调用一次`createColor()` 进行初始化，再通过`setInterval` 定时变色。

2. `Math.random()` ：生成`[0, 1)` 之间的随机数。

3. `Math.floor()` ：向下取整。`Math.floor(Math.random() * 16)` 可以得到 0~15 的随机整数，正好对应字符集`letters` 的下标。

4. 双重循环 ：外层循环控制生成 4 种颜色；内层循环拼接`#` 后的 6 位十六进制字符，形成形如`#F208AB` 的颜色值。

5. `this.setData({})` ：改变属性值，驱动 wxml 更新，页面上绑定`{{colors[n]}}` 的文字颜色随之刷新。

6. `setInterval(处理函数, 执行间隔)` ：周期函数，这里每隔 5000 毫秒（5 秒）执行一次`createColor()` 。

7. 功能扩展实现 ：wxml 中标题绑定了与第一行诗相同的`{{colors[0]}}` ，由于每次`createColor()` 都会重新生成整个 colors 数组并`setData` ，所以无论是定时变化还是点击按钮，标题颜色都会自动跟随第一行诗变化，无需额外代码。

六、总结

通过这个案例，我掌握了微信小程序的几个核心知识点：

- 页面结构与数据绑定：wxml 中通过`{{}}` 插值表达式将 data 中的数据渲染到视图；

- 事件绑定：通过`bindtap` 给按钮绑定点击事件；

- 生命周期与定时器：`onLoad` 中使用`setInterval` 实现定时自动变色；

- 随机颜色算法：利用`Math.random()` 与`Math.floor()` 组合生成随机十六进制颜色；

- 数据驱动视图：只需修改 data 中的数据并调用`setData` ，视图就会自动更新，这就是小程序“数据驱动”的核心思想。