微信小程序实战：自动随机变化的颜色（案例 2.10）

1. 案例背景在微信小程序开发中通过 JavaScript 的随机数生成与页面数据绑定可以轻松实现界面元素的动态变化。本案例将带领大家完成一个「自动随机变化的颜色」小程序页面展示一首诗每隔几秒每行诗的颜色会随机变化点击按钮也能立即触发颜色刷新并在控制台打印每行诗的颜色数组。2. 实现效果本案例最终实现的效果如下界面一开始显示一首不同颜色的诗。每隔 5 秒每行诗的颜色随机变化。点击「改变颜色」按钮时每行诗的颜色也会立即变化。在控制台打印一个数组数组中有四个元素每个元素代表一行诗的颜色。3. 新建项目首先在微信开发者工具中新建一个不使用云服务、不使用模板的小程序项目。项目创建完成后依次修改以下文件。3.1 修改 app.json 文件在app.json中配置使用 webview 渲染引擎确保页面能够正常渲染。{ pages: [ pages/index/index ], window: { navigationBarTitleText: 自动随机变化的颜色 }, renderer: webview }3.2 修改 index.wxml 文件在index.wxml中代码最外层view内部嵌套三个view组件和一个按钮组件。其中第 3 个view组件又嵌套了 4 个view组件每个view组件用来显示不同颜色的文本内容。view classcontainer view classtitle静夜思/view view classauthor李白/view view classpoem view床前明月光/view view疑是地上霜/view view举头望明月/view view低头思故乡/view /view button typeprimary bindtapchangeColor改变颜色/button /view3.3 修改 index.wxss 文件在index.wxss中page的样式和.scrollarea的样式是创建项目时自动生成的其它几个都是自定义的。这里主要定义页面布局和文本样式。page { background-color: #f5f5f5; } .scrollarea { height: 100%; } .container { display: flex; flex-direction: column; align-items: center; padding: 40rpx; } .title { font-size: 48rpx; font-weight: bold; margin-bottom: 20rpx; } .author { font-size: 32rpx; color: #666; margin-bottom: 40rpx; } .poem { display: flex; flex-direction: column; align-items: center; margin-bottom: 60rpx; } .poem view { font-size: 36rpx; line-height: 1.8; }3.4 修改 app.wxss 文件在app.wxss中设置全局样式确保所有页面风格统一。page { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; }3.5 修改 index.js 文件在index.js中实现核心逻辑定义创建随机颜色的函数、生命周期函数以及按钮点击事件响应函数。Page({ data: { colors: [#000000, #000000, #000000, #000000] }, onLoad() { this.changeColor(); setInterval(() { this.changeColor(); }, 5000); }, changeColor() { const colors []; for (let i 0; i 4; i) { const r Math.floor(Math.random() * 256); const g Math.floor(Math.random() * 256); const b Math.floor(Math.random() * 256); colors.push(rgb(${r}, ${g}, ${b})); } this.setData({ colors }); console.log(colors); } });4. 要点解释下面对代码中的关键知识点进行说明onLoad生命周期回调用于监听页面加载页面初始化时自动执行。Math.random() 函数生成 [0, 1) 之间的随机数。Math.floor() 函数向下取整用于将随机数转换为整数颜色值。this.setData({})改变属性值驱动 WXML 更新实现界面刷新。setInterval周期函数接收一个处理函数和一个执行间隔用于定时执行颜色变化逻辑。5. 本小节作业完成《案例 2.10 自动随机变化的颜色》后可以尝试以下功能扩展标题的颜色也定时随机改变且与第一行诗的正文颜色相同。点击「改变颜色」按钮时标题的颜色也随之改变。通过本案例的练习相信你已经掌握了微信小程序中随机数生成、数据绑定和定时器的基本用法能够灵活实现界面元素的动态效果。