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

背景

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

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

设计思路

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

总结

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

相关推荐
烛阴24 分钟前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化38 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月38 分钟前
7月10号总结 (1)
前端·css·css3
今日热点38 分钟前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
天天扭码1 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder1 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang1 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3