基於 Ionic 2 多主題、多租戶構建方案探索

項目背景

公司的產品是一款2B的在線教育產品，已有的客戶大多數都有定製化的需求，主要包括UI主題和二次開發的功能。本文圍繞的主要內容是如何基於 Ionic 2 平臺提供的工具，實現靈活的多主題方案。

Ionic 2 提供的主題方案

Ionic 2 使用 $color map 的 key 做爲組件的輸入屬性，用於設置組件的樣式。$colors map 中的內容以下：

// variables.scss 文件（路徑: src/theme/variables.scss ）
$colors: {
  primary: #387ef5,
  secondary: #32db64,
  danger: #f53d3d,
  light: #f4f4f4,
  dark: #222,
  favorite: #69BB7B
};

使用示例：

<ion-item-options side="right">
    <button ion-button color="primary" (click)="buttonOne(page.title)">
        <ion-icon name="text"></ion-icon>
        BUTTON 1
    </button>
    <button ion-button color="secondary" (click)="buttonTwo(page.title)">
        <ion-icon name="call"></ion-icon>
        BUTTON 2
    </button>
</ion-item-options>

此外 $colors map 還支持字面量形式，對象內部有 base 和 contrast 屬性

• base: 用於標識組件的背景顏色

• contract: 用於標識組件的文本顏色

備註：Ionic 框架內部使用 node_modules/ionic-angular/themes/ionic.functions.scss 中的顏色處理函數，解析 map中設置的 base 和 contrast 值。

使用示例:

$colors: (
 twitter: {
       base: #55acee,
    contrast: #ffffff
 },
 facebook: {
     base: #38669f;
    contrast: #ffffff
 }
);

切換 Ionic 的主題:

在 src/theme/variables.scss 文件中導入 Ionic 預置的黑色主題

@import "ionic.build.dark";

自定義主題

• 修改Variables文件中，$colors map 定義的屬性值

• 覆寫已有的變量值

• 自定義 Sass 變量

• 自定義組件樣式

• 配置組件的mode(模式)

1.修改Variables文件中，$colors map 定義的屬性值

// variables.scss 文件（路徑: src/theme/variables.scss ）
$colors: (
  primary: #387ef5,
  secondary: #32db64,
  danger: #f53d3d,
  light: #f4f4f4,
  dark: #222,
  favorite: #69BB7B,
  
  twitter:(
      base: #55acee,
      contrast: #ffffff
  ),
  
  facebook:(
      base: #38669f,
      contrast: #ffffff
  )
);

<button ion-button color="facebook" (click)="buttonOne(page.title)">
  <ion-icon name="text"></ion-icon>
  BUTTON 1
</button>

<button ion-button color="twitter" (click)="buttonTwo(page.title)">
  <ion-icon name="call"></ion-icon>
  BUTTON 2
</button>

在任意自定義組件中，可使用 color 函數獲取相應的顏色值：

my-component {
  background: color($colors, twitter, base);
}

2.覆寫已有的變量值

$text-color: #686868;
$font-size-base: 1.6rem;
$list-ios-background-color: #ffffff;
$list-md-background-color: #ffffff;
$list-wp-background-color: #ffffff;

Ionic 中能夠覆寫的 Sass 變量列表：overriding-ionic-variables

3.自定義 Sass 變量

// variables.scss 文件（路徑: src/theme/variables.scss ）
$colors: (
  ...
);
$my-padding: 20px; // Custom Sass variables

4.自定義組件樣式

// about.scss 文件 (路徑: myApp/src/pages/about/about.scss)
page-about {
  .isSuccess {
    color: #1E88E5 !important;
  }
  .isError {
    color: #D43669 !important;
  }  
}

about.scss 文件中的內容將會被編譯到 main.css文件中

page-home .isSuccess {
    color: #1E88E5 !important;
}
page-home .isError {
    color: #D43669 !important;
}

5.配置組件的mode(模式)

每一個平臺都有對應的模式：

• md (Android)

• ios (iOS)

• wp (Windows Phone)

• md (Core - used for any platform other than the above)

咱們也能夠經過 Ionic 的 Config API 方便地配置 mode 下可配置字段的值，具體以下：

imports: [
  IonicModule.forRoot(MyApp, {
      backButtonText: "",
      backButtonIcon: "md-arrow-back",
      iconMode: "md",
     modalEnter: "modal-md-slide-in",
      modalLeave: "modal-md-slide-out",
      pageTransition: "md"
  });
]

以上的配置信息，用於設置在 iOS 平臺下，App 的風格採用 Android material 設計。

咱們也能夠單獨針對特定的平臺，進行配置：

