# 微信小程序案例 2.10 自动随机变化的颜色一、案例简介本案例为微信小程序练习项目页面展示古诗《望庐山瀑布》实现文字随机变色功能。需求页面展示古诗标题、作者、四句诗文提供【改变颜色】按钮小程序启动后每 5 秒自动随机改变每行诗句颜色点击按钮也可以手动切换颜色控制台打印保存 4 行诗句颜色的数组✨扩展需求古诗标题颜色和第一行诗文颜色保持一致自动变色、点击按钮变色都同步更新标题颜色。二、开发环境工具微信开发者工具渲染引擎webview项目类型不使用云服务不使用模板TypeScript 小程序三、实现思路页面 wxml利用小程序style动态绑定语法stylecolor:{{数组[下标]}}给文字绑定颜色标题复用colors[0]实现标题与第一句诗文颜色相同。逻辑 tscreateColor()循环生成十六进制随机颜色#XXXXXX存入数组调用setData更新页面数据控制台打印颜色数组。setInterval()定时器设置 5000ms 周期实现 5 秒自动调用变色函数。按钮绑定bind:tap点击事件手动触发变色。onUnload页面卸载生命周期清除定时器防止内存泄漏。样式 scss美化页面布局、字体大小、间距、居中排版。app.json 配置指定渲染引擎renderer: webview。四、完整源代码1.app.json{ pages: [ pages/index/index ], window: { backgroundTextStyle: light, navigationBarBackgroundColor: #fff, navigationBarTitleText: 自动随机颜色, navigationBarTextStyle: black }, renderer: webview, sitemapLocation: sitemap.json }2.pages/index/index.wxmlscroll-view classscroll view classbox !--标题绑定colors[0]和第一行诗文同色-- view classtitle stylecolor:{{colors[0]}}望庐山瀑布/view view classauthor李白/view view classpoem-wrap view classline stylecolor:{{colors[0]}}日照香炉生紫烟/view view classline stylecolor:{{colors[1]}}遥看瀑布挂前川。/view view classline stylecolor:{{colors[2]}}飞流直下三千尺/view view classline stylecolor:{{colors[3]}}疑是银河落九天。/view /view button bind:tapchangeColor classbtn改变颜色/button /view /scroll-view3.pages/index/index.scss.scroll{ height:100vh; background:#f8f8f8; } .box{ padding:40rpx; text-align:center; } .title{ font-size:48rpx; font-weight:bold; margin-bottom:20rpx; } .author{ font-size:32rpx; color:#666; margin-bottom:60rpx; } .line{ font-size:36rpx; margin:20rpx 0; } .btn{ margin-top:80rpx; }4.pages/index/index.tsPage({ data: { colors: [] as string[] }, onLoad() { this.createColor(); // 设置5秒定时器自动变色 (this as any).timer setInterval(() { this.createColor(); }, 5000) }, // 按钮点击事件 changeColor() { this.createColor(); }, // 生成4个随机十六进制颜色 createColor() { const hexStr 0123456789ABCDEF; const arr: string[] []; for (let i 0; i 4; i) { let color #; for (let j 0; j 6; j) { const idx Math.floor(Math.random() * 16); color hexStr[idx]; } arr.push(color); } console.log(诗句颜色数组, arr); this.setData({ colors: arr }) }, // 页面销毁清除定时器避免后台持续运行 onUnload() { if ((this as any).timer) { clearInterval((this as any).timer); } } })5.pages/index/index.json{ usingComponents: {} }五、核心 API 知识点讲解Math.random()返回[0,1)之间的随机小数用来取随机字符下标。Math.floor()向下取整得到 0‑15 整数用来取十六进制颜色字符。setInterval (回调毫秒)周期性重复执行函数实现定时自动变色。this.setData()修改 data 数据驱动 wxml 视图更新小程序修改页面数据的核心方法。bind:tap小程序组件点击事件绑定。onLoad / onUnload页面生命周期onLoad页面加载onUnload页面销毁用来清除定时器防止内存泄漏。六、运行效果七、总结与体会这个案例练习小程序动态样式绑定、定时器、生命周期函数。通过把同一个数组下标colors[0]同时绑定给标题和第一行文字轻松完成扩展需求。使用定时器做周期性效果一定要记得页面卸载清除定时器否则定时器会一直在后台运行造成内存问题。十六进制随机颜色原理#后面拼接 6 位 0‑F 随机字符构成网页标准颜色。TOC欢迎使用Markdown编辑器你好 这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持除了标准的Markdown编辑器功能我们增加了如下几点新功能帮助你用它写博客全新的界面设计将会带来全新的写作体验在创作中心设置你喜爱的代码高亮样式Markdown将代码片显示选择的高亮样式进行展示增加了图片拖拽功能你可以将本地的图片直接拖拽到编辑区域直接展示全新的KaTeX数学公式语法增加了支持甘特图的mermaid语法1功能增加了多屏幕编辑Markdown文章功能增加了焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置等功能功能按钮位于编辑区域与预览区域中间增加了检查列表功能。功能快捷键撤销Ctrl/CommandZ重做Ctrl/CommandY加粗Ctrl/CommandB斜体Ctrl/CommandI标题Ctrl/CommandShiftH无序列表Ctrl/CommandShiftU有序列表Ctrl/CommandShiftO检查列表Ctrl/CommandShiftC插入代码Ctrl/CommandShiftK插入链接Ctrl/CommandShiftL插入图片Ctrl/CommandShiftG查找Ctrl/CommandF替换Ctrl/CommandG合理的创建标题有助于目录的生成直接输入1次#并按下space后将生成1级标题。输入2次#并按下space后将生成2级标题。以此类推我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。如何改变文本的样式强调文本强调文本加粗文本加粗文本标记文本删除文本引用文本H2O is是液体。210运算结果是 1024.插入链接与图片链接: link.图片:带尺寸的图片:居中的图片:居中并且带尺寸的图片:当然我们为了让用户更加便捷我们增加了图片拖拽功能。如何插入一段漂亮的代码片去博客设置页面选择一款你喜欢的代码片高亮样式下面展示同样高亮的代码片.// An highlighted blockvarfoobar;生成一个适合你的列表项目项目项目项目1项目2项目3计划任务完成任务创建一个表格一个简单的表格是这么创建的项目Value电脑$1600手机$12导管$1设定内容居中、居左、居右使用:---------:居中使用:----------居左使用----------:居右第一列第二列第三列第一列文本居中第二列文本居右第三列文本居左SmartyPantsSmartyPants 是一个文本转换工具主要功能是将普通的 ASCII 标点符号自动转换为更美观的印刷体标点符号。例如原始符号转换后说明引号“引号”直引号变弯引号单引号‘单引号’直单引号变弯单引号--–两个连字符变短破折号---—三个连字符变长破折号...…三个点变省略号创建一个自定义列表MarkdownText-to-HTMLconversion toolAuthorsJohnLuke如何创建一个注脚一个具有注脚的文本。2注释也是必不可少的Markdown将文本转换为HTML。KaTeX数学公式您可以使用渲染LaTeX数学表达式 KaTeX:Gamma公式展示Γ ( n ) ( n − 1 ) ! ∀ n ∈ N \Gamma(n) (n-1)!\quad\forall n\in\mathbb NΓ(n)(n−1)!∀n∈N是通过欧拉积分Γ ( z ) ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) \int_0^\infty t^{z-1}e^{-t}dt\,.Γ(z)∫0∞​tz−1e−tdt.你可以找到更多关于的信息LaTeX数学表达式here.新的甘特图功能丰富你的文章2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-21已完成进行中计划一计划二现有任务Adding GANTT diagram functionality to mermaid关于甘特图语法参考 这儿,UML图表可以使用UML图表进行渲染例如下面产生的一个序列图王五李四张三王五李四张三李四想了很长时间, 文字太长了不适合放在一行.你好李四, 最近怎么样?你最近怎么样王五我很好谢谢!我很好谢谢!打量着王五...很好... 王五, 你怎么样?关于UML图表语法参考 这儿,流程图链接长方形圆圆角长方形菱形关于Mermaid语法参考 这儿,FLowchart流程图我们依旧会支持flowchart.js的流程图语法Created with Raphaël 2.3.0开始我的操作确认结束yesno关于Flowchart流程图语法参考 这儿.导出与导入导出如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到文章导出生成一个.md文件或者.html文件进行本地保存。导入如果你想加载一篇你写过的.md文件在上方工具栏可以选择导入功能进行对应扩展名的文件导入继续你的创作。mermaid语法说明 ↩︎注脚的解释 ↩︎