原生小程序动态配置主题色

1、前言

我的项目是三个小程序,功能相同,但是主题色不同,考虑用一到代码通过控制小程序类型来切换主题色。

我们都知道在小程序app.wxss文件中,
page{
–themeColor:#5091D3;
font-size:28rpx;
},
–themeColor可以配置主题颜色,在每个页面的index.wxss中可以使用 color: var(–themeColor);去设置按钮和文字的颜色为主题色,但是app.wxss为静态不可修改,同时除了–themeColor,怎么能定义更多的变量,去在wxss中去使用呢?

下面将介绍我是如何做到动态控制的

2、首先app.wxss和单个页面index.wsxss中page里的去掉–themeColor,在utils文件夹中创建config.js

/**小程序类型
 * 1:zhongyu  中宇
 * 2:ntx 暖天下
 * 3:floorheating 极地阳光
 */
const APPTYPE = 2
// 主题色写在内部
const themeColorStyleMap={
  1: '--themeColor: #15c5bb;--themeBgColor:#EEEEEE;',
  2: '--themeColor: #de5c3f;--themeBgColor:#EEEEEE;',
  3: '--themeColor: #5091D3;--themeBgColor:#EEEEEE;'
}

module.exports = {
  themeColorStyle: themeColorStyleMap[APPTYPE], 
}

2、在app.js中定义全局变量

import {
  themeColorStyle
} from './utils/config'
// app.js
App({
  globalData: {
    globalThemeColor: themeColorStyle
  },

})

2、在每个页面中的index.js中使用在app.js中定义的全局变量

const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
   // 全局主题色--用的wxml内部
    globalStyle: app.globalData.globalThemeColor,
  },

3、在页面的index.wxml,最顶级的view中写入style,这样在每个index.wxss就可以使用var(–themeColor)动态的颜色啦,–themeColor就是我们定义的变量颜色

<view  style="{{globalStyle}}"></view>

最后,如果这篇文章对你有一点帮助,请点个赞赞,让我知道,
在这个程序员不好混的时代还有同路人(灬ꈍ ꈍ灬)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值