霍常亮淘宝客app开发系列视频课程第6节：微信小程序数据绑定原创

喂，哈喽，大家好，我是霍成亮，非常高兴和大家继续分享，那么今天这节课我们要聊的是关于微信小程序的数据绑定。那么我们在之前的课程之中呢，咱们对小程序已经有了一个基础的了解，那么现在关于数据绑定它是什么意思？你比如说我们现在在页面上所看到的，它其实都是我们直接。输入的文字对吧，啊，我们直接在这里写上去的这种呢，和我们。常规的静态网页没什么区别，那我们后期肯定要做的更高大上一点，比如说通过一些变量来改变来展示。那么。关于数据绑定。你就可以理解为就是将一个变量，把它间接的展现在你的可视化的页面之中，那咱们还是在这里举一个简单的例子。比如说啊，我们在JS里面，嗯，就这个吧，初始化页面，那么我们之前已经讲过这些生命周期分别对应的什么意思，他你写的其他位置不是不可以在最上面呢，展示的速度会更快一点，对吧？那么我们在这里写一个数值啊，我说是。

呃，姓名。啊，注意啊，这个是半角。过量。那么我们就相当于是给姓名这个变量赋了一个值，这个值就是过长量。对吧，那么我们也可以理解为，就相当于是咱们在上一套课程中啊，我们讲语言的时候。

你可以理解为就是这个意思。对吧，那么我们在这写这段代码。和在这里写的代码内容基本上是一样的，都是给姓名这个变量赋了一个值，这个值呢就是过长量对吧？方法非常简单，那么我们如何调用呢？就是如何把它显示在咱们页面上。那预言里面对吧，那直接咱们在这，比如说那个边框啊。然后启动之后编辑框的内容。那么这个时候，当我们启动的时候，它就自动会展示出来我们所设置的姓名编辑框的内容等于姓名，而姓名这个变量的内容等于是过程量。

对吧，那么这是在地点里面的形成方式，咱们在小程序里面如何实现也很简单，把它。啊复制，然后呢，我们之前讲过。这个。叉啊叉ML就相当于HTML，那么我们想要在页面中展示，可以直接在这里进行设置，那。比如说我们在这。啊，这是文本嘛。啊，在这，那我们直接把这个姓名那写上行不行，那我们试一下。这个时候你会发现它直接显示的就是姓名这几个字母，而没有显示姓名这个变量所对应的值。对不对，那么这个时候怎么办？那有人说了，我加个引号来，我告诉你加个引号行不行。

好，我们现在加个引号试一下。还是会报错对不对，所以说不是加引号的事儿，那么在这个位置我们应该有什么符号，用大括号。好，我们再来编一下。诶，我们加个大括号，它为什么还会跳错。我们来看一下下面的错误提示。只要你能看得懂的，对吧，错误是哪里。是这个JS对吧，那就是说我们要在这个JS里面找错误，那我们来看一下是哪的错误。啊，是这一行对吧。

那么这个时候我们会发现我们这里写的是什么？是等号啊，说我一元里面写的是等号，那这里是等号吗？不是啊，我们把它换成冒号。然后再来保存试一下。诶，这个时候就出来了，那么有人说这个冒号不用半角的，我用全角的行不行，来咱们试一下。现在呢，这个是全角的，再来编译一下。这个时候又报错了，对不对。所以说呢，这个格式大家一定要记住啊，我把常见的错误给你演示一下，这都是我刚开始学的时候所走的弯路。因为你将来也可能会遇到，你看了视频之后哦，你就知道哦，是这个错误，你就能够避免这个弯路，对吧。记得这里是半角啊，然后来编译。那么我们在这呢，你可以改成其他的对吧，可以。

烟瘾。没有任何问题，对不对？好，那么这个呢，就是一个简单的数据绑定和渲染，其实在我们预言里面就是这么两个代码。就是这么两个呢，一个是负值，注意负值这里用的是冒号，不是等号，还有一个就是在这里。不是直接用引号引，也不能直接写，而是要用两个大括号啊。好的，这个就是要要讲的第一个知识点，那么第二个知识点呢，要比它更复杂一点了，那比如说我们想实现一个动态化怎么着。在这里啊，咱们想要让它变化啊，说我每隔几秒钟就变一下，那么这就涉及到一个新的知识点了啊，你想啊，就像我刚才所描述的一句话，想让它间隔一段时间之后变化，那么一段时间之后变，这个是一个命令啊，那么这个命令是什么？我们来看一下幻灯片。

在这里呢，我们已经有了，对吧。Set time out，它呢就是属于一个Windows方法，该方法用于在指定毫秒，注意啊，这里加个红。毫秒数后调用函数或者计算表达式。那么我们。按照他所描写的，咱们设置一下啊塞out对吧，好，我们找到刚刚。好，那么上面呢，我们是初始化数据页面，初始化这个呢，我们就写在写在这里边啊，进行页面加载啊，那么我们在这刚才讲的set。

