微信小程序开发入门（五）

任亚飞

本期我们学习条件渲染和事件绑定。条件渲染指当符合某个条件就选用某种样式。而用户行为可以在渲染层通过事件这种通信方式反馈到逻辑层，然后由逻辑层判断进行业务处理。而事件绑定，就是将事件绑定在组件上，当事件被触发时，就会执行逻辑层中对应事件的处理函数。

一、条件渲染

wx：if 和hidden 对比， 因为 wx：if 之中的模板也可能包含数据绑定，所以当wx：if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。同时 wx：if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单得多，组件始终会被渲染，只是简单的控制显示与隐藏。一般来说，wx：if 有更高的切换消耗而hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx：if 较好，具体实例代码如图1。

本次内容由于建了新的项目，所以代码部分在新项目index 页面里编辑和展示（图1）。

Index页面--wxml标签

wx：if 在框架中，使用 wx：if="" 来判断是否需要渲染该代码块。第2 行，当条件判断为真，显示“电脑报”这几个字。第3 行，通过wx：if="{{false}}" 条件判断为假，把显示的“隐藏”两个字隐藏起来。

编译保存，大家查看模拟器的变化并掌握与代码的关系。

第5 行， 通过wx：if="{{false}}" 条件判断为假，把“电脑报1”这几个字隐藏起来。第6 行，通过wx：elif="{{false}}" 条件判断为假，把“电脑报2”这几个字隐藏起来。第7 行， 通过wx：else="{{true}}" 条件判断为真，把“电脑报3”这几个字展示出来。

编译保存，查看模拟器展示的内容，注意展示部分与隐藏部分的区别。

第8 行，hidden 控制隐藏， 第一种标签里面空格加- hidden（）， 直接控制隐藏“hidden1”这个标签。第9 行，第二种标签里面使用（），直接控制显示hidden2 這个标签，如果为true 就会隐藏“hidden2”这几个字。

二、事件绑定

通过图2 案例需求来理解事件绑定：这是一个小程序的页面，上面为数字输入框，下面为数字输入框的映射区。也就是说，上面输入什么数字，下面就显示什么数字。点击加号在映射区加1，点击减号就在映射区减1（图2）。

打开app.json，新建页面“pages/sj/sj”，打开pages.sj.js 标签，保留data 部分，删除其余的所有的代码。写入data： {num：0}， 。

1. 功能1，输入框输入。打开pages.sj.wxml 标签，写入。

input 是输入框组原生组件，type="text" 说明输入的属性是文本类型。如果type="number" 那就是数字类型，更多属性大家可以查看微信开发者文档。

bindinput：键盘输入时触发一个函数，="sj" 触发sj 这个函数，相当于绑定了一个事件，"sj" 其实就是事件的首拼，由于作者的英文不好，起名习惯用拼音。

注意：input 里面的结束符/ 别忘了，保存编译查看模拟器，点击模拟器左上方，能否实现输入文本，输出效果如图3。

2. 功能2， 映射输入框的数字。在pages.sj.wxml 里输入{{num}}。用两个大括号包裹了js.data 里面的num。目前num 值为0，此时编译看到的就是一栏输入框，二栏是0。

在input 组件绑定了一个函数bindinput="sj"。回到pages.sj.js，跟data 同层级写入函数sj（e）{console.log（e）}。那么pages.sj.wxml 里面的bindinput="sj" 也就绑定成功了。注意：sj函数名，小括号e 是要执行的事件。大括号里console.log 就是要打印这个事件，这个事件就是小括号的e。

函数的格式为函数名后跟一个小括号，再一个大括号，小括号里的e 是自定义的。编译测试，输入12，查看调试器，我们看到了两个三角形符号和一个1，展开三角形符号的内容。具体如图4。

发现detail.value 就是输入的值，把它赋值到data 的num，就能实现需求2 了。删除刚写的console.log（e），改为

this.setData（{

num：e.detail.value }）

其中，sj 是函数名；data 里面的num是detail.value 的值，也就是我们输入的值。

3. 功能3，映射区反应点击加减号的效果。打开pages.sj.wxml，添加以下代码：

< b u t t o n t y p e = " d e f a u l t "b i n d t a p = " s h u j u j i a j i a n " d a t a -operation="{{1}}">+

button：按钮组件；type="default"：属性颜色，比如type 属性等于"default"白色的表达式。

bindtap：触发+ 号时绑定事件或者函数，比如绑定"shujujiajian" 这个函数。

data-operation="{{1}}"：js 里面的data.operation 加1，button 包裹+ 号。

< b u t t o n t y p e = " d e f a u l t "b i n d t a p = " s h u j u j i a j i a n " d a t a -operation="{{-1}}">-

data-operation="{{-1}}"：讓js 里面的data.operation 减1，button 包裹- 号。

打开pages.sj.js，跟data 同层级写入函数shujujiajian（e）{ console.log（e）}，此时我们就把pages.sj.wxml 里面的bindtap="shujujiajian" 绑定成功了。

查看调试器，检查加减功能，顺便查看operation 是从哪里得来的（如图5）。

完善shujujiajian 函数， 删除console.log（e），注：此代码是方便理解和怎么拿到operation 的值。Shujujiajian：绑定事件函数名。

const operation=e.currentTarget.dataset.operation;：声明operation 等于触碰加减号时的dataset.operation。

this.setData：调用data 里的属性。

num：this.data.num+operation： 属性num 是datal 里的num 加operation。