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

embedded/2025/2/1 8:36:05/

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.ppmy.cn/embedded/158579.html

相关文章

SOME/IP--协议英文原文讲解2

SOME/IP--协议英文原文讲解2

前言 SOME/IP协议越来越多的用于汽车电子行业中&#xff0c;关于协议详细完全的中文资料却没有&#xff0c;所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块&#xff1a; 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 4.1 Speci…
阅读更多...
TCP 握手数据包分析

TCP 握手数据包分析

一、客户端数据分析&#xff1a; spuspu:~/code/pcap$ tcpdump -r client_all.pcap -X reading from file client_all.pcap, link-type EN10MB (Ethernet) 17:58:56.346748 IP 192.168.1.178.55814 > 192.168.1.117.socks: Flags [S], seq 2615205588, win 64240, options …
阅读更多...
全面了解 Web3 AIGC 和 AI Agent 的创新先锋 MelodAI

全面了解 Web3 AIGC 和 AI Agent 的创新先锋 MelodAI

不管是在传统领域还是 Crypto&#xff0c;AI 都是公认的最有前景的赛道。随着数字内容需求的爆炸式增长和技术的快速迭代&#xff0c;Web3 AIGC&#xff08;AI生成内容&#xff09;和 AI Agent&#xff08;人工智能代理&#xff09;正成为两大关键赛道。 AIGC 通过 AI 技术生成…
阅读更多...
渗透测试之WAF规则触发绕过规则之规则库绕过方式

渗透测试之WAF规则触发绕过规则之规则库绕过方式

目录 Waf触发规则的绕过 特殊字符替换空格 实例 特殊字符拼接绕过waf Mysql 内置得方法 注释包含关键字 实例 Waf触发规则的绕过 特殊字符替换空格 用一些特殊字符代替空格&#xff0c;比如在mysql中%0a是换行&#xff0c;可以代替空格 这个方法也可以部分绕过最新版本的…
阅读更多...
计算机网络一点事（24）

计算机网络一点事（24）

TCP可靠传输&#xff0c;流量控制 可靠传输&#xff1a;每字节对应一个序号 累计确认&#xff1a;收到ack则正确接收 返回ack推迟确认&#xff08;不超过0.5s&#xff09; 两种ack&#xff1a;专门确认&#xff08;只有首部无数据&#xff09; 捎带确认&#xff08;带数据…
阅读更多...
.Net / C# 繁体中文 与 简体中文 互相转换, 支持地方特色词汇

.Net / C# 繁体中文 与 简体中文 互相转换, 支持地方特色词汇

版本号 Nuget 搜索 “OpenCCNET”, 注意别找错, 好多库的名字都差不多 支持 “繁,简” 的互相转换, 支持多个地区常用词汇的转换, 还支持 日文的新旧转换. OpenCC 在 .Net 中的实现 https://github.com/CosineG/OpenCC.NET <PackageReference Include"OpenCCNET"…
阅读更多...
Python中的函数（下）

Python中的函数（下）

函数返回值 返回单个值 函数可以通过 return 语句返回一个值。一旦执行到 return 语句&#xff0c;函数就会停止执行&#xff0c;并将指定的值返回给调用者。例如&#xff1a; 返回多个值 实际上&#xff0c;Python函数只能返回一个值&#xff0c;但可以通过返回一个元组来模…
阅读更多...
计算机组成原理——数据运算与运算器（二）

计算机组成原理——数据运算与运算器（二）

生活就像一条蜿蜒的河流&#xff0c;有时平静&#xff0c;有时湍急。我们在这条河流中前行&#xff0c;会遇到风雨&#xff0c;也会遇见阳光。重要的是&#xff0c;无论遇到什么&#xff0c;都要保持内心的平静与坚定。每一次的挫折&#xff0c;都是让我们成长的机会&#xff1…
阅读更多...
最新文章

Copyright @ 2022~2023