云开发 页面渲染

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

将变量值渲染到页面

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

将变量值渲染到页面

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

let lesson = "云开发技术训练营";


let enname = "CloudBase Camp";


let x = 3, y = 4, z = 5.001, a = -3, b = -4, c = -5;


let now = new Date();

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

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

data: {


    charat: lesson.charAt(4),


    concat: enname.concat(lesson),


    uppercase:enname.toUpperCase(),


    abs:Math.abs(b),


    pow: Math.pow(x, y),


    sign:Math.sign(a),


    now:now,


    fullyear:now.getFullYear(),


    date:now.getDate(),


    day: now.getDay(),


    hours: now.getHours(),


    minutes: now.getMinutes(),


    seconds: now.getSeconds(),


    time: now.getTime()


},

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

<view>"云开发技术训练营"第5个字符 {{charat}}</view>


<view>两个字符串连接后的结果：{{concat}}</view>


<view>CloudBase Camp字母大写：{{uppercase}}</view>


<view>b的绝对值：{{abs}}</view>


<view>x的y次幂：{{pow}}</view>


<view>返回a是正还是负：{{sign}}</view>


<view>now对象：{{now}}</view>


<view>{{fullyear}}年</view>


<view>{{date}}日</view>


<view>星期{{day}}</view>


<view>{{hours}}时</view>


<view>{{minutes}}分</view>


<view>{{seconds}}秒</view>


<view>1970年1月1日至今的毫秒数：{{time}}</view>

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

toString()方法

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

now:now.toString(),

技术文档：toString()方法

响应的数据绑定

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

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

<view style="background-color:{{bgcolor}};width:400rpx;height:300rpx;"></view>


<button bindtap="redTap">让背景变红</button>


<button bindtap="yellowTap">让背景变黄</button>

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

bgcolor:"#000000",

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

redTap:function(){


    this.setData({


        bgcolor: "#cd584a"


    })


},


yellowTap:function(){


    this.setData({


        bgcolor: "#f8ce5f"


    })


},

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

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

响应的布尔操作

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

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

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

<video id="daxueVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" rel="external nofollow"  autoplay loop muted="{{muted}}" initial-time="100" controls event-model="bubble">


</video>


<button bindtap="changeMuted">静音和取消静音</button>

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

muted: true,

然后添加changeMuted事件处理函数

changeMuted: function (e) {


  this.setData({


    muted: !this.data.muted


  })


},

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

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

响应的数组操作

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

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

<view>{{text}}</view>


<button bindtap="addLine">新增一行</button>


<button bindtap="removeLine">删掉最后一行</button>

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

let initData = '只有一行原始数据'


let extraLine = [];

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

text: initData,

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

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

addLine: function (e) {


  extraLine.push('新增的内容')


  this.setData({


    text: initData + '\n' + extraLine.join('\n')


  })


},


removeLine: function (e) {


  if (extraLine.length > 0) {


      extraLine.pop()


      this.setData({


        text: initData + '\n' + extraLine.join('\n')


      })


  }


},

首先回顾一下之前的数组操作知识，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关键词来定义一个函数，括号()里为函数的参数，参数可以有很多个，使用逗号,隔开；函数要执行的代码（语句）使用大括号{}包住：

function 函数名(参数 1, 参数 2, 参数 3) {


    代码块内要执行的语句


}

不带参数的函数

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

function greet() {


    console.log("你好，欢迎来到云开发训练营");


};


greet(); //调用greet()函数

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

只有一个参数的函数

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

function square(number) { 


  return number * number;  


}; 


square(5);

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

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

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

• 实参是在调用时传递给函数的参数

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

对象的方法

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

匿名函数

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

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

let square = function(number) {


  return number * number


};


console.log(square(4))//使用console.log()输出变量square

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

箭头函数

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

const multiply = (x, y) => {


  return x * y;


}


const sum= (x, y) => x + y;//连{}和return语句都可以省掉


console.log(multiply(20, 4));


console.log(sum(20, 4));

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

调用对象的方法

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

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

JavaScript函数的写法

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

scrollToPosition() {


    },

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

yellowTap:function(){


},

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

currentTarget事件对象

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

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

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

<view class="weui-navbar">


    <block wx:for="{{tabs}}" wx:key="index">


        <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">


            <view class="weui-navbar__title">{{item}}</view>


        </view>


    </block>


</view>


<view class="weui-tab__panel">


    <view hidden="{{activeIndex != 0}}">帝都</view>


    <view hidden="{{activeIndex != 1}}">魔都</view>


    <view hidden="{{activeIndex != 2}}">妖都</view>


    <view hidden="{{activeIndex != 3}}">渔村</view>


</view>

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

tabs: ["北京", "上海", "广州", "深圳"],


activeIndex:0,

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

tabClick: function (e) {


  console.log(e)


  this.setData({


    activeIndex: e.currentTarget.id


  });


},

编译之后在模拟器里预览。当我们点击上面的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对象、数组对象、函数对象、事件对象所包含的信息不了解时，把他们打印出来即可。打印出来的结果基本都是字符串、列表、对象，而在前面我们已经掌握如何操作它们。通过实战，通过打印日志，既有利于我们调试代码，也加强我们对逻辑的理解。