imports: [
    IonicModule.forRoot(MyApp, {
    platforms: {
      android: {
            backButtonText: "",
            backButtonIcon: "md-arrow-back",
            iconMode: "md",
            modalEnter: "modal-md-slide-in",
            modalLeave: "modal-md-slide-out",
            pageTransition: "md",
      },
      ios : {
            backButtonText: "Previous",
            backButtonIcon: "ios-arrow-back",
            iconMode: "ios",
            modalEnter: "modal-ios-slide-in",
            modalLeave: "modal-ios-slide-out",
            pageTransition: "ios",
     }
}];

此外，經過 Config API 提供的方法，咱們能夠在 TypeScript classes 中，方便的設置特定平臺下的配置信息，具體以下：

config.set('ios', 'textColor', '#AE1245');

該方法接受三個參數：

• platform (optional - 'ios' or 'android', if omitted this will apply to all platforms)

• key (optional - The name of the key used to store our value I.e. 'textColor')

• value (optional - The value for the key I.e. '#AE1245')

經過 Config API 提供的 get 方法獲取配置的值:

config.get('textColor');

咱們也可以在組件層級，方便地配置組件，如經過 ion-tabs 的輸入屬性 tbasPlacement 設置 ion-tabs 組件的顯示位置：

<ion-tabs tabsPlacement="bottom">
    <ion-tab tabTitle="Dash" tabIcon="pulse" [root]="tabRoot"></ion-tab>
</ion-tabs>

配置指定平臺的樣式

Ionic 使用 mode 來定義組件的外觀。每一個平臺都有默認的 mode , 任何 mode 下的樣式信息，都能被咱們覆寫。咱們能夠在 ion-app 中指定mode的值，具體以下：

<ion-app class="md">

覆寫 md 模式下的樣式

.md button {
  text-transform: capitalize;
}

覆寫 md 下 Sass 變量的值

$button-md-border-radius: 8px;

// Ionic Sass
// ---------------------------------
@import "ionic";

動態的設置組件的屬性

<ion-list [attr.no-lines]="isMD ? '' : null"

---

EXE - 多主題、多租戶構建方案

Ionic 2 團隊基於 webpack 開發了項目的構建工具 - ionic-app-scripts

Ionic-app-scripts 的功能很強大，經過它咱們能夠很是靈活地控制項目構建的每一個環節。好比，能夠經過 command-line 指定某個環節使用的配置文件：

npm run build --rollup ./config/rollup.config.js

此外，也能夠在 package.json 文件中設置配置文件的路徑和系統構建參數的值：

"config": {
  "t": "sf", // 租戶的名稱
  "l": "zh-cn", // 默認的語言包
  "ionic_sass": "./config/sass.config.js", // 自定義Sass構建環節的配置文件 
  "ionic_copy": "./config/copy.config.js" // 自定義Copy構建環節的配置文件
}

copy.config.js 文件 - 用於配置項目構建過程當中文件拷貝的環節：

// copy.config.js 代碼片斷
module.exports = {
  copyResources: {
    src: ['{{ROOT}}/materials/' + process.env.npm_package_config_t + '/resources/**/*'],
    dest: '{{ROOT}}/resources'
  }
}

備註：根目錄下的 '{{ROOT}}/materials/' 目錄下，用於存放不一樣租戶自定義的資源，如 icon.png 和 splash.png 等圖片資源文件。

sass.config.js 文件 - 用於配置項目構建過程當中 Sass 編譯的環節：

// sass.config.js 代碼片斷
module.exports = {
  variableSassFiles: [
    '{{SRC}}/theme/variables.scss',
    `{{SRC}}/theme/${process.env.npm_package_config_t}.theme.scss` 
  ]
}

備註：不一樣租戶的主題的命名規則：租戶名 + .theme.scss 。項目構建時經過動態設置 process.env.npm_package_config_t 的值，來實現動態構建。

我有話說

1.爲何在 variables.scss 文件中 @import "ionic.globals" 、@import "ionic.ionicons" 能正常導入對應的文件：

在 Scss 文件中導入其餘依賴的 *.scss 文件，咱們通常使用相對路徑的方式。但 variables.scss 導入 ionic.globals 或 ionic.ionicons 文件卻不是使用相對路徑的方式，此外在咱們項目的 src 目錄下也沒有對應的文件。怎麼會那麼神奇，剛開始接觸的時候，我也一臉懵逼。後面經過深刻發掘，終於解開了疑惑。

看完下面的代碼，你應該也猜到了答案：

// sass.config.js 代碼片斷
{
  ...,
  includePaths: [
   'node_modules/ionic-angular/themes',
   'node_modules/ionicons/dist/scss',
   'node_modules/ionic-angular/fonts'
  ]
}

總結

目前的主題方案，還比較初級，後續還有不少地方須要優化和升級，咱們會持續更新相關的內容，有興趣的小夥伴能夠一塊兒探討哈。