一、案例描述在页面上展示一首诗包括诗的标题、作者、正文并用样式让诗的显示更美观同时在页面上放一个按钮。需要实现的效果小程序启动后每隔几秒钟自动改变一次每行诗的颜色每次改变时每行诗的颜色是随机生成的可能相同也可能不同点击「改变颜色」按钮每行诗的颜色也会立即变化在控制台打印出每行诗的颜色。二、实现效果界面一开始显示一种不同颜色的诗每隔5 秒每行诗的颜色随机变化点击「改变颜色」按钮每行诗的颜色也会发生变化控制台每次打印出一个数组数组中有 4 个元素每个元素代表一行诗的颜色。效果预览模拟器中《望庐山瀑布》日照香炉生紫烟 颜色随机 遥看瀑布挂前川。 颜色随机 飞流直下三千尺 颜色随机 疑是银河落九天。 颜色随机 [ 改变颜色 ]控制台输出示例每次刷新都会不一样(4) [#8D2781, #D1D5F7, #06CE4E, #9929EA] (4) [#954275, #39918A, #98BFC3, #50CF46] (4) [#11A551, #E1E5D6, #3082CD, #EC1987]三、代码实现1. 新建项目新建一个不使用云服务、不使用模板的小程序项目。2. 修改app.json文件使用webview渲染引擎重点renderer: webview{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }3. 修改index.wxml文件代码最外层view内部嵌套三个view组件和一个按钮组件第 3 个view组件.flex-wrap又嵌套了 4 个view组件每个view组件用来显示不同颜色的文本内容!--index.wxml-- navigation-bar title自动随机变化的颜色 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle望庐山瀑布/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]}}动态绑定colors数组中对应下标的颜色值实现每行不同颜色。4. 修改index.wxss文件文件中page的样式和.scrollarea的样式是创建项目时自动生成的其它几个.flex-wrap、button都是自定义的/**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; }5. 修改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; color: pink; } .subtitle { text-align: center; color: blue; }6. 修改index.js文件核心逻辑// index.js Page({ data: { colors: [] }, // 生命周期函数 onLoad() { // 每隔5秒改变一次颜色 setInterval(() { this.createColor() }, 5000) }, // 点击按钮时的事件响应函数 changeColor() { this.createColor() }, // 创建四种随机颜色 createColor() { let colors [] // 定义十六种颜色字符集 const letters 0123456789ABCDEF // 外层循环控制生成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) } console.log(colors); this.setData({ colors }) } })四、要点解释函数 / 概念作用createColor()定义创建四种随机颜色的函数onLoad()生命周期回调 —— 监听页面加载Math.random()生成[0, 1)之间的随机数Math.floor()向下取整this.setData({})改变属性值驱动 WXML 更新setInterval周期函数传一个处理函数和一个执行间隔颜色是怎么随机出来的十六进制颜色形如#RRGGBB如#F208AB一共 6 位每位取值是0-9或A-F共 16 种字符。Math.random() * 16得到[0, 16)的随机数Math.floor()向下取整得到0~15的整数下标用下标从字符集0123456789ABCDEF中取出对应字符内层循环执行 6 次拼出完整的#xxxxxx外层循环执行 4 次生成 4 行诗的颜色存入colors数组。五、成果预览