基于 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'
]
}总结
目前的主题方案，还比较初级，后续还有很多地方需要优化和升级，我们会持续更新相关的内容，有兴趣的小伙伴可以一起探讨哈。