上周花了 3 天的時(shí)間和老大一起重構(gòu)了一下小程序的樣式開發(fā)，雖然說在開發(fā)的過程中遇到了一些問題，但是最終減少了不少樣式代碼，同時(shí)功能上也更加強(qiáng)大。進(jìn)一步來說，如果在后面我們的小程序用戶想要自己定制化主題，也可以很快的實(shí)現(xiàn)。

全局樣式開發(fā)

之前的小程序開發(fā)中，我們?nèi)矫媸褂昧?nbsp;Component 構(gòu)造小程序組件以及頁面(頁面也可以使用 Component 構(gòu)造器來編寫)。當(dāng)然一方面是因?yàn)樾〕绦?Component 的開發(fā)體驗(yàn)非常好，擁有類似于 Vue mixin, watch 的 behaviors 和 observers ，比 Page 構(gòu)造器強(qiáng)大了很多。另一方面，對(duì)于業(yè)務(wù)較重的小程序來說, Component 也有性能優(yōu)勢(shì)?？梢詤⒄?nbsp;滴滴開源小程序框架Mpx 中的Page與Component setData性能對(duì)照 。

在開發(fā)過程中，有很多樣式是可以復(fù)用的。如果在之前開發(fā)中經(jīng)常使用 Bootstrap 之類的 ui 庫，那么你就會(huì)習(xí)慣使用這種庫的 utilities 類。但是默認(rèn)情況下，自定義組件的樣式只受到自定義組件 wxss 的影響。不會(huì)受到全局樣式 app.wxss 的影響。所以我們只能通過增加 @import 語法來輔助各個(gè)組件進(jìn)行開發(fā)。

@import "xxx.css";

如果你使用 CSS 預(yù)處理器來輔助小程序開發(fā)的話，可能就需要通過 gulp-insert 為編譯出來的 wxss 文件前置添加該語句。請(qǐng)注意: 之所以 @import 需要前置，是因?yàn)?nbsp;@import 語法會(huì)把引入的樣式按照導(dǎo)入的位置來生效，也就是說，按照 CSS 同等權(quán)重看先后的規(guī)則來說，如果把 @import 放在中間位置，前面位置定義的樣式可能會(huì)被 @import 給覆蓋掉。

小程序全局樣式

當(dāng)然，小程序基礎(chǔ)庫版本在 2.2.3 以上就支持了addGlobalClass 配置項(xiàng),即在 Component 的 options 中設(shè)置 addGlobalClass: true 。

Component({
  options: {
    addGlobalClass: true
  }
})

該配置項(xiàng)目表示頁面級(jí)別的 wxss 樣式將影響到自定義組件，但自定義組件 wxss 中指定的樣式不會(huì)影響頁面。也就是說我們可以用該配置替代之前的每個(gè)組件的 @import。只要在 app.wxss 上導(dǎo)入 CSS 樣式即可，同時(shí)我們可以在頁面上對(duì)組件內(nèi)部的樣式進(jìn)行修改。不過需要說明的是: 該配置并不影響父子組件間的樣式。各個(gè)子組件只受到 app.wxss 和頁面的樣式的侵入。小程序開發(fā)基本上以頁面為單位，所以這個(gè)配置是非常適合開發(fā)的。不過在之前的開發(fā)中并沒有在意過這個(gè)配置。

組件樣式隔離

當(dāng)然了，在后面的版本 2.6.5 中，微信小程序也提供了更為詳細(xì)的隔離選項(xiàng) styleIsolation 。

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

• isolated 表示啟用樣式隔離，在自定義組件內(nèi)外，使用 class 指定的樣式將不會(huì)相互影響（一般情況下的默認(rèn)值）。
• apply-shared 表示頁面 wxss 樣式將影響到自定義組件，但自定義組件 wxss 中指定的樣式不會(huì)影響頁面。
• shared 表示頁面 wxss 樣式將影響到自定義組件，自定義組件 wxss 中指定的樣式也會(huì)影響頁面和其他設(shè)置了 apply-shared 或 shared 的自定義組件。（這個(gè)選項(xiàng)在插件中不可用）。

