uni-app android端应用来回切换时，编译的app会出现整个页面闪烁一下

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

uni-app android端应用来回切换时，编译的app会出现整个页面闪烁一下

操作步骤：

在其他应用呆个一分钟，然后切换到该应用回来就会闪一下。

预期结果：

希望不要闪烁

实际结果：

希望能不要再闪烁，保持正常不动就行。

bug描述：

在其他应用操作一会后切换回来会整个页面都闪烁一下。页面的onshow里面没有额外写代码， globalStyle 设置过依然无效.

"style": {
  "app-plus": {
    "background":"#FFFFFF"
  }
}
开发环境 版本号 项目创建方式
PC开发环境操作系统 Windows HBuilderX
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 4.36
手机系统 Android
手机系统版本号 Android 14
手机厂商 华为
手机机型 HONOR 50
页面类型 vue
vue版本 vue2
打包方式 云端

Harmonyos Next教程
18 回复

我上传了一个zip的附件，不知道成功没。如果无法上传。 以下是切换的视频的效果 ! http://images.zhcln.com/chang_vedio.mp4


参考此帖子设置了 https://ask.dcloud.net.cn/question/121410 “androidTranslucent”: true 还是一样没用

没人吗。。。

没有人遇到这种情况吗。。。

出现这个问题之前是不是，我是有配置过.9.png的启动图，后来无论恢复，还是加上，切换进来都会抖动一下。

铁子 你做app没有做页面防抖动处理吗？

这个是因为没做防抖动导致的吗？多谢回复，我处理一下试试看。

还是不行，这个是切换app出去，等一分钟左右再切换app进来才会，正常跳转是不会的。

回复 我不是张三1: 你这样，做一个功能，该页面onHide跳到一个新页面，调回时，从新页面在跳回来，这么的处理一下

回复 杨杨得亿: 之前是没有问题的，配置过.9后，就出现了。然后删了.9都不行了。不知道为啥。好像不止我一个人遇到这样的问题。

正常切换是没有问题的，只是应用的切换会这样。是有更换过.9的

没有人吗

官方能帮忙看一下吗。。

你有能复现问题的demo吗朋友，我跑来给你看看

回复 毛毛不是泰迪: 多谢回复，可以的，我上传到云发你。

没人吗？

半个月了。。

在uni-app开发中，遇到Android端应用来回切换（即从后台切回前台）时页面闪烁的问题，通常是由于页面重新渲染或某些资源重新加载导致的。要解决这个问题，可以从多个角度入手，比如优化页面渲染逻辑、缓存页面状态等。下面提供一个利用Vue的生命周期函数和页面缓存机制来缓解这个问题的示例代码。

1. 使用 keep-alive 组件缓存页面

在uni-app中，虽然没有直接的<keep-alive>标签支持（如Vue官方框架），但你可以通过自定义组件或页面逻辑来模拟页面缓存。以下是一个简单的示例，通过条件渲染来缓存页面状态：

// pages/index/index.vue
<template>
  <view v-if="isVisible">
    <!-- 页面内容 -->
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
      message: 'Hello, uni-app!'
    };
  },
  onShow() {
    this.isVisible = true;
  },
  onHide() {
    this.isVisible = false;
  },
  // 可以在onHide时保存状态，onShow时恢复状态，这里为简化示例省略
};
</script>

2. 优化页面渲染逻辑

确保你的页面渲染逻辑尽可能高效，避免不必要的DOM操作。例如，使用计算属性而非在模板中直接写复杂表达式。

<template>
  <view>
    <!-- 使用计算属性优化渲染 -->
    <text>{{ computedMessage }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      baseMessage: 'Hello, '
    };
  },
  computed: {
    computedMessage() {
      return this.baseMessage + 'uni-app!';
    }
  }
};
</script>

3. 利用本地存储缓存页面状态

对于需要持久化的状态，可以使用uni-app提供的uni.setStorageSync和uni.getStorageSync方法来缓存和恢复页面状态。

onShow() {
  const cachedMessage = uni.getStorageSync('cachedMessage');
  if (cachedMessage) {
    this.message = cachedMessage;
  }
},
onUnload() {
  uni.setStorageSync('cachedMessage', this.message);
}

结论

上述方法可以帮助减少页面在切换时的闪烁现象，但具体效果可能依赖于你的应用结构和状态管理的复杂性。在实际项目中，可能需要结合多种策略来达到最佳效果。此外，持续关注和测试不同Android版本和设备上的表现也是必要的。

回到顶部