微信小程序配置主题、按钮颜色等

2025/3/20 前端随笔微信小程序，随笔

一、在utils下新建文件globalPage.js 其作用如下

自动设置全局数据：在页面加载时，自动将一些全局数据（如主题数据、系统信息等）设置到当前页面。

提供主题更新方法：通过 setThemeChange 方法，可以在页面中方便地更新主题数据。

module.exports = function (app) {
const originalPage = Page;
Page = function (config) {
 const {
   onLoad
 } = config;
 config.onLoad = function (onLoadOptions) {
   if (typeof onLoad === 'function') {
     this.setData({
       themeData: app.globalData.themeData,
     })
     onLoad.call(this, onLoadOptions)
   }
 }
 config.setThemeChange = function (){
   this.setData({
     themeData: app.globalData.themeData
   })
 }
 return originalPage(config)
}
}

二、在app.js中写对应方法，配合globalPage.js，将数据存储在全局中

获取主题：
- 使用 setTimeout 模拟异步获取主题数据的过程。在实际应用中，你可以使用 wx.request 或其他网络请求方法来获取主题数据。
构建主题字符串：
- themes 对象包含了各种主题颜色的键值对。
- 使用 for...in 循环遍历 themes 对象，将每个键值对转换成 CSS 变量的字符串格式，并存储在 themeString 中。
存储主题数据：
- 将构建好的 themeString 存储在 globalData.themeData 中，以便在整个应用中访问。
通知应用更新主题：
- 调用 noticeSetThemes 方法，通知应用更新主题样式。这个方法需要你在 App 实例中定义，用于更新应用的样式。

const globalPage = require('utils/globalPage.js');
  //globalData: {
 //  themeData:'',
 // },
 
// 通知应用更新主题
  noticeSetThemes: function () {
    let pages = getCurrentPages();
    if (pages.length >= 1) {
      pages.forEach(item => {
        item.setThemeChange(this.globalData.themeData)
      })
    }
  },
// 模拟获取主题接口
  async getTheme() {
    setTimeout(() => {
      const themes = {
        '--main-color': '#3D7770',
        '--sub-color':'#bada55',
        '--page-background-color':'#f6f1eb',
      }
  
      let themeString = ''
      for (let key in themes) {
        themeString += `${key}: ${themes[key]}; `
      }
      this.globalData.themeData = themeString
      this.noticeSetThemes()
    }, 200)
  },

三、具体使用

在wxml文件

最顶级view标签

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

完成以上步骤，那么wxss文件就可以使用css变量来使用

.button {
    color:var(--main-color)
}

LOADING

微信小程序配置主题、按钮颜色等