uni-app HBuilderX 3.96 夜间模式问题：安卓10以下手机夜间模式正常但不生效于nvue横屏，横屏时nvue页面会重载

uni-app HBuilderX 3.96 夜间模式问题：安卓10以下手机夜间模式正常但不生效于nvue横屏，横屏时nvue页面会重载

产品分类：

uniapp/App

PC开发环境操作系统：

Mac

PC开发环境操作系统版本号：

mac14.1.1 (23B81）

HBuilderX类型：

正式

HBuilderX版本号：

3.96

手机系统：

Android

手机系统版本号：

Android 9.0

手机厂商：

小米

手机机型：

任何安卓10以下的手机

页面类型：

nvue

vue版本：

vue2

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

uni.onThemeChange(({ theme }) => {
console.log('监听夜间模式', theme)
})
if (uni.getStorageSync("theme") == 'dark') {
this.changeTheme()
}else{
if(plus.os.name.toLowerCase() == 'android'){
uni.setStorageSync("theme",'light')
setTimeout(()=>{this.changeTheme()},1000)
}
}

操作步骤：

官方hello-darkmode 示例工程 运行基座到安卓10以下的手机就会造成该bug

预期结果：

开启夜间模式，安卓10以下的手机nvue页面横屏时，不应该重载

实际结果：

  1. hbuliderx3.96 夜间模式开启后，安卓10以下的手机夜间模式不生效正常，但是该手机的nvue也横屏时会重载nvue页面，导致onload onready onshow重新执行，所有变量初始化。
  2. hbuliderx3.99 ios使用夜间模式切换到dark会闪退

bug描述：

【报Bug】1. hbuliderx3.96 夜间模式开启后，安卓10以下的手机夜间模式不生效正常，但是该手机的nvue也横屏时会重载nvue页面，导致onload onready onshow重新执行，所有变量初始化。2. hbuliderx3.99 ios使用夜间模式切换到dark会闪退


更多关于uni-app HBuilderX 3.96 夜间模式问题：安卓10以下手机夜间模式正常但不生效于nvue横屏，横屏时nvue页面会重载的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

官方回复bug能不能积极点呢

更多关于uni-app HBuilderX 3.96 夜间模式问题：安卓10以下手机夜间模式正常但不生效于nvue横屏，横屏时nvue页面会重载的实战教程也可以访问 https://www.itying.com/category-93-b0.html


解决了吗大佬，我也遇到同样的问题，还没解决， 我的手机是安卓14，小米手机

换方式实现夜间模式了https://ext.dcloud.net.cn/plugin?id=21276

在 uni-app 中使用 HBuilderX 3.96 时，遇到安卓10以下设备在夜间模式下 nvue 横屏页面不生效的问题，可能是由于以下原因导致的：

问题分析

  1. 横屏重载问题：在安卓10以下设备上，横屏时 nvue 页面可能会重新加载，导致夜间模式的设置失效。
  2. 夜间模式兼容性：安卓10以下设备的夜间模式实现可能与 nvue 的渲染机制存在兼容性问题。

解决方案

以下是一些可能的解决方案，你可以根据实际情况尝试：

1. 强制设置夜间模式

在 nvue 页面中，手动设置夜间模式的样式，确保在横屏时也能正确应用。

<template>
  <view class="container" :style="nightModeStyle">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isNightMode: false
    };
  },
  computed: {
    nightModeStyle() {
      return this.isNightMode ? { backgroundColor: '#000', color: '#fff' } : {};
    }
  },
  onLoad() {
    this.checkNightMode();
  },
  methods: {
    checkNightMode() {
      // 检测当前是否为夜间模式
      const systemInfo = uni.getSystemInfoSync();
      this.isNightMode = systemInfo.theme === 'dark';
    }
  }
};
</script>

<style>
.container {
  flex: 1;
  justify-content: center;
  align-items: center;
}
</style>

2. 监听横屏事件

在 nvue 页面中监听横屏事件，并在横屏时重新应用夜间模式。

<template>
  <view class="container" :style="nightModeStyle">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isNightMode: false
    };
  },
  computed: {
    nightModeStyle() {
      return this.isNightMode ? { backgroundColor: '#000', color: '#fff' } : {};
    }
  },
  onLoad() {
    this.checkNightMode();
    this.listenOrientationChange();
  },
  methods: {
    checkNightMode() {
      // 检测当前是否为夜间模式
      const systemInfo = uni.getSystemInfoSync();
      this.isNightMode = systemInfo.theme === 'dark';
    },
    listenOrientationChange() {
      // 监听横屏事件
      uni.onWindowResize((res) => {
        if (res.size.windowWidth > res.size.windowHeight) {
          // 横屏时重新应用夜间模式
          this.checkNightMode();
        }
      });
    }
  }
};
</script>

<style>
.container {
  flex: 1;
  justify-content: center;
  align-items: center;
}
</style>
回到顶部