页面渲染

在数据绑定章节,我们已经掌握如何把data里面的数据渲染到页面,这一部分我们会介绍如何通过点击组件绑定的事件处理函数来修改data里面的数据,如何把事件处理函数获取到的数据打印到页面。

将变量值渲染到页面

还记得我们之前在控制台打印的Date对象、Math对象、字符串String对象以及常量么?在第一节里我们把这些对象赋值给了一个变量,然后通过控制台可以把这些值给console.log()打印出来,那这些值可不可以渲染到小程序的页面上呢?答案是肯定的。

将变量值渲染到页面

使用开发者工具新建一个页面比如data,然后在data.js的Page({})函数的前面,也就是不写在Page函数里面,写在data.js的第1行输入以下代码:

注意上面这些是JavaScript函数的语句,所以用的是分号;分隔,这个不要和之前的逗号分隔给弄混了哦。如果语句是换行的,后面的分号;也可以不必写。

然后在data里面添加如下数据(注意没有双引号,单双引号里的是字符串

在data.wxml里输入以下代码:

因为data是一个对象Object,我们可以通过冒号:的方式将变量值赋值给data里的各个属性,而在数据绑定章节,这些数据是可以直接渲染到小程序的页面的。

toString()方法

我们发现{{now}}渲染的结果是一个对象[object Object],而并没有显示出字符串文本,这个时候就需要用到对象的toString()方法,得到对象的字符串。将data里now的赋值改为如下:

技术文档:toString()方法

响应的数据绑定

逻辑层js文件里的data数据,无论是基础的字符串、数组、对象等,还是通过变量给赋的值,都可以渲染到页面。不仅如此,只要对逻辑层data里的数据进行修改,视图层也会做相应的更新,我们称之为响应的数据绑定,而这是通过Page的setData()方法来实现的。

使用开发者工具在data.wxml里输入:

然后在data.js里添加一个数据

然后在js里添加两个button绑定的事件处理函数redTap和yellowTap:

点击button,原来view组件的背景颜色由黑色变成了其他颜色,这是因为点击组件触发事件处理函数,调用了Page的setData()方法修改了data里与之相应的属性的值(重复赋值就是修改),bgcolor由原来的”#000000″,变成了其他数据。

小任务:通过以往的学习我们了解到无论是组件的样式,图片、链接的路径,数组、对象里的数据,他们都是可以进行数据分离写到data里面的,这也就意味着,我们通过点击事件改变data里面的数据可以达到很多意想不到的效果,请发挥你的想象力做一些有意思的案例出来。

响应的布尔操作

在前面我们已经了解到,有些组件的私有属性的数据类型为Boolean布尔值,比如视频、Swiper轮播组件是否自动播放、是否轮播,视频组件是否显示播放按钮等等,这些我们都可以使用setData将true改为false,false改为true来达到控制的目的。

在交互方面,响应的布尔操作可以用于单一属性true与false的切换,比如显示与隐藏、展开与折叠、聚焦与失焦、选中与不选中。

我们来看一个案例,使用开发者工具在data.wxml里输入以下代码:

然后给在data.js的data里新增

然后添加changeMuted事件处理函数

在开发者工具的模拟器里点击按钮,我们发现静音和取消静音都是这个按钮。这里的感叹号 !是逻辑非的意思,可以理解为not。

this.setData this.data都用到了一个关键字 this this和中文里的“这个的”有类似的指代作用,在方法中, this 指代该方法所属的对象,比如这里的是Page对象, this.data就是指Page函数对象里的data对象。

响应的数组操作

结合点击事件以及数组操作的知识,我们再来看下面这个案例,了解如何通过点击按钮新增数组里的数据和删除数组里的数据。

使用开发者工具在data.wxml里输入以下代码,注意这里视图层只有一个{{text}},也就是说我们之后会把所有的数据都赋值给data里的text。

然后在data.js的Page()之前声明变量,这里声明extraLine为一个空数组,我们之后会往这个数组里添加和删除数据。

然后再在Page的data里添加一条数据,

我们先来看没有事件处理函数时,数据渲染的逻辑,首先我们把initData变量值赋值给text,这时渲染的结果只有initData里的数据,所以页面显示的是“只有一行原始数据”,而extraLine和text没有什么关系。

我们再来在Page里添加addLine和removeLine的事件处理函数:

首先回顾一下之前的数组操作知识,push为往数组的末尾新增数据,而pop则删除数组末尾一行的数据,join为数组数据之前的连接符。

点击按钮新增一行,触发绑定的事件处理函数addLine,首先会执行extraLine数组新增一条数据“新增的内容”,但是这时extraLine和text还没有关系,这时在setData()函数里将initData和extraLine进行拼接(注意extraLine本来是一个数组,但是调用join方法后返回的是数组的值拼接好的字符串)。点击按钮删除最后一行,会先删除extraLine数组里最后一行的数据。

小任务:新增内容过于单一,我们可以给它后面添加一个随机数,将 extraLine.push('新增的内容')改成 extraLine.push('新增的内容'+Math.random()),再来看看新增数据的效果,关于Math.random()大家可以自行去MDN查阅。大家也可以把拼接的连接符由 \n换成其他字符。

函数与调用函数

函数的作用,可以写一次代码,然后反复地重用这个代码。JavaScript的函数本身也是对象,因此可以把函数赋值给变量,或者作为参数传递给其他函数。

函数的定义和结构

我们可以使用function关键词来定义一个函数,括号()里为函数的参数,参数可以有很多个,使用逗号,隔开;函数要执行的代码(语句)使用大括号{}包住:

不带参数的函数

比如,我们使用开发者工具在data.js的Page()函数前,添加如下代码:

保存之后,我们可以在控制台看到函数打印的字符串。定义一个函数并不会自动的执行它。定义了函数仅仅是赋予函数以名称并明确函数被调用时该做些什么。调用函数才会以给定的参数真正执行这些动作。greet()函数没有参数,调用函数时,直接写函数名+括号即可。

只有一个参数的函数

下面定义了一个简单的平方函数square(),square为函数名,number为函数的参数(名称可以自定义),使用return语句确定函数的返回值。我们继续在data.js的Page()函数前,输入以下代码:

square(5),就是把5赋值给变量number,然后执行number*number,也就是5*5,然后返回return这个值。

这里的number被称之为形参,而5被称之为实参。大家可以结合案例就能大致了解形参和实参的意思。

  • 形参是在定义函数时使用的参数,目的是用来接收调用该函数时传进来的实际参数。
  • 实参是在调用时传递给函数的参数

JavaScript允许传入任意个参数而不影响调用,因此传入的参数可以比定义的参数多,但是不能少。也就是说实参的数量可以多于形参但是不能少于形参。

对象的方法

在小程序里我们会经常将一个匿名函数赋值给对象的一个属性,而这个属性我们可以称之为对象的方法。

匿名函数

函数声明function在语法上是一个语句,但函数也可以由函数表达式创建,这样的函数没有函数名称(匿名)。

使用开发者工具在data.js的Page()函数前,输入以下代码:

执行后,可以在控制台看到输出的结果为16。上面这个function函数没有函数名,相当于是把函数的返回值赋值给了变量square。

箭头函数

为什么叫箭头函数(Arrow Function),因为它定义一个函数用的就是一个箭头=>,我们来看两个例子,在data.js的Page()函数前输入以下代码:

在控制台我们可以看到箭头函数打印的结果。箭头函数相当于匿名函数,它没有函数名,而且也简化了函数定义。箭头函数可以只包含一个表达式,甚至连{ … }和return都可以省略掉。大家可以先只需要了解这个写法就可以了,以后碰到不至于比较迷惑,见多了也试着尝试多写一下。

调用对象的方法

可以使用点表示法来调用对象的方法,这个和访问对象的属性没有区别。而调用对象的方法和调用一个函数也是大同小异。

调用对象的方法我们在前面就已经接触过大量的案例了,在前面我们已经说过,wx是小程序的全局对象,而在第一节我们打印的很多API,就是调用了wx对象里的方法。

JavaScript函数的写法

在点击事件章节里,我们创建的事件点击处理函数的写法如下:

而在这一节我们创建的事件点击函数的写法为:

这两种写法都是可以执行的,大家可以把这两种写法互相修改一下试试看~

currentTarget事件对象

在前面的列表渲染里,我们知道点击电影列表里的某一部电影,要进行页面跳转显示该电影的详情,我们需要给该电影创建一个页面,那如果要显示数千部的电影的详情,一一创建电影详情页显然不合适,毕竟所有电影的详情页都是同一一个结构,有没有办法所有电影详情都共用一个页面,但是根据点击的链接的不同,渲染相应的数据?答案是肯定的,要解决这个问题,首先我们要了解链接组件的点击信息。

当点击组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象,通过  event 对象可以获取事件触发时候的一些信息,比如时间戳、 detail 以及当前组件的一些属性值集合,尤其是事件源组件的id。

currentTarget是事件对象的一个属性,表示的是事件绑定的当前组件。使用开发者工具在data.wxml里输入以下代码

然后再往data.js的data里添加以下数据:

然后再添加事件处理函数tabClick。

编译之后在模拟器里预览。当我们点击上面的tab时,触发tabClick事件处理函数,这时候事件处理函数会收到一个事件对象e,我们可以看一下控制台打印的e对象的内容,关于e对象具体属性的解释可以看技术文档。

技术文档:事件对象

currentTarget就是事件对象的一个属性,我们可以使用点表示法获取到点击的组件的Id,并将其赋值给activeIndex,所谓active就是激活的意思,也就是我们点击哪个tab,哪个tab就激活。

  • 当点击的id为0,也就是第一个tab时,activeIndex的值被事件处理函数修改为0;
  • activeIndex == index相同的tab,也就是激活的tab就会有weui-bar__item_on的class,也就显示为绿色
  • !=是不等于操作符,activeIndex != 0显然不成立条件为false,也就是组件hidden为false,即为显示;而activeIndex != 1,2,3则都会true,hidden生效,组件不显示,于是tab的效果就有了。

当我们对字符串、Math对象、Date对象、数组对象、函数对象、事件对象所包含的信息不了解时,把他们打印出来即可。打印出来的结果基本都是字符串、列表、对象,而在前面我们已经掌握如何操作它们。通过实战,通过打印日志,既有利于我们调试代码,也加强我们对逻辑的理解。