当前位置: 首页 > news >正文

鸿蒙开发在onPageShow中数据加载不完整的问题分析与解决

API Version 12

1、onPageShow()作什么的

首先说明下几个前端接口的区别:

ArkUI-X的aboutToAppear()接口是一个生命周期接口,用于在页面即将显示之前调用。

在ArkUI-X中,aboutToAppear()接口是一个重要的生命周期接口,它会在页面即将显示之前被调用。这个接口通常用于在页面显示之前进行一些准备工作,比如加载数据、初始化状态等。通过在aboutToAppear()方法中执行这些操作,可以确保页面在显示时已经准备好所需的数据和状态,提升用户体验。

ArkUI-X的onPageShow()方法在页面每次显示时调用‌。具体来说,当页面被切换显示时,onPageShow()会被触发一次,这通常发生在用户从其他页面返回当前页面或者应用进入前台时。

页面显示‌:当用户从其他页面返回当前页面时,onPageShow()会被调用。

应用进入前台‌:当应用从后台切换到前台时,onPageShow()也会被调用。

简单说,aboutToAppear()就是初始化加载执行一次。

onPageShow()每次页面切换显示时,都会执行一次。所以,如果是需要保持最新的数据,该数据在其他页面或后端会有修改,重新切换回当前页面,就需要重新读取数据,比如从后端重新获取。

2、当在onPageShow中多次异步获取数据会怎么样

下面代码步骤:

1)通过常量SysAppInfoList来更新this.appInfoList

2)通过bridge接口获取userAppInfoList数据后

3)将userAppInfoList合入this.appInfoList

4)刷新this.appInfoList的index

