微信小程序动态更改主题色

最新推荐文章于 2024-07-03 15:00:30 发布

vgt birds

最新推荐文章于 2024-07-03 15:00:30 发布

阅读量1.3k

点赞数 3

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/m0_45251556/article/details/131491810

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

动态更改主题色最关键的一个点就是利用css的颜色变量，话不多说，直接上代码块吧

颜色配置文件

themeSystem.js

const state={
  // 绿色系主题
  green:`--secondColor:#50C090;--themeColor:#29A883;`,
  // 蓝色系主题
  blue:`--secondColor:#3358E7;--themeColor:#1940DB;`,
}
function setTheme(theme){
  if(theme==1){
    wx.setStorageSync('systemTheme',state.blue)
    wx.setStorageSync('systemThemeCode','blue')
    return state.blue
  }else if(theme==2){
    wx.setStorageSync('systemTheme',state.green)
    wx.setStorageSync('systemThemeCode','green')
    return state.green
  }
}
module.exports = {
  setTheme
}

在app.js中引入

这一步主要是通过后台配置的主题色来修改前端保存的主题色

app.js

const theme = require("./utils/themeConfig")
App({
  async onLaunch() {},
  async onShow(){
     theme.setTheme(1) //这里我只是示范，setTheme方法里面具体的值可以根据后端接口返回
  }
})

使用时：

使用时可以直接在页面最外层的view上引入一个变量theme，也就是我们配置的颜色具体内容，利用css的继承性，整个页面都可以使用

<view style="{{theme}}">
   ........
</view>

js代码
Page({
  data: {
    theme:wx.getStorageSync('systemTheme'),
  }
})

完事之后，页面例如我代码里所使用的截图：

颜色的配置就乖乖的进入页面中了，当前页面的所有元素都可以通过var变量的形式获取

.txt{
            text-align: center;
            margin: 0 auto;
            padding: 20rpx;
            width: 150rpx;
            border-bottom: 6rpx solid var(--themeColor);
        }

当然，这只是简单的示范，反正换汤不换药，遇上配置麻烦的，也可以直接把变量所代表的颜色通过后端接口得到

如果觉得每个页面都加theme变量麻烦，也可以直接封装个配置颜色的view组件，以后所有页面需要时，先引入这个组件，在内部写页面代码