项目背景
公司的产品是一款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,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: "",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'
]
}
总结
目前的主题方案，还比较初级，后续还有很多地方需要优化和升级，我们会持续更新相关的内容，有兴趣的小伙伴可以一起探讨哈。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。