5)通过bridge获取桌面配置信息

  async onPageShow() {this.appInfoList = SysAppInfoList;this.appInfoList.push(new ThirdPartyAppInfo("全部应用", "全部应用", "app.media.icon", 3, true))let userAppInfoList = await getThirdAppInfo()for (let i = 0; i < userAppInfoList.length; i++) {this.appInfoList.push(userAppInfoList[i])}for (let i = 0; i < this.appInfoList.length; i++) {this.appInfoList[i].index = i}let defaultMessage: string = '[{"家庭存储" : true}, {"网络录像机" : true}, {"智能助手" : true}]'this.desktopShowCfg = await getDesktopShowCfg(defaultMessage)console.info(`---homepage, initThirdAppInfo finish`);}isDeskShow(packageName: string): boolean {if (packageName.includes("全部应用")) {console.info(`---homepage isDeskShow, 全部应用`)return true;}for (let i = 0; i < this.desktopShowCfg.length; i++) {if (this.desktopShowCfg[i].packageName.includes(packageName)) {console.info(`---homepage isDeskShow, return false ` + packageName)return this.desktopShowCfg[i].flag}}console.info(`---homepage isDeskShow, not match ` + packageName)return false}@BuilderAppListBuilder() {List() {ForEach(this.appInfoList, (info: ThirdPartyAppInfo) => {ListItem() {if (this.isDeskShow(info.packageName)) {Column() {Stack() {
。。。。。。

这里的this.appInfoList会触发页面的渲染,但是这里多次刷新了this.appInfoList,所以可能会导致无法预测的后果。

在页面渲染当中,会使用this.desktopShowCfg来判断是否在桌面显示。

相关日志如下:

2024-11-08 22:34:06.691 28646-28646 Ace                     com.example.helloworld               I  [js_console_log.cpp(94)] ---getThirdAppInfo 获取第三方应用信息
2024-11-08 22:34:06.715 28646-28646 getThirdAppInfo         com.example.helloworld               D  ---third party app number: 4
2024-11-08 22:34:06.715 28646-28646 getThirdAppInfo         com.example.helloworld               D  ---success 
2024-11-08 22:34:06.722 28646-28646 Ace                     com.example.helloworld               I  [js_console_log.cpp(94)] ---homepage isDeskShow, not match 家庭存储
2024-11-08 22:34:06.722 28646-28646 Ace                     com.example.helloworld               I  [js_console_log.cpp(94)] ---homepage isDeskShow, not match 网络录像机
2024-11-08 22:34:06.723 28646-28646 Ace                     com.example.helloworld               I  [js_console_log.cpp(94)] ---homepage isDeskShow, not match 智能助手
2024-11-08 22:34:06.723 28646-28646 Ace                     com.example.helloworld               I  [js_console_log.cpp(94)] ---homepage isDeskShow, 全部应用
2024-11-08 22:34:06.731 28646-28646 Ace                     com.example.helloworld               I  [js_console_log.cpp(94)] ---getThirdAppInfo 获取第三方应用信息成功:[{"appName":"HelloWorld","packageName":"com.example.helloworld1","appIcon":"\/sdcard\/appInfo\/HelloWorld.png","isSys":false,"index":0}, {"appName":"MyApplication","packageName":"com.example.myapplication","appIcon":"\/sdcard\/appInfo\/MyApplication.png","isSys":false,"index":1}, {"appName":"全民K歌","packageName":"com.tencent.karaoke","appIcon":"\/sdcard\/appInfo\/全民K歌.png","isSys":false,"index":2}, {"appName":"哔哩哔哩","packageName":"tv.danmaku.bili","appIcon":"\/sdcard\/appInfo\/哔哩哔哩.png","isSys":false,"index":3}]
2024-11-08 22:34:06.731 28646-28646 Ace                     com.example.helloworld               I  [js_console_log.cpp(94)] ---getThirdAppInfo 获取第三方应用信息,解析成功,app数量为:4
2024-11-08 22:34:06.732 28646-28646 Ace                     com.example.helloworld               I  [js_console_log.cpp(94)] ---getDesktopShowCfg
2024-11-08 22:34:06.732 28646-28646 getDesktopShowCfg       com.example.helloworld               D  ---read cfg file.
2024-11-08 22:34:06.742 28646-28646 Ace                     com.example.helloworld               I  [js_console_log.cpp(94)] ---getDesktopShowCfg: [{"家庭存储" : true}, {"网络录像机" : true}, {"智能助手" : true}]
2024-11-08 22:34:06.742 28646-28646 Ace                     com.example.helloworld               I  [js_console_log.cpp(94)] ---getDesktopShowCfg 解析成功,数量为:3
2024-11-08 22:34:06.742 28646-28646 Ace                     com.example.helloworld               I  [js_console_log.cpp(94)] ---homepage, initThirdAppInfo finish

从日志信息来看,this.appInfoList、this.desktopShowCfg也都成功加载了。但是单板测试时,所有桌面元素都被过滤了

经过多组对比测试,原因分析应该是:this.appInfoList第一次赋值时,就开始触发桌面渲染,而因为多处异步处理(this.appInfoList、this.desktopShowCfg两个bridge都是异步),包括this.appInfoList也有多次赋值。所以在页面渲染完成后,this.desktopShowCfg还没来得及更新数据,就会造成页面加载的数据不完整。

3、解决方法是页面渲染数据归一,且一次性刷新

如下,将两次birdge获取数据的接口,合为一个接口,保证this.appInfoList一次刷新到位。

OnMainPage: boolean对应前面的this.desktopShowCfg

// ThirdPartyAppInfoModel.ets
export class ThirdPartyAppInfo {
。。。。。。OnMainPage: boolean
。。。。。。  // homePage.ets
async onPageShow() { let defaultCfg: string = DefaultSysAppCfgOfHomePage// 返回包含sys app和third app的所有app列表this.appInfoList = await getThirdAppInfo(defaultCfg, sysAppList)// console.info(`---homepage, return all app: ` + this.appInfoList)}isDeskShow(info: ThirdPartyAppInfo): boolean {if (info.packageName.includes("全部应用")) {// console.info(`---homepage isDeskShow, 全部应用`)return true;}// console.info(`---homepage deskShow ` + info.packageName + ` match ` + info.OnMainPage)return info.OnMainPage}@BuilderAppListBuilder() {List({scroller: this.listScroller}) {ForEach(this.appInfoList, (info: ThirdPartyAppInfo) => {ListItem() {if (this.isDeskShow(info)) {Column() {Stack() {
。。。。。。

这样改写后,页面加载就没有问题了,前端代码也相当的简洁,数据的整合处理都放在后端了。

http://www.lryc.cn/news/529438.html

相关文章:

  • 本地搭建deepseek-r1
  • 【数据结构与算法】AVL树的插入与删除实现详解
  • 【机器学习】自定义数据集 使用pytorch框架实现逻辑回归并保存模型,然后保存模型后再加载模型进行预测,对预测结果计算精确度和召回率及F1分数
  • unity学习23:场景scene相关,场景信息,场景跳转
  • AI(计算机视觉)自学路线
  • Linux第104步_基于AP3216C之I2C实验
  • 常用Android模拟器(雷电 MuMu 夜神 Genymotion 蓝叠) - 20250131
  • 算法题(53):对称二叉树
  • Golang 并发机制-2:Golang Goroutine 和竞争条件
  • 深入剖析 CSRF 漏洞:原理、危害案例与防护
  • C++和Python实现SQL Server数据库导出数据到S3并导入Redshift数据仓库
  • AI大模型开发原理篇-5:循环神经网络RNN
  • 4-图像梯度计算
  • 数据结构与算法 —— 常用算法模版
  • DDD - 领域事件_解耦微服务的关键
  • 芯片AI深度实战:实战篇之vim chat
  • 【产品经理学习案例——AI翻译棒出海业务】
  • 解决运行npm时报错
  • 【07-编译工程与导入网表】
  • FireFox | Google Chrome | Microsoft Edge 禁用更新 final版
  • conda配置channel
  • 【MQ】探索 Kafka
  • Workbench 中的热源仿真
  • 计算机网络 笔记 网络层 3
  • 翼星求生服务器搭建【Icarus Dedicated Server For Linux】
  • ZZNUOJ(C/C++)基础练习1011——1020(详解版)
  • 论文阅读:Realistic Noise Synthesis with Diffusion Models
  • 复杂场景使用xpath定位元素
  • 算法基础——存储
  • 动态规划 (环形)