你好，我是李艺。

先看一下问题，wxss样式也会影响组件或页面的运行时性能，非常值得我们注意，整体上小程序的页面设计要符合微信小程序设计规范，风格尽量以简洁实用为主。开发者在优化wxss样式代码的时候，遇到的最多的一个问题是，如何删除项目里边无用的wxss样式代码，好在这个问题现在已经有gulp插件，可以帮助我们自动化解决了。下面看代码实践。

先看实践一，给滚动组件开启惯性滚动。

在安卓下默认有惯性滚动，而在iOS下面需要额外设置，例如在主页的长列表组件上，适合添加一个名称叫做-webkit-overflow-scrolling，这样的一个样式，将它的值设置为touch，便可以开启惯性滚动了。

下面进行实践一的代码演示。

首先我们看一下在我们主页的样式，主页的标签代码里边，我们用到了一个recycle-view这样的组件，它上面是有一个样式的，我们看一下它的样式文件里面的一个代码，相关的代码，这是它的属于标签样式，就是组件样式，在这个上面我们可以添加一个-webkit-overflow-scrolling，这样的一个样式，然后这个值我们可以设置为touch，我们打完前面的这些字符，后面它自动会帮我们完成，这个属性在安卓上我们不需要设置，然后在iOS上我们需要额外设置，但即使我们代码运行在安卓设备上也没有关系，多余的代码本身也不会造成额外的负面影响，这样就可以开启iOS设备，以及安卓设备的，同时的一个惯性滚动了，代码演示我们就说到这里。

下面我们看实践二，使用hover-class实现按钮的单击态。

在小程序开发里面使用:active伪类可以实现按钮的单击态效果，但是这种实现存在一个缺点，事件太容易触发，并且滚动态滑动的时候，单击态不容易消失，在一些旧的iOS设备上又容易失效，在MDN文档里面我们可以看到这样一段说明，如屏幕上这段文字所示，默认情况下iOS设备上的Safari浏览器，它不会使用:active状态，除非关联元素上，它有一个touchstart事件监听，小程序的运行环境虽然与Safari浏览器不同，但是在iOS设备上，视图渲染是需要靠引入iOS平台的，WKWebView组件来实现的，在单击态的实现上，特别是在旧的iOS设备上可能也受相关规则的影响。因此小程序官方建议我们使用内置的hover-class属性实现单击态，这个属性是小程序它自己定义的 ，在HTML5里边是不存在的，用这个属性代替原来的:active伪类来实现组件的单击态，如我们屏幕上现在看到的截图switch_btn组件，它的一个单击态实现，就是通过组件的，hover-class属性来实现的。

下面我们看代码演示。

我们需要实现一个自定义的单击，具有单击态的这样的一个按钮，我们先看一下最终的一个代码实现的结果，找到我们的代码，这里面有一个switch_btn，这就是我们要实现的自定义按钮的代码，然后我们将这个给它拷贝到我们现有的项目里面，好已经放进来了，这是它的一个标签代码，这是它的样式代码，分为两种，这是用伪类:active 这是伪类，用伪类实现了单击态它的一个样式代码。下面这个是hover，我们需要用到的一个样式类，给 hover-class属性使用的，我们先把下面这个给它注掉，用上面这个，同时在我们的这个地方，将属性的设置先给它删掉，组件定义好以后，接下来我们开始在主页上进行引入，引用和使用它。首先我们看一下最终的使用的代码，第一步是组件的一个引入，可以把它放在最上面，接下来是标签代码里面的一个对组件的使用，在stopwatch秒表组件下面，我们添加一个新的组件，放在这里，这个地方还涉及到一个class，一个样式，相关的样式我们可能还需要把它拷贝过来，主要是这两个，这里边已经有了，那么让它覆盖一下就可以了，这是我们新添加的标签代码，它所需要的一个样式，这个代码我们主要是把我们屏幕分成 从左到右分成三格，然后我们第一格里面放这样的一个组件，后面两格目前是空的，然后看一下我们样式，简单说一下，这个里面用了flex布局，然后这有一个justify-content设置是为了将我们，容器它的，使它的子元素平分，本身父容器的一个宽度，是为了实现这样的一个平分的效果，这个代码已经改写完了。我们单击编译，测试一下，我们将鼠标放上去，按下去的时候，现在这个单击态已经出现了 ，我们看到这个文本它变成了白色，同时按钮的背景色也有变化，这是它的一个单击态，我们现在单击态我们可以再次看一下我们实现的代码，目前我们是通过伪类:active，然后伪类去实现的，接下来我们换我们前面提到的，使用hover-class，这样的一种方式去实现它  ，这个class样式，这里面的具体的样式代码和上面这个是一样的，我们重新定义了这样的一个样式，然后将那个名字给它复制一下，在我们组件的标签代码里面，在组件上面我们加一个hover-class然后等于它这样就可以了，我们再刷新测试一下，基本上运行效果和之前是一致的，但因为我们在模拟器里面进行测试，所以显示不出它的差别来但是在处理自定义按钮的一些单击态的时候，我们应该优先选择，hover-class这样的一种方式，去实现单击态的效果，代码演示我们就说到这里。

下面看实践三，使用gulp工具删除无用的wxss样式代码。

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

下面我们看代码演示。

