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

全局樣式開發(fā)

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

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

@import "xxx.css";

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

小程序全局樣式

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

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

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

組件樣式隔離

當然了，在后面的版本 2.6.5 中，微信小程序也提供了更為詳細的隔離選項 styleIsolation 。

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

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

styleIsolation 淺析

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

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

styleIsolation 詳解

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

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

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

但是不介紹這個配置項目又不行，因為當你使用 Component 去構(gòu)建頁面時候，該頁面的配置項目默認就是 shared 。這是因為頁面又需要全局樣式，又需要影響其他設(shè)置了 apply-shared 或shared 的自定義組件。

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

針對于頁面級別的 Component 還有幾個額外的樣式隔離選項可用：

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

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

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

{
  "styleIsolation": "isolated"
}

其他樣式配置功能

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

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

CSS var 定制主題

var 功能簡單描述

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

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

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

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

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

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

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

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

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

var 默認配置

事實上，var() 函數(shù)還可以使用第二個參數(shù)，表示變量的默認值。如果該變量此前沒有定義，就會使用這個默認值。如果讓我來思考，我肯定無法想象出結(jié)合 Less 和 CSS 變量便可以實現(xià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ù)將會被編譯成兩個屬性。第一個屬性的設(shè)定對于不支持 CSS 變量的設(shè)備可以直接使用，如果當前設(shè)備支持 CSS 變量，則會使用 CSS 變量，但是由于當前 css 變量未定義，就會使用變量的默認值。

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

// component.wxml
<van-button class="my-button">
  默認按鈕
</van-button>

// component.wxss

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

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

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