styleIsolation 淺析

如果大家不想了解太多，只想使用的話, 簡(jiǎn)短來說:

大家在組件中直接使用 apply-shared ，如果當(dāng)前的 Component 構(gòu)造器應(yīng)用于頁面，那么不要配置隔離選項(xiàng)即可。其余的隔離選項(xiàng)都是基本沒什么用的。

styleIsolation 詳解

isolated 等同于什么都不干，設(shè)置不設(shè)置一般沒有區(qū)別，所以可以當(dāng)該配置項(xiàng)目不存在。

apply-shared 等同于 addGlobalClass: true ，也是最有用的配置項(xiàng) 。

shared 最復(fù)雜，在子組件設(shè)置了樣式，不但會(huì)影響自身和頁面（同時(shí)包括了其他設(shè)置了 apply-shared 或 shared 的自定義組件），同時(shí)呢，又會(huì)被頁面樣式和其他設(shè)置了 shared 的組件樣式影響。在我使用該功能的過程中，我認(rèn)為，這個(gè)配置項(xiàng)千萬不要在組件中去使用，除非你“瘋了”。

但是不介紹這個(gè)配置項(xiàng)目又不行，因?yàn)楫?dāng)你使用 Component 去構(gòu)建頁面時(shí)候，該頁面的配置項(xiàng)目默認(rèn)就是 shared 。這是因?yàn)轫撁嬗中枰謽邮?，又需要影響其他設(shè)置了 apply-shared 或shared 的自定義組件。

不過可以放心的是: 小程序樣式隔離是以頁面為單位，不會(huì)影響全局樣式，即使當(dāng)前頁面你有組件使用了以 shared 影響了當(dāng)前頁面。跳轉(zhuǎn)到下一個(gè)頁面中，不會(huì)出現(xiàn)問題。所以我們基本上按照上面的設(shè)置即可。

針對(duì)于頁面級(jí)別的 Component 還有幾個(gè)額外的樣式隔離選項(xiàng)可用：

• page-isolated 表示在這個(gè)頁面禁用 app.wxss ，同時(shí)，頁面的 wxss 不會(huì)影響到其他自定義組件；
• page-apply-shared 表示在這個(gè)頁面禁用 app.wxss ，同時(shí)，頁面 wxss 樣式不會(huì)影響到其他自定義組件，但設(shè)為 shared 的自定義組件會(huì)影響到頁面；
• page-shared 表示在這個(gè)頁面禁用 app.wxss ，同時(shí)，頁面 wxss 樣式會(huì)影響到其他設(shè)為 apply-shared 或 shared 的自定義組件，也會(huì)受到設(shè)為 shared 的自定義組件的影響。

基本上這些配置都會(huì)讓頁面上禁用 app.wxss，所以在開發(fā)中并不使用。大家如果有需求，可以自行研究。

從小程序基礎(chǔ)庫版本 2.10.1 開始，也可以在頁面或自定義組件的 json 文件中配置 styleIsolation （這樣就不需在 js 文件的 options 中再配置）。例如：

{
  "styleIsolation": "isolated"
}

其他樣式配置功能

諸如) 和引用頁面或父組件的樣式) 這些功能,大家也可酌情學(xué)習(xí)使用。不過有了組件樣式隔離之后,這些功能可能就有些雞肋，我可以直接通過頁面的樣式控制組件內(nèi)部的樣式。而且外部樣式類功能需要父組件直接提供樣式，不會(huì)被 app.wxss 所影響。

在樣式隔離功能使用的情況下，我們可以大幅度減少各個(gè)組件的代碼。并且讓整個(gè)小程序內(nèi)部更加干凈整潔，可重用性更高。同時(shí)我們的主題色等全局配置都可以通過修改 app.wxss 來修改。

CSS var 定制主題

var 功能簡(jiǎn)單描述

如果當(dāng)年 CSS 預(yù)處理器變量對(duì)于我來說是開啟了新世界的大門，那么 CSS 變量這個(gè)功能對(duì)于無疑就是晴天霹靂。

