uni-app App.vue里onThemeChange不能监听到系统主题变换 uni.onThemeChange可以

发布于 1周前 作者 vueper 来自 Uni-App

uni-app App.vue里onThemeChange不能监听到系统主题变换 uni.onThemeChange可以

项目信息 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.8.7
浏览器平台 Edge
浏览器版本 114.0.1823.86

操作步骤：

App.vue
<script lang="ts" setup>
    import { onLaunch, onShow, onHide, onThemeChange } from '@dcloudio/uni-app'
    onThemeChange(()=>{
        console.log('主题切换了1');
    })
    uni.onThemeChange(()=>{
        console.log('主题切换了2');
    })
</script>

预期结果：

  • onThemeChange 成功回调

实际结果：

  • onThemeChange 无法回调

bug描述：

App.vue 里 onThemeChange 不能监听到系统主题变换 uni.onThemeChange可以


Harmonyos Next教程
5 回复

刚试了下，onThemeChange没有回调，反馈给官网


官方的人吗？

回复 Mi六: 已经给官方反馈了，你可以先写到uni.onThemeChange里面

uni.onThemeChange(()=>{
})
这个也和闹着玩一样，安卓一会可以监听到，一会又不行了，IOS 始终不能

在uni-app中，监听系统主题变换通常是通过uni.onThemeChange来实现的，而App.vue中的onThemeChange方法并不是uni-app官方API的一部分，因此无法直接用于监听系统主题变换。为了确保你能正确地监听并响应系统主题的变化，你可以使用uni.onThemeChange在App.vue或任何合适的页面或组件中进行监听。

下面是一个使用uni.onThemeChange在App.vue中监听系统主题变换的示例代码：

<template>
  <App />
</template>

<script>
export default {
  name: 'App',
  onLaunch() {
    // 监听系统主题变化
    uni.onThemeChange((res) => {
      const systemTheme = res.systemTheme; // 获取当前系统主题
      console.log('系统主题变化:', systemTheme);

      // 根据系统主题更新应用的主题
      if (systemTheme === 'dark') {
        this.updateTheme('dark');
      } else if (systemTheme === 'light') {
        this.updateTheme('light');
      }
    });

    // 初始化应用主题（可选，根据需求实现）
    this.initializeTheme();
  },
  methods: {
    initializeTheme() {
      // 获取当前系统主题（初始化时可能需要）
      const systemTheme = uni.getSystemInfoSync().theme;
      if (systemTheme === 'dark') {
        this.updateTheme('dark');
      } else {
        this.updateTheme('light');
      }
    },
    updateTheme(theme) {
      // 更新应用的主题逻辑（例如，修改全局样式或组件样式）
      uni.setStorageSync('currentTheme', theme);
      console.log('应用主题更新为:', theme);

      // 示例：动态修改根组件的class以应用不同的主题样式
      const app = this.$mp.page.$appInstance; // 获取App实例
      app.globalData.theme = theme; // 更新全局数据中的主题
      // 注意：这里只是示例，实际更新样式可能需要更多的逻辑处理，比如动态加载样式文件等
    },
  },
};
</script>

<style>
/* 这里可以定义一些基础样式，具体主题样式可能需要动态加载 */
</style>

在这个示例中，uni.onThemeChange被用来监听系统主题的变化，并在变化时调用updateTheme方法来更新应用的主题。initializeTheme方法用于应用启动时初始化主题。注意，实际应用中更新主题可能需要更多的逻辑处理，比如动态加载样式文件、修改组件的props等。这里只是提供了一个基础的监听和响应框架。

回到顶部