uni-app android端应用来回切换时，编译的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
打包方式 云端

更多关于uni-app android端应用来回切换时，编译的app会出现整个页面闪烁一下的实战教程也可以访问 https://www.itying.com/category-93-b0.html

18 回复

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

更多关于uni-app android端应用来回切换时，编译的app会出现整个页面闪烁一下的实战教程也可以访问 https://www.itying.com/category-93-b0.html


参考此帖子设置了 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版本和设备上的表现也是必要的。

回到顶部