// 在 body 選擇器中聲明了兩個(gè)變量
body {
  --primary-color: #7F583F;
  --secondary-color: #F7EFD2;
}

/** 同一個(gè) CSS 變量，可以在多個(gè)選擇器內(nèi)聲明。優(yōu)先級(jí)高的會(huì)替換優(yōu)先級(jí)低的 */
.a {
  --primary-color: #FFF;
  --secondary-color: #F4F4F4;
}

/** 使用 CSS 變量 */
.btn-primary {
  color: var(--primary-color)
}

在前端的領(lǐng)域中，標(biāo)準(zhǔn)的實(shí)現(xiàn)總是比社區(qū)的約定要慢的多，前端框架最喜歡的 $ 被 Sass 變量用掉了。而最常用的 @ 也被 Less 用掉了。官方為了讓 CSS 變量也能夠在 Sass 及 Less 中使用，無奈只能妥協(xié)的使用 --。

當(dāng)然，我們也可以通過 JS 來操作 CSS 變量。如此，CSS 變量可以動(dòng)態(tài)的修改。

// 設(shè)置變量
document.body.style.setProperty('--primary', '#7F583F');

// 讀取變量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 刪除變量
document.body.style.removeProperty('--primary');

var 默認(rèn)配置

事實(shí)上，var() 函數(shù)還可以使用第二個(gè)參數(shù)，表示變量的默認(rèn)值。如果該變量此前沒有定義，就會(huì)使用這個(gè)默認(rèn)值。如果讓我來思考，我肯定無法想象出結(jié)合 Less 和 CSS 變量便可以實(shí)現(xiàn)小程序樣式的默認(rèn)配置。這里我們參考了有贊的 Vant Weapp 的做法。有贊代碼 theme.less 如下所示:

// 先導(dǎo)入所有 less 變量
@import (reference) './var.less';

// 利用正則去替換變量
.theme(@property, @imp) {
  @{property}: e(replace(@imp, '@([^() ]+)', '@{$1}', 'ig'));
  @{property}: e(replace(@imp, '@([^() ]+)', 'var(--$1, @{$1})', 'ig'));
}

函數(shù)效果如下所示:

@import '../common/style/theme.less';

.van-button {
  // ... 其他省略
  .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);
  line-height:20px;
  line-height:var(--button-line-height,20px);
  font-size:16px;
  font-size:var(--button-default-font-size,16px);
}

我們可以看到每調(diào)用一次 Less 函數(shù)將會(huì)被編譯成兩個(gè)屬性。第一個(gè)屬性的設(shè)定對(duì)于不支持 CSS 變量的設(shè)備可以直接使用，如果當(dāng)前設(shè)備支持 CSS 變量，則會(huì)使用 CSS 變量，但是由于當(dāng)前 css 變量未定義，就會(huì)使用變量的默認(rèn)值。

經(jīng)過這種函數(shù)的修改，我們就可以完成定制主題。詳細(xì)請(qǐng)參考 Vant Weapp 定制主題 。

// component.wxml
<van-button class="my-button">
  默認(rèn)按鈕
</van-button>

// component.wxss

.my-button {
  --button-border-radius: 10px;
  --button-default-color: #f2f3f5;
}

大家可能有時(shí)候會(huì)想，這樣的話，不是有更多的代碼了嗎？其實(shí)未必，事實(shí)上我們可以直接直接在頁面內(nèi)部定義變量樣式。其他組件直接通過樣式隔離去使用頁面內(nèi)的變量。當(dāng)然了，事實(shí)上書寫的代碼多少，重點(diǎn)在于想要控制默認(rèn)樣式的粒度大小。粒度越小，則需要在各個(gè)組件內(nèi)部書寫的變量越多，粒度大，我們也就不必考慮太多。

當(dāng)然了，我們可以基于用戶機(jī)型提供默認(rèn)和適合當(dāng)前機(jī)型修改的的樣式配置，這樣的話。即使用戶想要自己定義，也不會(huì)出現(xiàn)樣式特別怪異的狀況。