上周和老板一起花了3天时间重构小程序的风格开发，虽然开发过程中遇到了一些问题，但最后还是减少了很多风格代码，而且功能更强大。而且，如果我们小程序的用户以后想自定义主题，也可以很快实现。在全局样式开发之前的小程序开发中，我们都是使用Component来构造小程序组件和页面的各个方面（页面也可以使用Component构造函数来编写）。当然，一方面是因为小程序Component的开发体验非常好。它有类似Vuemixin和watch的行为和观察者，比Page的构造函数强大很多。另一方面，对于业务量大的小程序，Component也有性能优势。可以参考滴滴开源小程序框架Mpx中Page和ComponentsetData的性能对比。在开发过程中，有很多样式可以复用。如果你在之前的开发中经常使用Bootstrap等ui库，那么你就会习惯使用这个库的utilities类。但是默认情况下，自定义组件的样式只受自定义组件wxss的影响。不受全局样式app.wxss的影响。所以我们只能通过添加@import语法来辅助各个组件的开发。@import"xxx.css";如果使用CSS预处理器辅助开发小程序，可能需要通过gulp-insert在编译好的wxss文件前面加上这条语句。请注意：之所以需要在前面加上@import，是因为@import语法会让导入的样式按照导入的位置生效，也就是说按照CSS等权重的规则，如果你把@import在中间位置，前面位置定义的样式可能会被@import覆盖。小程序全局样式当然，2.2.3以上的小程序基础库版本支持addGlobalClass配置项，即在Component的options中设置addGlobalClass:true。Component({options:{addGlobalClass:true}})该配置项表示页面级别的wxss样式会影响自定义组件，但自定义组件wxss中指定的样式不会影响页面。也就是说，我们可以用这个配置来代替之前的各个组件的@import。只需要在app.wxss上引入CSS样式，我们就可以在页面上修改组件内部的样式。不过需要注意的是，这个配置不会影响父子组件之间的样式。单独的子组件只受到app.wxss和页面样式的影响。小程序的开发基本都是基于页面的，所以这种配置非常适合开发。不过在之前的开发中并没有在意这个配置。组件样式隔离当然，在2.6.5之后的版本中，微信小程序也提供了更详细的隔离选项styleIsolation。component({options:{styleIsolation:'isolated'}})isolated表示启用样式隔离，class指定的样式在自定义组件内外不会相互影响（一般默认值）。apply-shared表示页面wxss样式会影响自定义组件，但是自定义组件wxss中指定的样式不会影响页面。shared表示页面wxss样式会影响自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件。（此选项在插件中不可用）。styleIsolation的解析如果不想了解太多，只想用，总之：直接在组件中使用apply-shared即可。如果当前Component构造函数应用于页面，则不要配置隔离选项。其余的隔离选项基本没用。styleIsolation详解isolated相当于什么都不做，设置与不设置一般没有区别，所以可以假设该配置项不存在。apply-shared相当于addGlobalClass:true，也是最有用的配置项。共享是最复杂的。在子组件中设置样式，不仅会影响自身和页面（包括其他具有apply-shared或shared设置的自定义组件），同时会受到页面样式和其他具有共享设置的组件的影响。风格影响。在使用这个功能的过程中，我觉得这个配置项绝对不要在组件中使用，除非你“疯了”。但是不引入这个配置项是不可能的，因为当你使用Component构建页面时，页面的配置项是默认共享的。这是因为页面需要全局样式，需要通过apply-shared或shared设置影响其他自定义组件。不过大家放心，小程序的样式隔离是基于页面的，不会影响全局样式，即使你当前页面有组件共享，影响当前页面。跳转到下一页没有问题。所以我们基本上按照上面的设置。页面级组件有几个额外的样式隔离选项可用：page-isolated表示在该页面禁用app.wxss，同时该页面的wxss不会影响其他自定义组件；page-apply-shared表示在App.wxss中禁用此页面。同时页面wxss样式不会影响其他自定义组件，但是设置为shared的自定义组件会影响页面；page-shared表示app.wxss在该页面被禁用，页面wxssStyles会影响其他设置为apply-shared或shared的自定义组件，也会被设置为shared的自定义组件影响。基本上这些配置都会在页面上禁用app.wxss，所以开发中不会用到。如果你需要它，你可以自己研究。从小程序基础库2.10.1版本开始，styleIsolation也可以配置在页面或者自定义组件的json文件中（这样就不需要在js文件的options中配置了）。例如：{"styleIsolation":"isolated"}其他样式配置函数如外部样式类）和引用页面或父组件样式）这些函数，大家也可以酌情学习使用。不过，有了组件风格的隔离，这些功能可能就有些鸡肋了。我可以直接通过页面的样式来控制组件内部的样式。而且，外部样式类功能需要父组件直接提供样式，不会受到app.wxss的影响。在使用样式隔离功能的情况下，我们可以大大减少各个组件的代码。并且让整个小程序内部更加干净，更加可复用。同时可以通过修改app.wxss来修改我们的主题色等全局配置。CSSvar自定义主题var功能简介如果说CSS预处理器变量为我打开了一扇新世界的大门，那么CSS变量的功能无疑是晴天霹雳。//body选择器中声明了两个变量body{--primary-color:#7F583F;--secondary-color:#F7EFD2;}/**可以在多个选择器中声明相同的CSS变量。优先级高的将替换优先级低的*/.a{--primary-color:#FFF;--secondary-color:#F4F4F4;}/**使用CSS变量*/.btn-primary{color:var(--primary-color)}在前端领域，标准实现总是比社区的约定，前端框架最喜欢的$就是Sass变量使用的。而最常用的@也被Less使用了。为了让CSS变量可以在Sass和Less中使用，官方只好妥协——。当然我们也可以通过JS来操作CSS变量。这样就可以动态修改CSS变量了。//设置变量document.body.style.setProperty('--primary','#7F583F');//读取变量document.body.style.getPropertyValue('--primary').trim();//'#7F583F'//删除变量document.body.style.removeProperty('--primary');var默认配置其实var()函数也可以使用第二个参数来表示变量的默认值。如果之前未定义该变量，则将使用此默认值。仔细想想，我无法想象结合Less和CSS变量可以实现小程序样式的默认配置。这里参考优秀的VantWeapp的做法。代码theme.less如下：首先导入所有less变量@import(reference)'./var.less';//使用正则表达式替换变量.theme(@property,@imp){@{property}:e(replace(@imp,'@([^()]+)','@{$1}','ig'));@{property}:e(replace(@imp,'@([^()]+)','var(--$1,@{$1})','ig'));}函数效果如下：@import'../common/style/theme.less';.van-button{//...othersomitted.theme(height,'@button-default-height');.theme(line-height,'@button-line-height');.theme(font-size,'@button-default-font-size');}//=>编译后.van-button{//...其他省略height:44px;height:var(--button-default-height,44px);行高：20px；行高：var（--按钮行高，20px）；字体大小：16px；font-size:var(--button-default-font-size,16px);}我们可以看到每次调用Less函数都会编译成两个属性。第一个属性的设置可以直接用于不支持CSS变量的设备。如果当前设备支持CSS变量，则使用CSS变量。但是，由于当前的CSS变量没有定义，所以会使用变量的默认值。修改完这个功能，我们就可以完成自定义主题了。具体请参考VantWeapp自定义主题。//component.wxml
