在微信小程序开发中动态改变界面元素的样式是很常见的需求。本文以古诗《望庐山瀑布》为例演示如何生成随机十六进制颜色、每 5 秒定时刷新每行诗的颜色并通过按钮手动触发变色同时在控制台打印出每一行诗对应的颜色。1 案例背景很多页面需要通过动态样式来提升视觉效果例如让文字颜色随机变化。本案例利用 JavaScript 的 Math.random ()、Math.floor () 生成随机的十六进制颜色结合小程序的数据绑定setData驱动界面刷新实现 每行诗一个随机颜色、定时自动变化、按钮手动变化 的效果。2 案例目标与实现效果在页面上展示古诗《望庐山瀑布》包括标题、作者和四行正文样式美观页面下方提供一个 改变颜色 按钮。实现效果小程序启动后四行诗以不同颜色显示每隔 5 秒每行诗的颜色随机变化一次点击 改变颜色 按钮颜色也立即随机变化同时控制台打印出每次生成的 4 个颜色组成的数组每个元素对应一行诗的颜色。3 技术要点3.1 Math.random () 与 Math.floor ()Math.random () 生成 [0, 1) 之间的随机小数Math.floor () 向下取整。二者结合可以从 0123456789ABCDEF 中随机取出一个十六进制字符循环 6 次拼出一个类似 #F208AB 的颜色值。3.2 数据绑定与 setDataWXML 中通过 stylecolor: {{colors [0]}} 将颜色数据绑定到视图逻辑层调用 this.setData ({}) 修改 data 中的值驱动视图更新。3.3 setInterval 定时器setInterval 按固定间隔反复执行回调函数本案例用它实现每 5 秒自动调用变色函数。3.4 事件绑定与 onLoad按钮通过 bind:tapchangeColor 绑定点击事件onLoad 是页面生命周期函数页面加载时触发一次适合在页面打开时生成初始颜色并启动定时器。4 实现步骤4.1 新建项目在微信开发者工具中新建一个不使用云服务、不使用模板的小程序项目。4.2 修改 app.json使用 webview 渲染引擎配置 renderer 为 webview。4.3 修改 index.wxml最外层 view 内部嵌套标题、作者、正文三个 view 和一个按钮正文 view 中再嵌套 4 个 view每个 view 显示一行诗通过 style 绑定对应颜色。4.4 修改 index.wxss编写标题、作者、正文、按钮的样式使页面美观。4.5 修改 app.wxss设置页面背景等全局样式。4.6 修改 index.js定义生成 4 种随机颜色的 changeColor () 函数、生命周期函数 onLoad () 和定时器changeColor () 同时作为按钮点击事件响应函数。5 功能扩展作业要求标题的颜色也定时随机改变且与第一行诗的正文颜色相同点击 改变颜色 按钮时标题颜色同步变化。实现方式把标题和第一行诗都绑定到颜色数组的第一个元素 colors [0]这样无论定时刷新还是点击按钮重新生成颜色后标题与第一行诗的正文颜色始终一致。6 关键代码6.1 index.wxml 关键片段view classpoem-title stylecolor: {{colors[0]}}望庐山瀑布/view view classpoem-body view classpoem-line stylecolor: {{colors[0]}}日照香炉生紫烟/view view classpoem-line stylecolor: {{colors[1]}}遥看瀑布挂前川。/view view classpoem-line stylecolor: {{colors[2]}}飞流直下三千尺/view view classpoem-line stylecolor: {{colors[3]}}疑是银河落九天。/view /view button classchange-btn bind:tapchangeColor改变颜色/button6.2 index.js 关键片段onLoad() { this.changeColor() this.timer setInterval(() { this.changeColor() }, 5000) } changeColor() { const letters 0123456789ABCDEF const colors [] // 外层循环控制生成 4 种颜色对应 4 行诗 for (let i 0; i 4; i) { // 十六进制颜色前面的符号 let c # // 内层循环控制生成一种十六进制的颜色例如 #F208AB for (let j 0; j 6; j) { c letters[Math.floor(Math.random() * 16)] } colors.push(c) } this.setData({ colors }) console.log(colors) }7 踩坑与注意事项定时器要在页面卸载onUnload时用 clearInterval 清除避免页面关闭后仍持续执行。Math.random () 可能生成相同的颜色这正是 每行诗的颜色可能相同也可能不同 的随机效果符合案例要求。十六进制颜色由 6 个字符组成注意每生成一种颜色都要重置为 # 开头。控制台打印的是整个数组开发调试时可以直接展开查看每一行诗对应的颜色。8 总结本案例利用 Math.random () 与 Math.floor () 生成随机十六进制颜色结合 setData 数据绑定、setInterval 定时器与按钮事件实现了古诗页面颜色随机变化的效果并完成了 标题颜色与第一行正文颜色一致 的功能扩展。掌握随机数、定时器与数据绑定三个知识点后可以进一步实现抽奖转盘、随机背景、动态主题等更丰富的交互效果。9 参考资料[1] 微信开放文档・框架接口 / 页面 / PagesetData—— Page(Object object) | 微信开放文档[2] MDN·Math.random() ——https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random[3] MDN·setInterval() ——https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval
在微信小程序开发中动态改变界面元素的样式是很常见的需求。本文以古诗《望庐山瀑布》为例演示如何生成随机十六进制颜色、每 5 秒定时刷新每行诗的颜色并通过按钮手动触发变色同时在控制台打印出每一行诗对应的颜色。1 案例背景很多页面需要通过动态样式来提升视觉效果例如让文字颜色随机变化。本案例利用 JavaScript 的 Math.random ()、Math.floor () 生成随机的十六进制颜色结合小程序的数据绑定setData驱动界面刷新实现 每行诗一个随机颜色、定时自动变化、按钮手动变化 的效果。2 案例目标与实现效果在页面上展示古诗《望庐山瀑布》包括标题、作者和四行正文样式美观页面下方提供一个 改变颜色 按钮。实现效果小程序启动后四行诗以不同颜色显示每隔 5 秒每行诗的颜色随机变化一次点击 改变颜色 按钮颜色也立即随机变化同时控制台打印出每次生成的 4 个颜色组成的数组每个元素对应一行诗的颜色。3 技术要点3.1 Math.random () 与 Math.floor ()Math.random () 生成 [0, 1) 之间的随机小数Math.floor () 向下取整。二者结合可以从 0123456789ABCDEF 中随机取出一个十六进制字符循环 6 次拼出一个类似 #F208AB 的颜色值。3.2 数据绑定与 setDataWXML 中通过 stylecolor: {{colors [0]}} 将颜色数据绑定到视图逻辑层调用 this.setData ({}) 修改 data 中的值驱动视图更新。3.3 setInterval 定时器setInterval 按固定间隔反复执行回调函数本案例用它实现每 5 秒自动调用变色函数。3.4 事件绑定与 onLoad按钮通过 bind:tapchangeColor 绑定点击事件onLoad 是页面生命周期函数页面加载时触发一次适合在页面打开时生成初始颜色并启动定时器。4 实现步骤4.1 新建项目在微信开发者工具中新建一个不使用云服务、不使用模板的小程序项目。4.2 修改 app.json使用 webview 渲染引擎配置 renderer 为 webview。4.3 修改 index.wxml最外层 view 内部嵌套标题、作者、正文三个 view 和一个按钮正文 view 中再嵌套 4 个 view每个 view 显示一行诗通过 style 绑定对应颜色。4.4 修改 index.wxss编写标题、作者、正文、按钮的样式使页面美观。4.5 修改 app.wxss设置页面背景等全局样式。4.6 修改 index.js定义生成 4 种随机颜色的 changeColor () 函数、生命周期函数 onLoad () 和定时器changeColor () 同时作为按钮点击事件响应函数。5 功能扩展作业要求标题的颜色也定时随机改变且与第一行诗的正文颜色相同点击 改变颜色 按钮时标题颜色同步变化。实现方式把标题和第一行诗都绑定到颜色数组的第一个元素 colors [0]这样无论定时刷新还是点击按钮重新生成颜色后标题与第一行诗的正文颜色始终一致。6 关键代码6.1 index.wxml 关键片段view classpoem-title stylecolor: {{colors[0]}}望庐山瀑布/view view classpoem-body view classpoem-line stylecolor: {{colors[0]}}日照香炉生紫烟/view view classpoem-line stylecolor: {{colors[1]}}遥看瀑布挂前川。/view view classpoem-line stylecolor: {{colors[2]}}飞流直下三千尺/view view classpoem-line stylecolor: {{colors[3]}}疑是银河落九天。/view /view button classchange-btn bind:tapchangeColor改变颜色/button6.2 index.js 关键片段onLoad() { this.changeColor() this.timer setInterval(() { this.changeColor() }, 5000) } changeColor() { const letters 0123456789ABCDEF const colors [] // 外层循环控制生成 4 种颜色对应 4 行诗 for (let i 0; i 4; i) { // 十六进制颜色前面的符号 let c # // 内层循环控制生成一种十六进制的颜色例如 #F208AB for (let j 0; j 6; j) { c letters[Math.floor(Math.random() * 16)] } colors.push(c) } this.setData({ colors }) console.log(colors) }7 踩坑与注意事项定时器要在页面卸载onUnload时用 clearInterval 清除避免页面关闭后仍持续执行。Math.random () 可能生成相同的颜色这正是 每行诗的颜色可能相同也可能不同 的随机效果符合案例要求。十六进制颜色由 6 个字符组成注意每生成一种颜色都要重置为 # 开头。控制台打印的是整个数组开发调试时可以直接展开查看每一行诗对应的颜色。8 总结本案例利用 Math.random () 与 Math.floor () 生成随机十六进制颜色结合 setData 数据绑定、setInterval 定时器与按钮事件实现了古诗页面颜色随机变化的效果并完成了 标题颜色与第一行正文颜色一致 的功能扩展。掌握随机数、定时器与数据绑定三个知识点后可以进一步实现抽奖转盘、随机背景、动态主题等更丰富的交互效果。9 参考资料[1] 微信开放文档・框架接口 / 页面 / PagesetData—— Page(Object object) | 微信开放文档[2] MDN·Math.random() ——https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random[3] MDN·setInterval() ——https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval
