实验 2.10 自动随机变化的颜色

一、实验目的掌握小程序内联动态样式stylecolor:{{变量}}的使用实现文字颜色动态修改。学会使用Math.random()、Math.floor()生成十六进制随机颜色。掌握定时器setInterval()实现每隔固定时间自动执行代码。理解this.setData()的作用修改 data 数据驱动页面视图更新。掌握按钮事件绑定bind:tap点击按钮触发颜色改变。完成扩展作业诗标题颜色和第一行正文颜色保持一致定时、点击按钮同步变化。学会在控制台打印输出调试信息观察生成的颜色数组。二、实验环境操作系统Windows开发工具微信开发者工具项目类型小程序不使用云服务不使用模板三、实验功能描述页面展示古诗《望庐山瀑布》包含标题、作者、四句诗文页面放置 “改变颜色” 按钮。小程序启动后每 5 秒自动随机改变每一行诗句文字颜色每行颜色相互独立。点击【改变颜色】按钮也会立刻重新随机生成颜色。扩展需求古诗标题颜色和第一行诗句颜色保持一致自动变化、点击按钮都会同步更新。每次生成颜色控制台打印由 4 个十六进制颜色值组成的数组。四、实现步骤步骤 1新建小程序项目打开微信开发者工具新建项目选择不使用云服务、不使用模板填写 AppID创建空白小程序项目。步骤 2编写 app.json 全局配置⚠️注意glass‑easel中间必须是英文减号复制 PPT 文本容易带入中文特殊符号会报字段校验错误。{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationBarTitleText: 自动随机变化的颜色, navigationBarBackgroundColor: #ffffff }, style: v2, renderer: webview, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }步骤 3页面结构 index.wxml扩展点标题stylecolor:{{colors[0]}}直接复用数组第 0 项和第一行诗句共用同一个颜色。scroll-view classscrollarea scroll-y typelist view classbox !-- 扩展作业标题颜色与第一行诗颜色一致 -- view classtitle stylecolor:{{colors[0]}}望庐山瀑布/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代码说明stylecolor:{{colors[0]}}动态内联样式从 js 的 data 中读取颜色值渲染文字。bind:tapchangeColor绑定按钮点击事件点击执行 changeColor 函数。scroll‑view 实现滚动容器box 外层盒子加红色边框。步骤 4页面逻辑 index.js// index.js Page({ data: { colors: [] }, //页面加载生命周期 onLoad() { this.createColor() //页面进入立刻生成一次颜色 //设置定时器5000ms 5秒自动执行变色 setInterval(() { this.createColor() }, 5000) }, //按钮点击事件 changeColor() { this.createColor() }, //生成4组随机十六进制颜色 createColor() { let colors [] //十六进制颜色可用字符集 const letters 0123456789ABCDEF //循环生成4个颜色 for (let i 0; i 4; i) { let c # //每个颜色#后面拼接6位字符 for (let j 0; j 6; j) { //Math.random() [0,1)随机小数Math.floor向下取整 c letters[Math.floor(Math.random() * 16)] } colors.push(c) } //控制台打印颜色数组 console.log(colors) //更新data数据驱动页面刷新 this.setData({ colors: colors }) } })核心 API 说明Math.random()生成 0 ≤ x 1 的随机浮点数。Math.floor()对数字向下取整用来取字符数组下标。setInterval(回调,毫秒)循环定时器每隔指定毫秒重复执行回调函数。this.setData({})小程序修改页面数据的唯一方式修改后 wxml 自动刷新视图。十六进制颜色格式#RRGGBB# 后面 6 位取值 0‑9、A‑F。注意课堂案例没有写清除定时器正式项目要在onUnload使用clearInterval()销毁定时器防止页面销毁后定时器继续后台运行。步骤 5页面样式 index.wxss/**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; }步骤 6全局样式 app.wxss/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid red; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; } .subtitle { text-align: center; color: blue; }五、运行测试结果编译运行小程序顶部导航栏标题 “自动随机变化的颜色”红色边框盒子展示古诗。扩展作业效果《望庐山瀑布》标题文字颜色与第一行诗句 “日照香炉生紫烟” 颜色完全相同。程序启动后每 5 秒自动重新生成 4 个随机颜色全部诗句、标题同步变色。点击绿色【改变颜色】按钮立刻触发颜色重新随机变化标题同步改变。打开调试器 Console 控制台每次变色输出数组示例输出[#452D7B,#993A16,#908FC3,#05C846]数组 4 个元素分别对应 4 行诗文颜色六、遇到的问题与解决问题 1JS 报语法错误Expected ,, got (页面 js 模块加载失败报错module pages/index/index.js is not defined原因复制粘贴带入看不见特殊字符、中文符号或者对象大括号内缺少逗号。解决全选清空整个 index.js完整复制正确代码不要在旧代码上修改全部保存后清除缓存重新编译。问题 2app.json 报错componentFramework 字段需为 exparser,glass‑easel原因从 PPT 复制文本glass‑easel中间是中文长横杠JSON 配置只能识别英文减号-。解决改为glass-easel使用键盘英文减号。问题 3navigation‑bar 组件找不到报错原因webview 渲染模式下自定义导航组件兼容性差。解决放弃navigation‑bar组件app.json 使用系统自带导航栏规避组件异常。问题 4页面颜色完全不变化排查确认是否调用this.setData()小程序必须使用 setData 修改 data直接赋值this.data.colorsxxx页面不会刷新。七、实验总结小程序通过style{{变量}}实现动态样式本案例动态控制文字颜色。使用Math.random()Math.floor()可以生成随机下标拼接出 #开头的十六进制随机颜色。setInterval()实现周期性自动执行this.setData()是小程序更新页面数据的核心方法。事件绑定bind:tap实现按钮交互手动触发颜色更新。扩展作业实现标题直接复用颜色数组第 0 项做到标题与第一行诗句颜色同步自动、点击都可以同步更新。控制台console.log()打印数组用于调试查看程序内部生成的数据方便排错。