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

背景

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

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

设计思路

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

总结

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

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui