启动闪屏体验修复:品牌启动窗 + 阶段中文文案 + 白底可见的进度条
针对"首屏白底系统窗、闪屏文字不可见、缺阶段提示"修复:
- startWindowIcon(startIcon.png) 由 DevEco 默认蓝色图标换成与闪屏一致的品牌 logo
(白底+金色游戏手柄+快乐游戏健康生活),系统启动窗与 SplashPage 无缝衔接,消除白屏突兀感。
- SplashPage:
- 修复白色文字在白底闪屏上不可见的问题,改用品牌 navy 文字 + 金色进度条/加载圈。
- 各启动阶段展示中文文案:读取本地配置/检测网络权限/获取配置文件/检测升级版本/
准备游戏资源/正在下载更新NN%/即将进入大厅;下载阶段进度条实时推进。
模拟器验证:系统启动窗=白底金 logo;SplashPage 0.4s 显示"准备游戏资源35%",
下载期显示"正在下载更新69%"金色进度条。
注:网络/震动/传感器为 normal 级权限,安装即授予、无运行期弹窗(HarmonyOS 正常行为,非缺陷);
定位为 user_grant,按设计在 H5 首次调用定位能力时才弹窗,启动期不申请。
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
0fcee6de1e
commit
ccf5a2acec
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
@@ -6,14 +6,21 @@ import { RouteName, BridgeGameParams } from '../routes/AppRoutes';
|
|||||||
* 启动引导页(对应 weclomeactivity1,框架 §4/§8.1)。
|
* 启动引导页(对应 weclomeactivity1,框架 §4/§8.1)。
|
||||||
* 进入即跑 StartupOrchestrator(本地配置→远程配置→资源准备→app_data 注入),
|
* 进入即跑 StartupOrchestrator(本地配置→远程配置→资源准备→app_data 注入),
|
||||||
* 完成后 replace 进大厅容器;被 showmessage 阻断时弹公告。
|
* 完成后 replace 进大厅容器;被 showmessage 阻断时弹公告。
|
||||||
|
*
|
||||||
|
* 闪屏底图 launch_image 为**白底 + 金色 logo**,故覆盖层文字用深色(navy),
|
||||||
|
* 进度条用品牌金色,且明确展示当前阶段中文文案(获取配置/检测升级/下载等)。
|
||||||
*/
|
*/
|
||||||
@Component
|
@Component
|
||||||
export struct SplashPage {
|
export struct SplashPage {
|
||||||
pathStack: NavPathStack = new NavPathStack();
|
pathStack: NavPathStack = new NavPathStack();
|
||||||
@State private stageText: string = '正在启动…';
|
@State private stage: StartupStage = StartupStage.INIT;
|
||||||
@State private percent: number = 0;
|
@State private percent: number = 0;
|
||||||
@State private blocked: string = '';
|
@State private blocked: string = '';
|
||||||
|
|
||||||
|
// 品牌色(取自 logo):navy 文字 + 金色进度
|
||||||
|
private static readonly NAVY: string = '#1B2A4A';
|
||||||
|
private static readonly GOLD: string = '#D2A312';
|
||||||
|
|
||||||
aboutToAppear(): void {
|
aboutToAppear(): void {
|
||||||
this.runStartup();
|
this.runStartup();
|
||||||
}
|
}
|
||||||
@@ -21,7 +28,7 @@ export struct SplashPage {
|
|||||||
private async runStartup(): Promise<void> {
|
private async runStartup(): Promise<void> {
|
||||||
const ctx: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
|
const ctx: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
|
||||||
const orchestrator = new StartupOrchestrator(ctx, (stage: StartupStage, percent: number) => {
|
const orchestrator = new StartupOrchestrator(ctx, (stage: StartupStage, percent: number) => {
|
||||||
this.stageText = stage;
|
this.stage = stage;
|
||||||
this.percent = percent;
|
this.percent = percent;
|
||||||
});
|
});
|
||||||
try {
|
try {
|
||||||
@@ -38,37 +45,70 @@ export struct SplashPage {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 阶段 → 用户可读中文文案(PREPARE_RESOURCE 按进度区分"准备资源/下载更新")。 */
|
||||||
|
private stageLabel(): string {
|
||||||
|
switch (this.stage) {
|
||||||
|
case StartupStage.INIT:
|
||||||
|
return '正在启动…';
|
||||||
|
case StartupStage.LOAD_LOCAL_CONFIG:
|
||||||
|
return '读取本地配置…';
|
||||||
|
case StartupStage.REQUEST_PERMISSIONS:
|
||||||
|
return '检测网络权限…';
|
||||||
|
case StartupStage.FETCH_REMOTE_CONFIG:
|
||||||
|
return '获取配置文件…';
|
||||||
|
case StartupStage.RESOLVE_VERSION:
|
||||||
|
return '检测升级版本…';
|
||||||
|
case StartupStage.PREPARE_RESOURCE:
|
||||||
|
// 35% 为内置资源准备;55%~85% 为远程 zip 下载
|
||||||
|
return this.percent >= 55 ? '正在下载更新…' : '准备游戏资源…';
|
||||||
|
case StartupStage.INJECT_APP_DATA:
|
||||||
|
return '即将进入大厅…';
|
||||||
|
case StartupStage.ENTER_HALL:
|
||||||
|
return '进入大厅';
|
||||||
|
default:
|
||||||
|
return '正在启动…';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
build() {
|
build() {
|
||||||
NavDestination() {
|
NavDestination() {
|
||||||
Stack() {
|
Stack() {
|
||||||
// 启动闪屏全屏背景(docs/Res/LaunchImage,横屏 2436x1125)
|
// 启动闪屏全屏背景(白底 + 金色 logo,docs/Res/LaunchImage)
|
||||||
Image($r('app.media.launch_image'))
|
Image($r('app.media.launch_image'))
|
||||||
.width('100%')
|
.width('100%')
|
||||||
.height('100%')
|
.height('100%')
|
||||||
.objectFit(ImageFit.Cover)
|
.objectFit(ImageFit.Cover)
|
||||||
// 启动进度/公告叠加在底部
|
// 启动进度/公告叠加在底部(深色文字,白底可见)
|
||||||
Column({ space: 12 }) {
|
Column({ space: 14 }) {
|
||||||
if (this.blocked === '') {
|
if (this.blocked === '') {
|
||||||
Text(`${this.stageText} ${this.percent}%`)
|
Row({ space: 8 }) {
|
||||||
.fontSize(14)
|
LoadingProgress()
|
||||||
.fontColor(Color.White)
|
.width(20)
|
||||||
|
.height(20)
|
||||||
|
.color(SplashPage.GOLD)
|
||||||
|
Text(`${this.stageLabel()} ${this.percent}%`)
|
||||||
|
.fontSize(15)
|
||||||
|
.fontColor(SplashPage.NAVY)
|
||||||
|
}
|
||||||
Progress({ value: this.percent, total: 100, type: ProgressType.Linear })
|
Progress({ value: this.percent, total: 100, type: ProgressType.Linear })
|
||||||
.width('60%')
|
.width('56%')
|
||||||
|
.color(SplashPage.GOLD)
|
||||||
|
.backgroundColor('#E6E6E6')
|
||||||
} else {
|
} else {
|
||||||
Text(this.blocked)
|
Text(this.blocked)
|
||||||
.fontSize(16)
|
.fontSize(16)
|
||||||
.fontColor(Color.White)
|
.fontColor(SplashPage.NAVY)
|
||||||
.textAlign(TextAlign.Center)
|
.textAlign(TextAlign.Center)
|
||||||
.backgroundColor('rgba(0,0,0,0.5)')
|
.backgroundColor('rgba(255,255,255,0.9)')
|
||||||
.borderRadius(8)
|
.borderRadius(8)
|
||||||
.padding(12)
|
.padding(14)
|
||||||
.margin({ left: 24, right: 24 })
|
.margin({ left: 24, right: 24 })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.width('100%')
|
.width('100%')
|
||||||
.height('100%')
|
.height('100%')
|
||||||
.justifyContent(FlexAlign.End)
|
.justifyContent(FlexAlign.End)
|
||||||
.padding({ bottom: 60 })
|
.padding({ bottom: 56 })
|
||||||
}
|
}
|
||||||
.width('100%')
|
.width('100%')
|
||||||
.height('100%')
|
.height('100%')
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 77 KiB |
Reference in New Issue
Block a user