[视频] 你好，我是李艺。 上节课我们主要学习了一些WXSS优化技巧，及如何使用gulp工具，清理无用的WXSS样式代码，这节课我们学习UI交互方面的优化技巧。 首先看一下问题，根据小程序官方的微信小程序设计规范，可单击元素的单击区域宽高最低不能小于20px，小于这个大小一般人就很难点中了，开发者在进行组件设计的时候，必须考虑组件的交互操作对于大多数人是否易于完成，下面看项目实践。 首先看实践一，使用padding改变单击区域大小。 对于按钮类的组件可以通过改变它的内边距样式，也就是改变padding样式，改变它的可单击区域大小，样式代码及标签代码，如我们屏幕上看到的所示。 下面我们进行代码演示。 我们需要创建一个新的按钮组件，首先我们在最终的源码里面看一下，最终的代码是如何实现的。这里有一个switch_buttona这样的一个新组件，我们将这个组件给它拷贝一下，放在我们目前的项目的目录下，这里面有两个样式，我们先把它注释掉，接下来我们需要引入去使用，引入和使用这一个新组件，把它放在这个地方，这个名字和下边这个名字稍微有点不太一样，最后在这个标签页面里面进行使用它了，放在第二个格子里面，这个代码已经完成了。下面我们单击编译测试一下效果，这个地方有了问题，刚才我们在添加了对新组件的使用以后，在调试区看到一个错误，这个错误在我们在工具栏当中选择全面清除以后，选择全面清除或者是清除编译缓存也可以，然后再次单击编译，那么我们刚才看到错误便不复存在了，这样的问题我们也不需要去深究，清除缓存以后，只要可以正常运行就可以了，这可能也是我们在模拟器里面测试的时候，本身清除编译缓存按钮它需要存在的一个理由之一。接下来我们看一下新组件的一个表现，这是我们一个新的组件，然后switch文本下方有一个浅色的背景色，但是周围没有，我们可以看到我们其实是很难单击，然后很难击中 很难使它变成一个单击态，如果它变成一个单击态它这个背景我们可以看到，它会明显的会变成一个稍微深一点的颜色 ，但是我们当我们单击到旁边的时候，它其实不容易被选中了，这种情况我们应该怎么优化。我们可以使用样式，将我们刚才特意注释掉的这两个样式，一个是padding，这是设置它的内边距，另外一个是min-width，这是设置它的一个最小宽度，将这两个样式给它反注释，完成以后我们再单击编译按钮进行测试，这个时候我们看到这个按钮它现在更像一个按钮了，文本旁边它会有一个类似于方形的这样的浅色背景区域，我们单击，即使单击到按钮的边角的位置，它也会呈现一个选中的状态，代码演示就到这里。 下面我们看实践二，使用伪元素改变单击区域大小。 对于不方便使用padding改变单击区域大小的组件，我们可以通过伪元素扩大可单击区域样式代码，如我们现在在屏幕上看到的截图，在使用伪元素扩展按钮的单击区域以后，即使在按钮旁边的空白处单击 该按钮也能响应。 下面我们看代码演示。 首先我们在项目里面我们需要添加一个新的按钮组件，我们看一下最终的一个实现的代码，这是我们准备使用伪元素实现的新的按钮组件，这个里面我们用了after这样的一个伪元素，我们将组件目录直接复制一下，到我们的目前的项目的目录下，我们原来的组件名叫做switch_buttona，现在叫做switch_buttonb，它俩的主要的一个区别，在这个里面，其实没有什么区别，主要是样式上的一个区别，在样式里面主要是这个地方它用了一个伪元素，after这样的伪元素，在这个里边有两个信息，我们需要先给它处理一下，将这行代码给它注掉，注掉以后，然后我们需要在我们的主页面里边引入新的按钮组件，这是原来的组件，我们将这个给它复制一份，把后面这个地址改一下，前面这个名字改一下，然后在页面标签代码里面，将这个地方消费代码拷贝到下面，然后将这个标签的名称然后给它改掉，这样就可以了。完成以后单击编译按钮来进行测试。 我们在模拟器上看它的一个表现，最右边底色为黄色的，这个是新添加的按钮组件，然后当我们在按钮以外的空白处进行单击的时候，发现它可以轻松进入一个单击态，被单击的一个状态，即使离它很远，也可以触发这样的一个状态，这个就有问题，也就是说我们单击到任何一个地方都会触发它，而我们原来的这个地方当然也是可以触发，但其实这样是不对的 ，下面这个不可以 但上面这个我们发现单击以后，然后都会触发对它的单击，这是不对的，这个问题是怎么产生的，为什么会出现这个问题。样式，肯定是样式搞的鬼，我们可以使用调试区的选择工具，选择它，选它以后我们可以看到这个地方就是switch_buttonb了对不对，这就是我们自定义的组件，然后当我们选择的时候，我们往下单击的时候，其实它多了一个button_over，然后同时这个地方也有变化，但是这种属于待交互的这种样式，其实是很不方便在调试区直接进行查看的。我们目前的问题它其实很简单，关键就在于我们这个地方刚才已经注释掉的这样的一个样式，position等于relative，位置样式等于相对，而里边它里面after，也就是它挂载的伪元素，在它后面挂载的伪元素，它的位置样式position等于absolute是绝对的，当我们如果想使用伪元素，想给按钮添加一个附加的这样的一个可单击区域的时候，我们需要将样式设置为absolute，同时将它按钮本身也就是它的父元素，position设置为relative，这样的话才可以保证它样式的一个工作正常，我们修改完以后然后重新编译，再看一下它的一个运行效果。 单击，在其他地方单击没有效果，在这里单击有效果，当然了我们现在这个地方它其实还不太好，那是因为它比较小，如果我们愿意的话，其实还可以把它再改的更大一点 也是可以的，我们可以在这个地方进行调试 看一看，当我们选中after伪元素的时候，我们可以看到它所覆盖的区域，其实在这个背景色的外面对不对，所以我们在背景色外面单击的时候，这个按钮也会被触发单击，我们看到的背景，黄色背景它是怎么搞的，它其实是它决定的，如果我们想要背景色扩大一点，我们可以加在after上面给它加一个背景色，加完以后我们再单击测试一下 看它的表现，现在整体上都变成黄色了，对不对，但是这个效果也不是我们需要的效果，因为它这样的话，这样一来的话，它本身按钮的文本又不能显示了，所以这种效果它其实适合于什么，适合于我们不需要改变它本身的一个样式，我们前面这个，我们不需要给它加一个很大的背景，一个彩色背景，我们只需要扩大它的一个可单击区域，所以可以用这样的一种方式不影响它的UI，但是又能扩大可单击区域，使用这种方式是最恰当的了，这个代码演示就到这里。 点击查看开放文档： 性能与体验 /体验评分 /评分方法与规则 /体验这节课我们就讲到这里，上面的网址是本课涉及的文档地址。 这节课我们主要学习了如何通过padding样式或伪元素样式，扩大元素的可单击区域，下节课我们学习脚本优化技巧。 最后我们看一下思考题，这里有一个问题请你思考一下。我们知道使用JS开发项目不需要操心内存的管理，因为JS的宿主环境一般都带有一个垃圾内存回收器，俗称GC，GC的工作原理可以简单认为是引用计数，当一个对象不再被其他任何对象所引用的时候，那么这个对象便可以成为GC的回收对象，考虑到GC的这种工作机制，在项目里面我们应该如何避免不再使用的对象，因使用不当而被GC回收？如果有大内存对象不能及时被垃圾回收，同时还随着程序运行又被疯狂的创建，那么这种情况下是非常容易出现内存泄漏问题的，这种情况我们应该如何避免和优化？下节课我们就一起来深入探讨一下这个问题。