uni-app 鸿蒙切换页面显示为空白

uni-app 鸿蒙切换页面显示为空白

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

uni.request({  
    url: 'xxxx',  
    header: {  
        'Content-Type': 'application/json',  
    },  
    data: {},  
    method: 'GET',  
    dataType: 'json',  
    success: function(res) {  
        that.title = res.data.title  
}  
})

操作步骤：

使用鸿蒙系统 2.0，使用云打包后的app安装，接着打开软件，访问内容页，切换到微信，然后从微信再切换回app，内容全部丢了，只剩下框架。 注意：真机模拟没有问题，要云端打包

预期结果：

正常的内容页面

实际结果：

空白的内容页面

bug描述：

鸿蒙 2.0系统，就是切换页面，然后切换回来，标题，内容等，区别没了，变成了空白，只剩下框架，文章全部不见了。 真机模拟没有问题，云端打包后，出现问题。


更多关于uni-app 鸿蒙切换页面显示为空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 鸿蒙切换页面显示为空白的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的鸿蒙系统应用生命周期管理问题。在鸿蒙系统（特别是早期版本）中，当应用切换到后台再返回时，可能会触发页面的重新初始化，导致数据丢失。

主要原因：

  1. 鸿蒙系统对后台应用的内存管理策略较为严格
  2. 页面切换时可能触发了页面的重新创建
  3. 数据未在页面生命周期中正确保存和恢复

解决方案：

  1. 使用本地存储保存关键数据：
// 在数据加载成功后保存到本地
uni.setStorageSync('pageData', res.data);

// 在页面onLoad或onShow中恢复数据
onShow() {
  const savedData = uni.getStorageSync('pageData');
  if (savedData) {
    this.title = savedData.title;
    // 恢复其他数据
  }
}
  1. 优化页面生命周期管理：
export default {
  data() {
    return {
      title: '',
      // 其他数据
    }
  },
  onLoad() {
    this.loadData();
  },
  onShow() {
    // 检查数据是否丢失，必要时重新加载
    if (!this.title) {
      this.loadData();
    }
  },
  methods: {
    loadData() {
      uni.request({
        url: 'xxxx',
        success: (res) => {
          this.title = res.data.title;
        }
      });
    }
  }
}
  1. 在manifest.json中配置鸿蒙适配：
{
  "app-plus": {
    "distribute": {
      "os": {
        "harmony": {
          "minAPIVersion": 6,
          "targetAPIVersion": 7
        }
      }
    }
  }
}
回到顶部