你好，我是李毅。

我们先来看问题，wxss 样式也会影响组件或者页面的运行时性能，这个非常值得我们关注。总体来说，小程序的页面设计应该符合微信小程序设计规范，样式要简洁实用。开发者在优化 wxss 样式代码的时候，最常遇到的问题就是如何删除项目中无用的 wxss 样式代码。好在现在有一款 gulp 插件可以帮我们自动解决这个问题，下面我们来看看代码实践。

我们先来看一下练习一，为滚动组件启用惯性滚动。

默认开启惯性滚动，iOS 需要额外设置，例如首页长列表组件，适合添加一个名为 --- 的样式，设置其值即可开启惯性滚动。

以下是练习一的代码演示。

首先我们来看一下我们的首页的样式。在首页的标签代码中，我们使用了一个叫-view的组件。它上面有一个样式，我们来看一下它的样式文件中的代码，相关的代码。这个是它的标签样式，也就是组件样式。在它上面，我们可以添加一个---，这样的样式，然后我们可以设置这个值，在我们输入前面的字符之后，它会自动帮我们完成后面的字符。在上我们不需要设置这个属性，但是在iOS上我们需要额外设置。不过就算我们的代码跑在设备上，也没关系，额外的代码本身不会带来额外的负面影响。通过这种方式，就可以同时在iOS设备和设备上启用惯性滚动了。代码演示我们就到此为止了。

接下来我们看做法2，使用-来实现按钮的点击状态。

在小程序开发中，可以使用 : 伪类来实现按钮的点击状态效果，但是这种实现方式有一个缺点，事件太容易触发，动态滚动时点击状态不容易消失，而且在某些老款的iOS设备上也容易失效。在MDN文档中，我们可以看到这样的描述。如屏幕中的这段文字所示，默认情况下，iOS设备上的浏览器不会使用 : 状态，除非关联元素上有事件监听器。虽然小程序的运行环境和浏览器不同，但是在iOS设备上，需要通过引入iOS平台的 , 组件来实现视图渲染。在点击状态的实现上，特别是在老款iOS设备上，可能还会受到相关规则的影响。因此小程序官方建议我们使用内置的 - 属性来实现点击状态，这个属性是小程序自己定义的，本身并不存在。使用该属性替代原有的 : 伪类来实现组件的点击状态。 比如我们现在在屏幕上看到的截图组件，它有一个点击状态的实现，这个实现是通过组件的 ,- 属性实现的。

我们看下面的代码演示。

我们需要实现一个自定义的点击，一个带有点击状态的按钮。我们先来看最终的代码实现结果，找到我们的代码，这里有一个，这是我们要实现的自定义按钮的代码，然后我们把它复制到我们现有的项目中，已经放进去了，这是它的标签代码，这是它的样式代码，分为两种，这个用到了伪类：这是一个伪类，使用伪类来实现点击状态的样式代码，下面是--属性我们需要用到的一个样式类，我们先把下面这个注释掉，使用上面的，同时把我们的地方的属性设置删除，组件定义好之后，我们就开始在首页上引入、引用和使用，首先我们来看一下最终用到的代码，第一步是引入一个组件，这个组件可以放在最上面，接下来就是在标签代码中对组件的使用，在秒表组件的下面，我们新添加一个组件，放在这里，这个地方还涉及到一个样式。 我们可能需要把相关的样式复制过来，这两个这里已经有了，就让它们覆盖住就行了。这是新增加的标签代码以及它需要的样式。在这段代码中我们主要把我们的屏幕从左到右分成了三个网格，然后在第一个网格中放了这样一个组件，后面两个网格目前是空的。然后看一下我们的样式，简单来说，这里面用到了flex布局，并且有一个--设置，用来等分我们的容器和它的子元素，而父容器本身的宽度就是为了达到这样的等分效果。这段代码是重新写的。