有没有探旺的，有对吧，那咱们就省得打了。之后半角的括号。啊，你打到这的时候。它就会有一个提示。设置一个定时器，在定时到期之后执行注册的回调函数啊，就是对这个定时器的啊，就是对这个函数的一个简单的解释，然后我们我们也可以看一下它上面包含的函包含的参数啊，字面意思呢，就是两个，一个是设置的时间，一个是设置就是回调函数对吧？所以说我们在这需要有一个逗号啊，这个逗号就是用来分割咱们所说的这两部分参数后面。是回调函数，比如说咱们设置一个3000啊，那这个3000呢，是3000毫秒，对不对？毫秒和秒之间的换算单位是1:1000，所以说这里写3000实际上就是三秒钟，那么三秒钟之后，我们想要让它变化，需要执行一个变化的函数，对不对，那在这里。

我们就需要有一个回调函数啊，做一个变化。然后我们在这里呢，又会遇到一个新的知识点啊，那么可能第一次看到这种代码的时候，有同学会问，诶，这个小这个小括号，然后等号，然后一个箭头，然后一个大括号，这什么意思，这种呢叫做箭头函数，那么我们可以看一下幻灯片，在上面的这个网址中有非常详细的介绍啊，下面的这个图片大家也可以看到，其实用最简单的。理解就是说它是一个方式的一个简写，对吧。RF等于V，然后变成函数，然后一个V，那么它就等于啊，说白了就是一个方式V，然后返回一个V，就是这样的一个意思啊，看不懂没关系，上面有非常详细的解释啊，详细解释还看不懂也没关系，你只要暂时先这样背啊，等到后期我们写的多了，你自然也就知道。

好，那么我们对了。对时间进行了一个定义，对吧，就是这个是多久时间之后啊，咱们后面写了一个3000毫秒，就是三秒之后要执行，比如说我们想让这几个字变化成另外的字，那么该怎么写，那这个时候我们在。需要对新的数据进行一个。定义变量。然后这呢，就会涉及到一个新的知识点，就是this set data对吧？那么在微信小程序中经常会用到这个命令，呃，你可以把它理解为就是变量渲染到视图层，说白了就是把变量让你看出来，让那么它呢，主要用于将逻辑当数据发送到视图层，同时改变N得N得N啊，你知道第一句话就可以了，那至于工作原理什么的，有时间你自己去看。小程序的视图目前使用于web meal作为渲染载体得，实际上你你可能也不太理解，你只要知道它就是把你所想这个变量变成所示就好了，那么它。

就是我们要用的啊，这个命令我们把它复制下来啊，我手动挡吧，让大家熟悉一下。看看有没有快捷方式啊，没有，那只能是打一下。啊，有了这。好，那么我们在后面。这个时候你在敲第一个的时候，它就会有一个提示，啊，这次要改变的数据以T等于六的形式表示，将this date中he对应的值改变为will。

对吧，那么我们在这应该怎么减。T就是。我们上面所写的这个条目对吧？啊姓名或长亮，那么在这我们要改的话，应该怎么改。我们上面要改什么，咱们就把它复制下来不就可以了吗？对吧。和它复制，然后粘贴到这对不对，那这里我想改成比如说是微信。好，那这样是不是就可以了。我们来试一下啊。123变对吧，那么这个时候它就已经变了，好，那么还有一个新的问题啊，就是说这里的这个。Date它呢，我们就是要处理的是它，而那这里的这个配它对应的是什么，这个呢，就是上面的这个配置。

对吧，你在别的页面啊，这里也可以加，这里也可以加，都可以加这个Z，那么不同的Z，他所定义的可就不是说咱们这个页面这个配置，那可能是别的页面的配置啊，这个大家需要注意一下。再有呢，就是关于这个改变数据啊，你如果说在E语言里面，你直接就写了对不对，一行就完事了，但是在这呢，你还得加个大括号。看到了吧，这是一个大括号，这是开头，这个结尾啊，我们得把它一个大括号引起的，这样才可以，这是一个固定的格式，大家记住就好啊。好的啊，这个呢，就是关于数据绑定啊，我们讲了两个话题，第一个呢，就是直接走这么一个在这啊，这就算是一个静态的对吧？第二个呢，咱们在JS里面又写了一个对吧？这就相当于是一个动态的啊，两种方式大家可以仔细研究一下啊，后面的字你都可以随便去更改啊，都没有关系的，好的，感谢大家关注，我是火长亮啊，这节课咱们跟大家分享到这里，谢谢。