背景
曾经项目里遇到这样一个需求,最近回想起来想着把这个方案做一个记录。
由于我们的系统需要提供给多个租户方使用,系统的业务逻辑大体是相同的,并由一套小程序代码实现。而每个租户方希望得到的界面主题是不同的。这与在项目运行中切换主题不同,希望的是系统在发布后只有一个主题。
设计思路
- 定义多个主题色class的样式
首先,我们需要定义多个主题class
的样式,这些样式可以包括颜色、字体、背景等。由于本次需求的主题样式内容不多,因此我们将样式写在一份文件里,通过class
区分。
css
/* 红色主题 */
.red {
/* 主色调RGB数值 */
--R: 233;
--G: 86;
--B: 86;
/* 全局主色 */
--mainBgColor: #fb7059;
/* 全局特殊副色 */
--mainBgColor-Inactive: #f5b0b0;
/* 其他色调 */
}
/* 金色主题 */
.golden {
/* 主色调RGB数值 */
--R: 201;
--G: 159;
--B: 90;
/* 全局主色 */
--mainBgColor: #c99f5a;
/* 全局特殊副色 */
--mainBgColor-Inactive: #e5bf80;
/* 其他色调 */
}
/* 蓝色主题 */
.blue {
/* 主色调RGB数值 */
--R: 94;
--G: 133;
--B: 248;
/* 全局主色 */
--mainBgColor: #5E85F8;
/* 全局特殊副色 */
--mainBgColor-Inactive: #7a99f5;
/* 其他色调 */
}
- 配置主题标识与 键(appId)的关系
由于租户方和对应的主题是确定的,因此创建一个配置文件config.js
,在配置文件中定义一个Map
数据格式实现主题与appId
的关系,并通过appId
获取对应配置,导出配置模块供app.js
引用。
javascript
const configList = new Map([
['wx_appid1', {
theme: 'red',
// 其他配置
}],
['wx_appid2', {
theme: 'golden',
// 其他配置
}],
['wx_appid3', {
theme: 'blue',
// 其他配置
}],
// ...
])
const accountInfo = wx.getAccountInfoSync();
const appId = accountInfo.miniProgram.appId;
const config = configList.get(appId)
module.exports = {
config
}
在 app.js 中引入此配置模块并设为globalData
javascript
const config = require('/config');
App({
globalData: {
config
}
})
- 绑定页面class
在页面中,通过getApp().globalData
获取全局数据,并拿到相关配置及主题标识。最终,将主题标识作为class
绑定到页面元素中。
html
<view class="{{theme}}"></view>
总结
通过以上步骤,我们实现了一个简单的微信小程序多主题方案。在实际开发中,可能还需要考虑主题切换的动画效果、主题的动态下载与更新等高级功能。但基本的思路是一致的:定义主题、配置主题、获取主题、应用主题。这样的设计可以让小程序更加灵活,满足多平台的个性化需求。