微信小程序打包多主题方案

背景

曾经项目里遇到这样一个需求，最近回想起来想着把这个方案做一个记录。

由于我们的系统需要提供给多个租户方使用，系统的业务逻辑大体是相同的，并由一套小程序代码实现。而每个租户方希望得到的界面主题是不同的。这与在项目运行中切换主题不同，希望的是系统在发布后只有一个主题。

设计思路

定义多个主题色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>

总结

通过以上步骤，我们实现了一个简单的微信小程序多主题方案。在实际开发中，可能还需要考虑主题切换的动画效果、主题的动态下载与更新等高级功能。但基本的思路是一致的：定义主题、配置主题、获取主题、应用主题。这样的设计可以让小程序更加灵活，满足多平台的个性化需求。