小程序数组显示第一个点击完成显示下一个_小程序学习（4）-优快云博客

本文介绍了小程序中如何实现随机数求和功能和计时器的使用。通过WXML和JS文件展示了如何动态显示随机数组的和，并详细解析了计时器的实现原理，包括定时器的设置、计数以及停止。此外，文章还讨论了对象的概念、数组和Number对象的方法以及this和that的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序学习--功能扩展学习

在前面学习完了设计结构，顺序，条件，循环结构以及基本页面布局，逻辑层和视觉层之间的通信。。

案例一随机数求和

(1)案例描述和设计思路

实现效果

(2)详细代码实现和解释

1.wxml中文件

首先是外边框，标题然后view的文本提示

通过列表进行循环wx:for="{{rand}}"，列表渲染，rand是从js中传过来的数值，item是数组里的元素,显示元素，后显示随机数的和，sum也是从js中传递过来的，数据绑定。

最后有按钮，类型type为primary，绑定事件函数newRand,即一点击按钮后会调用这个函数，产生新的随机数。

2，js后缀文件

先定义了两个全局变量rand，随机数存储的数组，sum，数组的和，再定义一个全局函数，自定义的，先初始化rand，赋值为[],再用for循环，产生六个随机数，定义变量r,用Math.random()产生0到1内的随机数，再乘以100得到范围(0,100)，toFixed(位数)表示小数点保留到后两位，但数据类型为字符串，需要*1把其变为数据类型。

array类有很多函数，rand.push(r)，加到数组中，随机数列求和，最后在控制台显示数组元素及其和。

后面Page中onLoad函数中调用随机数函数，使得一开始运行时就可以显示一系列的元素，把函数元素和和直接发送到视图层，把逻辑层变量渲染到视图层

再看newRand，点击按钮后调用的函数，再次调用，通过setData函数把rand和sum直接渲染到视图层。

(3)知识点总结

1.对象的概念：属性和方法

2.常见对象的方法，Array和Number

总结就是对象的概念和其方法的使用，还涉及到前面讲述的数学函数的使用。对象有数组和数字对象，有一系列的方法。

二、计时器的使用

(1)功能介绍和思路设计

实现效果

(2)代码介绍

wxml 页面设计

外边框box样式，hidden属性，控制界面是否显示，为Ture显示，False不显示，标题title样式，下面是计时器的界面，样式为time，显示的数值通过num控制，进行了数据绑定，数值来自js文件，下面是一个view，通过btnLayout样式来控制布局，里面有两个按钮，分别绑定了两个事件函数，点击引起函数的调用，显示字体在中间。

2.wxss 样式布局

time：设置开端，行高为200，因为没有设置高度，默认为行高，故字垂直居中，背景颜色，字体颜色，字体大小，字体水平居中，边界宽度，线为实线，颜色为银色；边框半径为30，四个圆角，边距上下左右为15 。

btnLayout，flex布局，水平布局

button布局45%

3.js

先定义两个全局变量，计时器数字和计时器ID

开始data中设置hidden为真，不显示，绑定变量num获得全局变量值，在onLoad函数，程序一加载就调用，赋值操作是因为回调函数的调用可能会有所影响，setTimeout中有回调函数，每个多长时间后调用这个函数，里面调用了show函数，运行两秒钟以后。主要功能是隔多长时间后去调用里面的函数。其中有显示计时页面。在start中，有回调函数，都会有that和this，而setInterval()中是每隔多少时间去调用timer()函数，回调

其中timer函数，显示num，如果num大于0，减一次，直到为0.最后显示。

而停止计时会调用clearInterval(timerID)清除计时器，不再调用了。

(3)知识点介绍和总结

四个计时函数的使用

注意点

this和that的使用

setData的使用

三、三色旗自动变化

(1)案例介绍和设计思路

实现效果

颜色的编码用十六进制编码表示

(2)代码介绍

wxml

外边框加标题

下采用的布局为flex-wrp

后面三个view，样式为item，背景颜色在style中设置，其中颜色进行了数据绑定，从js中传出

最下面一个按钮，类型为primary，样式btn，绑定了一个changeColor函数，点击调用

2.wxss 视图层代码设计

上边距，flex布局，水平方向

item有宽度和高度，btn上下边距为20

3.js

三个函数

自定义的createColor

定义数组，赋值16进制颜色字符集

利用循环创建三种随机颜色，由#开始，而每个颜色由6个字符构成，来一个内循环，Math.random()产生0到1的数，乘以16，取地板，变为整数，加到字符串c中，最后得到一种颜色，通过push方法加入到颜色数组中。在console面板中显示颜色值，最后把创建的颜色渲染到视图层通过this.setData。

生命周期函数

一加载小程序，就运行了直接调用函数使得一开始就可以看到现象，利用this.函数名调用。通过回调函数，每隔5s中回调创建颜色函数，每隔着5s自动改变颜色

点击按钮的事件函数

直接调用本类定义的函数，createColor函数，使得按下按钮也可以改变颜色。

(3)知识点总结

四、小程序的架构

(1)设计思路和总体思路

实现效果

首页的导航栏

(2)代码文件

(1)app.json

其中pages是页面默认路径列表，页面路径，文件名即可，无需后缀

window 全局是默认窗口表现有背景格式，导航栏字，字体

而tabBar是底部tab栏的表现，其中color文字颜色，selectedcolor选中文字的颜色，list，tab列表，最少两个，最多5个tab，再看list属性，pagePath 页面路径，必须现在pages中先定义，text，tab上按钮文字，iconPath 图片路径，selectedIconPath，选中时图片路径。