首先第一步我们需要在我们当前的项目目录下，创建一个新的tools这样的目录，我们将在这个目录下实现相关的清除样式代码的一些脚本，我们在目录下打开集成终端，首先我们添加一个Node.js的工具，这个地方我们可以全局添加使用gulp，yarn，global，add，gulp然后添加，添加完成以后，因为我这个地方原来已经装过了，所以它很快就没有了，接下来我们在我们当前目录下，添加它的本身以及它的一个插件，叫做cleanwxss这样的一个插件，然后再执行，安装指令它可能需要持续一段时间，趁这个时间我们可以先准备一下我们所需要的三个脚本，可以找到我们最终的这个源码 源码目录下，在这个tools目录下面我们会有几个文件，一个是gulp ，这是我们的gulp文件，将这个文件给它，这个文件我们应该可以自动生成 所以不需要拷贝，我们将这个gulpfile.js文件拷贝一下，放在我们新创建的那个tools目录下面，然后上面这个文件我们可以看到，就是package.json 这个文件，然后已经包含了我们刚才在本地添加的两个模块，重点我们要看一下gulpfile.js这个文件 gulp脚本，也就是它里边的所谓的task，我们可以执行的任务都是在这个文件里面进行定义的，首先这个文件我们要定义一个名字为default，这样的一个任务名称，然后后面就是它所要执行的代码了，所要执行的代码，我们需要去处理父目录下，也就是它下面有一个index pages，然后这样的样式文件 去处理它 处理完成以后，我们把处理的结果放在当前目录下的dist，放在这个目录下。然后第二个任务是goods，我们需要处理goods分包下面的页面，处理它里面的样式 ，还有是user，一共是三个，三个，现在我们已经装完了，模块已经装完了。

装完以后，接下来我们就可以尝试执行我们这个指令了，第一个我们可以执行default，当然我们不写也是可以的，不写的话它默认就会执行default这个任务，另外两个它不会执行，从这个地方我们可以看到，然后它会删除很多的一些样式，把这些都给它删掉了，然后我们看一下生成的文件，生成这些文件，骨架屏它也处理了，但是骨架屏我们不需要它处理了，我们只需要处理主页，样式代码，就需要处理，就可以了，处理以后我们可以看到它这个page也被保留了。虽然这个page，在我们wxml这个标签代码里面不存在，但是它也被保留了 这个是应该的，然后对于一些我们找不到的一些 它就删除了，当然这个地方有一点我们需要注意，以demo开头的这几个，这几个是我们代码里面动态使用的样式，动态使用的样式，所以它这几个还不能被删除，所以我们还要做一个事情，这个工具它本身其实并不是十分完善的，它只能做静态的甄别，动态的它是无法识别的，所以说这些代码我们其实是需要保留的，我们可以将这些代码给它拷贝一下，然后在这个文件里面，放进来以后代码总行数是208，然后原来的文件我们可以看一下，是236，它这个代码行数已经变少了，说明有些样式已经被删除了，这是第一个。

接下来我们再执行第二个任务是user，这个地方我们看一下，它会有一些提示 我们看它最终生成的，是否已经成功生成了，目标文件在这里，这是它生成的，然后这个文件是210 生成之后的是210，我们原来的我们可以再看一下它是多少，也是210，所以这个文件它其实基本上没有删除，然后我们再看goods分包，这个地方注意报错了，有了报错信息，为啥会报错，跟我们源码有关系，我们看一下我们这个里边源码，它里面有两个引用，因为这两个引用它所以导致报错了，我们可以将这两个引用先去掉，然后再执行，这样就没问题了，然后在我们生成的文件里边，我们再看一下我们dist的目录下，找到detail，生成这个目录里面，然后顶部我们再加上这两行引用代码就可以了，这个最终代码是75行，然后我们看一下原来的代码是，也是75行，基本上没有变化，存在多余样式代码的时候它会删除，如果不存在它基本上就不会删除了。

下面我们为了更进一步去对比处理前后文件的差异，我们可以在VSCode里边，同时打开我们的源文件，源样式文件，还有是我们生成之后的文件，我们可以按住control ，先选择一个，同时选中，然后选择右键菜单，选择将已选项进行比较，应该选这个，选这个以后，这个属于VSCode它本身的一个比较功能，它会在我们这一个table页里面然后同时打开两个文件，这种模式我们使用Git的同学很熟悉，它相当于是比较前后两个代码，这里面我们所有的有变动的地方，然后它会给我们进行高亮显示，我们可以看到这里面的一些注释，它帮我们删掉了，然后这个样式它没找到元素，它把我们删掉了，还有这个注释也把我们删掉了，这些，这个注释也把我们删了，这是我们的样式代码注释，它认为没用，它也给我们删掉了，这是它的一个主要的一个功能，然后处理完成以后，接下来还有一步，因为我们现在处理后的结果还在我们dist的目录下，我们可以将这个文件给它拷贝一下，放在我们目录下，粘过来，这是新的，这个是旧的，将旧的给它删掉，这个给它改一下名字，这样就可以了，然后所有修改完成以后，单击编译进行测试，样式看起来和原来也是一样的，没有什么差别，但是此时我们多余的样式已经被我们删掉了，被我们清除掉了，这个代码演示就说到这里。

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

点击查看相关文档：

• 性能与体验 /体验评分 /评分方法与规则 /体验
• 微信小程序设计指南
• Browser compatibility

上面这些网址是本课涉及的文档地址。

这节课我们主要学习了一些wxss优化技巧，即如何使用gulp工具，清理无用的wxss样式代码，下节课我们学习UI交互方面的优化技巧。

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