我们点击编译，测试一下。我们把鼠标放到上面，按下去，现在已经出现了点击状态，我们可以看到文字变成了白色，按钮的背景色也发生了变化，这就是一个点击状态。现在我们可以再看一下我们对于点击状态实现的代码，目前我们使用的是伪类：然后是伪类来实现，接下来我们换成我们前面说的，使用-来实现。这里具体的样式代码和上面的是一样的，我们重新定义这样一个样式，然后把名字复制到里面。在我们组件的标签代码中，给组件添加一个-，然后让它等于就可以了。这样就完成了，我们刷新一下，测试一下，基本上运行效果和之前是一样的，但是因为我们是在模拟器中测试，所以看不出区别。不过在处理一些自定义按钮的点击状态的时候，我们应该优先使用-来实现点击状态的效果。代码演示就到此为止了。

我们看做法三，使用gulp工具删除无用的wxss样式代码。

首先我们需要安装gulp工具以及它的gulp-，指令就如现在屏幕所示，安装完成后我们还需要创建一个.js文件，这个文件就是gulp的配置文件，它提供了使用gulp指令时的配置信息。在.js文件中，如我们屏幕所示，每一个task都是一个任务，是默认的任务，必不可少。每次执行gulp指令的时候，如果我们不指定任务名，那么就会默认执行这个任务。当项目中有.js文件的时候，我们可以直接在终端执行gulp指令，gulp处理完之后会把处理后的文件放在上级目录的dist目录下，生成的文件并不会覆盖原有的文件，我们需要手动将生成的文件复制到原位置然后再进行覆盖，这个工具是怎么工作的呢？一般小程序中的页面样式文件和页面标签文件都是放在同一个目录下的。 gulp 工具首先会找到 wxml 文件，同时打开他们的 wxss 文件，然后读取 wxml 文件中的标签代码并生成 DOM 树，然后把 wxss 文件中的所有样式作为选择器，如果找不到元素，则会删除对应的样式并统一处理，最后将结果写入新的文件中。使用该工具时要注意组件内的样式，尽量放在组件内，而不是放在组件外的页面样式文件中，否则容易被工具误清理。在定义组件时，组件本身的样式是被隔离的，保持这种状态也有利于保持组件样式的完整性和独立性。

我们看下面的代码演示。

首先第一步我们需要在我们当前的项目目录下新建一个类似这样的目录，我们会在这个目录下实现一些清除样式代码相关的脚本，我们在目录下打开集成终端，首先我们添加一个Node.js的工具，这里我们可以全局的添加gulp,yarn,add的使用，gulp然后添加，添加之后因为我这里已经安装好了，所以很快就会消失，接下来我们会在我们当前的目录下添加自身以及一个叫这样的插件的插件，然后执行，安装指令可能需要一点时间，在这段时间里我们可以准备一下我们需要的三个脚本，我们可以找到我们最终的源代码目录，在这个目录下我们会有几个文件，一个是gulp，也就是我们的gulp文件，把这个文件给它，我们应该可以自动生成这个文件，所以不需要复制，我们将这个.js文件复制过来放到新创建的目录中。 然后我们可以看到上面的文件，也就是 .json 这个文件里面已经包含了我们刚刚在本地添加的两个模块。我们需要重点关注一下 .js 文件gulp ，也就是这里面所谓的任务，我们可以执行的任务都是在这个文件中定义的，首先我们需要给这个文件定义一个任务名，然后后面就是要执行的代码，对于要执行的代码，我们需要处理父目录，也就是它下面有一个样式文件，处理完之后我们把结果放到当前目录下的dist目录下。然后第二个任务就是我们需要处理分包下面的页面，处理它里面的样式，还有用户，一共三个，三个，现在我们已经安装好了，模块已经安装好了。

