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

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

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

2. 提供主题更新方法：通过 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，将数据存储在全局中

3. 获取主题：

   • 使用 setTimeout 模拟异步获取主题数据的过程。在实际应用中，你可以使用 wx.request 或其他网络请求方法来获取主题数据。

4. 构建主题字符串：

   • themes 对象包含了各种主题颜色的键值对。
   • 使用 for...in 循环遍历 themes 对象，将每个键值对转换成 CSS 变量的字符串格式，并存储在 themeString 中。

5. 存储主题数据：

   • 将构建好的 themeString 存储在 globalData.themeData 中，以便在整个应用中访问。

6. 通知应用更新主题：

   • 调用 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)
}