我的知识记录分享
在数据绑定章节，我们已经掌握如何把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里的各个属性，而在数据绑定章节，这些数据是可以直接渲染到小程序的页面的。
我们发现{{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：
function()点击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" autoplay loop muted="{{muted}}" initial-time="100" controls event-model="bubble"> </video> <button bindtap="changeMuted">静音和取消静音</button>
然后给在data.js的data里新增
muted: true,
然后添加changeMuted事件处理函数
function (e) 在开发者工具的模拟器里点击按钮，我们发现静音和取消静音都是这个按钮。这里的感叹号 !是逻辑非的意思，可以理解为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的事件处理函数：
function (e) 首先回顾一下之前的数组操作知识，push为往数组的末尾新增数据，而pop则删除数组末尾一行的数据，join为数组数据之前的连接符。
点击按钮新增一行，触发绑定的事件处理函数addLine，首先会执行extraLine数组新增一条数据“新增的内容”，但是这时extraLine和text还没有关系，这时在setData()函数里将initData和extraLine进行拼接（注意extraLine本来是一个数组，但是调用join方法后返回的是数组的值拼接好的字符串）。点击按钮删除最后一行，会先删除extraLine数组里最后一行的数据。
小任务：新增内容过于单一，我们可以给它后面添加一个随机数，将 extraLine.push('新增的内容')改成 extraLine.push('新增的内容'+Math.random())，再来看看新增数据的效果，关于Math.random()大家可以自行去MDN查阅。大家也可以把拼接的连接符由 n换成其他字符。
在前面的列表渲染里，我们知道点击电影列表里的某一部电影，要进行页面跳转显示该电影的详情，我们需要给该电影创建一个页面，那如果要显示数千部的电影的详情，一一创建电影详情页显然不合适，毕竟所有电影的详情页都是同一一个结构，有没有办法所有电影详情都共用一个页面，但是根据点击的链接的不同，渲染相应的数据？答案是肯定的，要解决这个问题，首先我们要了解链接组件的点击信息。
当点击组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象，通过 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。
function (e) 编译之后在模拟器里预览。当我们点击上面的tab时，触发tabClick事件处理函数，这时候事件处理函数会收到一个事件对象e，我们可以看一下控制台打印的e对象的内容，关于e对象具体属性的解释可以看技术文档。
技术文档：事件对象
currentTarget就是事件对象的一个属性，我们可以使用点表示法获取到点击的组件的Id，并将其赋值给activeIndex，所谓active就是激活的意思，也就是我们点击哪个tab，哪个tab就激活。
当我们对字符串、Math对象、Date对象、数组对象、函数对象、事件对象所包含的信息不了解时，把他们打印出来即可。打印出来的结果基本都是字符串、列表、对象，而在前面我们已经掌握如何操作它们。通过实战，通过打印日志，既有利于我们调试代码，也加强我们对逻辑的理解。
发表评论：