安装完成之后我们可以尝试执行我们的命令，第一个我们可以执行，当然我们可以不写，不写的话它默认会执行任务，不会执行另外两个，从这里我们可以看到它会删除很多的样式，全部删除就好了。然后我们看一下生成的文件，它也会处理骨架屏，但是我们处理骨架屏不需要它，我们只需要处理首页和样式代码就可以了。处理完之后我们可以看到这个页面也被保留了下来，虽然这个页面在我们的wxml标签代码中是不存在的，但是它还是被保留了下来，这是理所应当的。然后对于一些我们找不到的，就把它们删除。当然这里还有一点需要注意，以demo开头的都是我们代码中动态用到的样式，所以是不能删除的。所以我们还要做一件事，这个工具本身还不是很完善，只能做静态的识别，不能识别动态的。 所以我们其实是需要保留这些代码的，我们可以把这些代码复制过来，然后放到这个文件里，放进去之后，一共是208行代码，然后我们看一下原来的文件，是236行，代码行数减少了，说明删除了一些样式，这是第一个。

接下来我们去执行第二个任务，也就是user。我们看一下这个地方，它会有一些提示，让我们看看最后它到底生成成功没有，目标文件在这里面，它生成的就是这个。然后这个文件是210，生成之后是210，我们可以再看一下原来的，也是210，所以这个文件基本是没有被删除的。然后我们再看一下分包，注意这里的错误，有一个错误提示，为什么会出现呢？跟我们的源码有关系，我们看一下我们的源码，里面有两个引用，因为这两个引用，所以导致了错误，我们可以先把这两个引用去掉，然后再执行，就不会有问题了。然后在我们生成的这个文件中，我们看一下我们的dist目录，找到它，在这个目录下生成，然后在最上面加上这两行引用的代码，最终的代码是75行。 然后我们看一下原代码，同样是75行，基本没什么变化，有冗余样式代码就会删除，如果不存在基本就不会删除。

接下来为了进一步对比处理前后文件的差异，我们可以同时打开我们的源文件，源样式文件，还有我们生成的文件，我们可以先按住选中一个，然后同时选中它们，然后右键菜单选择比较选中的项，我们要选中这个，选中这个之后，这个是它自带的一个比较功能，它会在我们的页面中同时打开两个文件，这个模式对于我们这些使用Git的人来说非常熟悉，它相当于我们对比了前后两个代码，里面所有的改动都会给我们高亮显示出来，我们可以看到里面有一些注释，是它帮我们删掉的，然后它没有找到这个样式里面的元素，所以它帮我们删掉了，这个注释也帮我们删掉了，这个，这个注释也帮我们删掉了，这是我们的样式代码注释，它觉得没用，所以也帮我们删掉了，这个是它的主要功能之一，处理完成之后，还有一步。 因为我们处理的结果还在我们的dist目录下，所以我们可以把这个文件复制一份，放到我们的目录下，然后粘贴过来。这个是新的，这个是旧的，把旧的删掉，把这个改个名字。就可以了。全部修改完成后，点击编译就可以测试了。样式看上去跟之前一样，没有任何区别，但是此时我们多余的样式已经被我们删除和清除了。本次代码演示到此结束。

我们来看总结，删除无用的样式代码是为了提高wxss样式的命中率。在小程序开发中，我们应该尽量将样式代码做到物尽其用，有些样式如果只在子包中使用，就不要在主包中引入，如果只在某个子页面中使用，就不要在全局的app.wxss文件中引用，如果只在某个组件中使用，可以在组件中定义。本质上，这是为了提高wxss样式代码的有效覆盖率。我们举个例子，比如商品详情页中引入的相关样式，我们现在在屏幕上看到的，在app.wxss主文件中引入是不合适的，甚至放在主包中也不合适，因为它们只在子包中使用。减少公共样式的引入，不仅可以提高wxss样式的命中率，还有助于加快小程序的启动速度。本课就讲到这里。

点击查看相关文档：

上述URL均为本课所涉及的文档地址。

这节课我们主要学习了一些wxss的优化技巧，也就是如何利用gulp工具清理无用的wxss样式代码，下一节课我们将会学习针对UI交互的优化技巧。

最后我们来看思考题，这里有一个问题需要大家思考，程序启动慢，页面操作卡顿等问题都需要优化，按钮不易被选中，按钮绑定的事件函数无法顺利执行等问题也需要优化。那么你知道该如何优化这类问题吗？下节课我们一起来探讨这个问题吧。