前言在微信小程序开发中动态改变页面元素的样式是一项非常基础且实用的技能。今天我将通过一个完整的实战案例带大家实现一个“诗句文字颜色自动随机变化”的小程序。这个案例的最终效果是页面上展示一首诗包含标题、作者、正文每隔几秒钟每行诗的颜色会自动随机变化一次同时提供一个按钮点击按钮也能立即改变颜色所有生成的颜色数据会打印在控制台中。通过这个案例你将学到如何使用setInterval实现定时任务如何利用Math.random()生成随机十六进制颜色如何通过this.setData()驱动视图更新如何利用生命周期函数onLoad初始化数据一、项目创建与基础配置1.1 新建项目打开微信开发者工具创建一个新项目项目名称自动随机变化的颜色后端服务选择“不使用云服务”模板选择选择“不使用模板”1.2 修改 app.json为了让页面有更好的渲染兼容性我们需要在app.json中指定渲染引擎为webview。完整配置如下json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }二、页面结构搭建WXML在pages/index/index.wxml中我们使用navigation-bar作为自定义导航栏用scroll-view包裹主体内容。核心思路是外层view内部嵌套一个标题、一个作者、一个包含 4 行诗句的容器以及一个按钮。每一行诗句通过stylecolor:{{colors[i]}}绑定数据。html!--index.wxml-- navigation-bar title自动随机变化的颜色 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle望庐山瀑布/view view classsubtitle李白/view view classflex-wrap view stylecolor:{{colors[0]}}日照香炉生紫烟/view view stylecolor:{{colors[1]}}遥看瀑布挂前川。/view view stylecolor:{{colors[2]}}飞流直下三千尺/view view stylecolor:{{colors[3]}}疑是银河落九天。/view /view button typeprimary bind:tapchangeColor改变颜色/button /view /scroll-view这里colors是一个数组索引 0-3 分别对应四行诗的颜色值我们在 JS 中动态生成并赋值。三、样式美化WXSS3.1 页面样式 index.wxsscss/**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; }3.2 全局样式 app.wxss在app.wxss中我们定义盒子边框和标题样式css/**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: pink; }到这里页面就有了一个带红框的盒子里面包含标题、作者、诗句和按钮。四、核心逻辑实现JS这是整个案例的核心部分。我们需要在index.js中完成三件事在onLoad生命周期中启动定时器每隔 5 秒调用一次生成颜色的方法。定义changeColor方法响应按钮点击立即生成一次颜色。定义createColor方法用于生成 4 个随机的十六进制颜色并更新数据。完整代码如下javascript//index.js Page({ data: { colors: [] }, // 生命周期函数--监听页面加载 onLoad() { // 页面加载时先执行一次生成颜色 this.createColor() // 每隔5秒改变一次颜色 setInterval(() { this.createColor() }, 5000) }, // 点击按钮时的事件响应函数 changeColor() { this.createColor() }, // 创建四种随机颜色 createColor() { let colors [] // 定义十六种颜色字符集 const letters 0123456789ABCDEF // 外层循环控制生成4种颜色 for (let i 0; i 4; i) { // 十六进制颜色前面的符号 let c # // 内层循环控制生成一种十六进制的颜色例如 #208AB for (let j 0; j 6; j) { c letters[Math.floor(Math.random() * 16)] } // 将生成的颜色数存入数组中 colors.push(c) } // 在控制台打印数组 console.log(colors) // 将生成的颜色数据更新到页面 this.setData({ colors: colors }) } })代码要点解析Math.random()生成[0, 1)之间的随机小数。Math.floor()向下取整。Math.floor(Math.random() * 16)可以随机得到 0~15 之间的整数正好对应letters字符串的索引。letters字符集包含十六进制所需的0-9和A-F共 16 个字符。循环 6 次就能拼出一个完整的六位十六进制颜色码如#A3F2B8。setInterval周期函数第一个参数是回调函数第二个参数是执行间隔毫秒。这里设为 5000 毫秒即 5 秒。this.setData({})小程序中改变数据并驱动 WXML 重新渲染的唯一方式。直接修改this.data是无效的。五、功能扩展让标题颜色跟随第一行诗题目要求“标题的颜色也定时随机改变跟第一行诗的正文颜色相同”。实现起来非常简单5.1 修改 WXML将标题的view修改为htmlview classtitle stylecolor:{{colors[0]}};望庐山瀑布/view5.2 修改 WXSS在app.wxss中把.title里的color: pink;删除或注释掉。因为如果保留固定颜色会覆盖掉内联的动态颜色。现在标题会始终和第一行诗colors[0]保持同一个颜色无论是定时触发还是按钮点击触发二者都会同步变化。六、最终效果与调试完成以上步骤后点击开发者工具上方的“编译”按钮页面会展示一首诗四行诗句颜色各不相同且都是随机生成的。每隔 5 秒四行诗的颜色会自动刷新一次。点击“改变颜色”按钮颜色立即刷新。打开控制台Console可以看到每次生成的颜色数组被打印出来例如text[#A3F2B8, #D81E06, #FF5722, #3F51B5]七、总结这个案例虽然简单但涉及了小程序开发中的几个重要知识点数据绑定通过{{}}在 WXML 中引用 JS 中的数据。事件绑定通过bind:tap将按钮点击与 JS 方法关联。定时器setInterval实现周期性任务。随机数生成与字符串拼接构造十六进制颜色码。生命周期onLoad在页面加载时执行初始化逻辑。掌握这些基础后你可以尝试进一步扩展例如使用 CSS 过渡动画让颜色变化更平滑、增加暂停/继续按钮控制定时器、或者把颜色生成逻辑封装成独立工具函数等。希望这篇实战教程能帮你理解小程序中动态样式的实现思路。如果你在实践过程中遇到问题欢迎在评论区交流讨论。本文首发于个人技术博客转载请注明出处。