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