一、案例简介本案例为微信小程序《自动随机变化的颜色》基础功能实现页面标题文字颜色随机变化在此基础上完成扩展功能点击页面第一行文字时标题颜色再次随机变化。本文记录完整开发思路、核心代码与调试过程。二、开发环境开发工具微信开发者工具 Stable版基础框架微信小程序原生 WXML WXSS JS JSON核心逻辑随机数生成Math.random()、数据绑定setData、事件绑定bindtap三、需求分析基础需求页面显示标题文字标题文字颜色可随机变化扩展需求点击页面第一行文字时标题颜色重新随机变化四、核心代码实现1. index.wxmlview classcontainer !-- 第一行文字点击触发标题颜色变化 -- view classtip bindtapchangeColor点击我改变标题颜色/view !-- 标题文字颜色随机变化 -- view classtitle stylecolor:{{titleColor}}标题文字/view /view2. index.jsPage({ data: { titleColor: #000000 }, onLoad() { // 页面加载时初始化标题颜色 this.changeColor(); }, // 生成随机颜色并更新标题 changeColor() { const color this.getRandomColor(); this.setData({ titleColor: color }); }, // 生成随机十六进制颜色 getRandomColor() { const hex Math.floor(Math.random() * 16777215).toString(16); return # hex.padStart(6, 0); } })3. index.wxss.container { padding: 40rpx; display: flex; flex-direction: column; gap: 30rpx; } .tip { font-size: 32rpx; color: #333333; } .title { font-size: 48rpx; font-weight: bold; }4. index.json{ navigationBarTitleText: 随机颜色 }五、功能说明标题随机变色页面加载时自动生成随机颜色并通过setData更新titleColor标题文字颜色随之改变。点击触发变色点击第一行文字“点击我改变标题颜色”再次调用changeColor()标题颜色重新随机生成。数据绑定标题颜色通过titleColor控制样式使用内联样式stylecolor:{{titleColor}}动态绑定。六、开发踩坑记录随机颜色建议使用十六进制格式小程序样式兼容性更好。Math.random()生成的是 0~1 之间的随机数需要乘以16777215才能覆盖完整颜色范围。转换为十六进制后不足6位时要用padStart(6, 0)补全避免出现非法颜色值。动态颜色不要写死在 WXSS 中应通过setData控制数据字段再由页面渲染更新样式。七、总结本案例学习了微信小程序原生页面结构、数据绑定、事件绑定和动态样式控制。通过Math.random()生成随机颜色结合setData实现标题文字颜色的自动与点击变化加深了对小程序响应式数据更新的理解。直接复制全文到博客平台发布即可。