你好，我是李毅。

上节课我们主要学习了一些 WXSS 的优化技巧和如何使用 gulp 工具清理无用的 WXSS 样式代码。这节课我们将学习针对 UI 交互的优化技巧。

首先我们来看问题。根据微信小程序官方设计规范，可点击元素的点击区域最小宽高不能小于20px，如果小于这个尺寸，一般人点击起来会比较困难。开发者在设计组件的时候，一定要考虑组件的交互操作是否一般人都能轻松完成。下面我们来看项目实践。

首先我们来看一下练习1，用它来改变点击区域的大小。

对于按钮类的组件，可以改变它的样式，也就是改变样式，改变它的可点击区域大小，样式代码和标签代码，如屏幕所示。

我们来演示下面的代码。

我们需要新建一个按钮组件，首先我们看一下最终的源码，看看最终的代码是怎么实现的。这里新建了一个组件，我们把这个组件复制过来放到我们当前项目的目录下，这里有两种风格，我们先把它注释掉，接下来我们需要导入和使用，导入和使用这个新建的组件，放到这个地方，名字和下面这个名字稍微有点不一样，最后在这个tab页中使用，放到第二个格子里，代码就完成了，接下来我们点击编译，测试一下效果，这里有一个问题，刚才我们添加完新建组件的使用之后，在调试区看到了一个错误，这个错误可以在工具栏里清除，选择全部清除之后，也可以选择全部清除或者清除编译缓存，然后再次点击编译，那么刚才看到的错误就不会存在了，这样的问题我们不用去深究，清除缓存之后，只要能正常运行就没问题了。 这可能也是我们在模拟器中测试的时候， 按钮本身需要存在的原因之一。接下来我们来看看新组件的表现。这是我们新加的一个组件，在文字的下方有一个浅色的背景颜色，但是周围没有。我们可以看到它其实是很难点击的，很难击中，很难让它变成可点击的状态。如果它变成了可点击的状态，我们可以看到它的背景显然会变成稍微深一点的颜色，但是当我们点击旁边的时候，它却不容易被选中。我们应该如何优化这种情况呢？我们可以用把刚才注释掉的两个样式注释掉，一个是设置它的内边距，一个是min-，设置它的最小宽度。把这两个样式取消注释。完成后，我们点击编译按钮进行测试，这时候我们看到这个按钮现在更像一个按钮了，在文字旁边会有一个类似于正方形的浅色背景区域。 当我们点击的时候，即使我们点击的是按钮的角落，它也会呈现选中状态。代码演示到此结束。

接下来我们看做法2，利用伪元素来改变点击区域的大小。

对于不方便改变点击区域大小的组件，我们可以使用伪元素来扩大可点击区域样式代码。如我们现在在屏幕上看到的截图所示，使用伪元素扩大按钮的点击区域之后，即使点击按钮旁边的空白处，按钮也会有反应。

我们看下面的代码演示。

首先我们需要在项目中增加一个新的按钮组件，我们来看看最终的实现代码，这个就是我们要使用伪元素来实现的新的按钮组件，我们在这个里面就用到了这么一个伪元素，我们将组件目录直接复制到我们当前项目的目录下，我们原来的组件名字叫，现在叫，这两者主要的区别其实在这个上面是没有区别的，主要就是样式上的区别，在样式上它主要在这个地方用到了一个伪元素，这样的伪元素里面有两点信息，我们需要先处理一下，将这一行代码注释掉，注释掉之后，我们需要在我们的主页面中引入一个新的按钮组件，这个就是原来的组件，我们将其复制过来，将后面的地址改一下，将前面的名字改一下，然后将这个地方的消费代码复制到页面标签代码中的下面，然后改一下这个标签的名字，就可以了，完成后点击编译按钮就可以测试了。

我们看一下它在模拟器上的表现，最右边那个黄色背景的就是新增加的按钮组件，当我们点击按钮外面的空白处的时候，发现它很容易就进入点击的状态，甚至距离它很远的地方，都可以触发这样的状态，这个就是有问题的。也就是说我们点击任何地方都可以触发它，我们原来的地方当然也可以触发，但是这个其实是不对的，下面的这个是不能触发的，但是上面的这个点击之后就可以触发，这个是不对的。这个问题是怎么产生的呢？为什么会出现这个问题呢？一定是样式出了问题，我们可以用调试区里的选择工具来选中它，选中之后我们就可以看到这个地方了，对吧？这个就是我们自定义的组件，当我们选中它之后，当我们点击下去的时候，它其实就多了一个，同时这个地方也发生了变化，但是这个等待交互的样式其实在调试区里直接查看的话，是非常不方便的。我们现在的问题其实很简单。 关键就在于我们刚刚注释掉的那个样式，相当于位置样式是，而它里面的伪元素，也就是它挂载的伪元素，挂载在它后面的伪元素，它的位置样式是。如果我们要使用伪元素，并且想给按钮增加一个额外的可点击区域，就需要将样式设置为，同时将按钮本身，也就是它的父元素设置为，这样才能保证它的样式正常起作用。我们修改完重新编译之后，我们来看看它的运行效果。

在其他地方点击是没有效果的，但是这里却可以。当然这里效果不是很好，因为它比较小，如果我们愿意的话，其实是可以把它弄大一点的，我们可以在这里调试一下看看。当我们选中这个伪元素的时候，我们可以看到它覆盖的区域，其实它就在背景色之外，对吧？那么当我们点击背景色之外的时候，按钮也会被触发点击。我们看到的背景，黄色的背景，它到底是干什么的呢？其实是由它决定的。如果我们想要背景色大一点的话，我们可以给它添加一个背景色，添加完之后我们再点击一下，测试一下它的表现，现在它全是黄色的，对吧？但是这个效果并不是我们需要的，因为如果这样的话，那么按钮本身的文字就显示不出来。那么这个效果其实适合什么场合呢？它适合于我们不需要改变它的样式的时候。就我们前面这个，我们不需要添加一个大的背景，一个有颜色的背景。 我们只需要扩大它的可点击区域就可以了。所以我们可以使用这种方法，不影响它的UI，但是可以扩大可点击区域。这种方法是最合适的。代码演示到此结束。

点击查看打开的文档：

这节课就讲到这里，上面的URL就是这节课涉及的文档地址。

这节课我们主要学习了如何通过样式或者伪元素样式来扩大元素的可点击区域，下一课我们将会学习脚本优化技巧。

最后我们来看需要思考的问题。这里有一个问题需要大家思考一下。我们知道在使用 JS 开发项目的时候，是不需要担心内存管理的，因为 JS 的宿主环境一般都自带了垃圾内存收集器，俗称 GC。GC 的工作原理可以简单认为就是引用计数，当一个对象不再被其他任何对象引用的时候，那么这个对象就可以成为 GC 回收对象。考虑到 GC 的这种工作机制，我们应该如何避免项目中不再使用的对象因为使用不当而被 GC 回收呢？如果有占用大内存的对象不能及时被垃圾回收，在程序运行过程中被疯狂地创建，那么这种情况就非常容易出现内存泄漏。我们应该如何避免和优化这种情况呢？下一节课，我们会深入讨论这个问题。