记一次小程序样式优化重构，小程序添加样式

上周花了 3 天的时间和老大一起重构了一下小程序的样式开发虽然说在开发的过程中遇到了一些问题但是最终减少了不少样式代码立花里子bt但是最终减少了不少样式代码同时功能上也更加强大。进一步来说如果在后面我们的小程序用户想要自己定制化主题也可以很快的实现。

之前的小程序开发中我们全方面使用了 Component 构造小程序组件以及页面(页面也可以使用 Component 构造器来编写)。当然一方面是因为小程序 Component 的开发体验非常好拥有类似于 Vue mixin, watch 的 behaviors 和 observers 比 Page 构造器强大了很多。另一方面对于业务较重的小程序来说, Component 也有性能优势。可以参照 滴滴开源小程序框架Mpx 中的Page与Component setData性能对照 。

如果你使用 CSS 预处理器来辅助小程序开发的话可能就需要通过 gulp-insert 为编译出来的 wxss 文件前置添加该语句。请注意: 之所以 @import 需要前置是因为 @import 语法会把引入的样式按照导入的位置来生效也就是说按照 CSS 同等权重看先后的规则来说如果把 @import 放在中间位置前面位置定义的样式可能会被 @import 给覆盖掉。

当然小程序基础库版本在 2.2.3 以上就支持了addGlobalClass 配置项,即在 Component 的 options 中设置 addGlobalClass: true 。

当然了在后面的版本 2.6.5 中微信小程序也提供了更为详细的隔离选项 styleIsolation 。

isolated 表示启用样式隔离在自定义组件内外使用 class 指定的样式将不会相互影响（一般情况下的默认值）。

apply-shared 表示页面 wxss 样式将影响到自定义组件但自定义组件 wxss 中指定的样式不会影响页面。

shared 表示页面 wxss 样式将影响到自定义组件自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用）。

如果大家不想了解太多只想使用的话, 简短来说:

大家在组件中直接使用 apply-shared 如果当前的 Component 构造器应用于页面那么不要配置隔离选项即可。其余的隔离选项都是基本没什么用的。

isolated 等同于什么都不干设置不设置一般没有区别所以可以当该配置项目不存在。

apply-shared 等同于 addGlobalClass: true 也是最有用的配置项 。

shared 最复杂在子组件设置了样式不但会影响自身和页面（同时包括了其他设置了 apply-shared 或 shared 的自定义组件）同时呢又会被页面样式和其他设置了 shared 的组件样式影响。在我使用该功能的过程中我认为这个配置项千万不要在组件中去使用除非你“疯了”。

但是不介绍这个配置项目又不行因为当你使用 Component 去构建页面时候该页面的配置项目默认就是 shared 。这是因为页面又需要全局样式又需要影响其他设置了 apply-shared 或shared 的自定义组件。

不过可以放心的是: 小程序样式隔离是以页面为单位不会影响全局样式即使当前页面你有组件使用了以 shared 影响了当前页面。跳转到下一个页面中不会出现问题。所以我们基本上按照上面的设置即可。

针对于页面级别的 Component 还有几个额外的样式隔离选项可用：

标签： 组件页面样式影响