小程序数组 显示第一个 点击完成 显示下一个_小程序学习（4）

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

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

案例一   随机数求和

(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

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