中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
HarmonyOS多设备开发实践：SysCap、断点和折叠屏适配[TOC](HarmonyOS多设备开发实践)一、为什么要做鸿蒙原生去年下半年，我把之前用React+Pixi.js写的一个消除小游戏《叠叠消》搬到了鸿蒙NEXT上。说实话，一开始我觉得这事不复杂。游戏逻辑是现成的，ArkUI声明式写UI和React差别也没那么大，Canvas渲染路径也有现成的方案。最大的"挑战"无非就是适配——手机、折叠屏、平板，三种屏幕，响应式布局搞定，对吧？等真正上手写了两...
历史内容App的深浅色并不只是替换背景色。首页、人物卡片、地图浮层和听书面板如果各自维护颜色，切换后很容易出现文字层级不一致。本篇把《耳畔三国·将星落》的颜色收口方式拆开，重点是让页面只消费语义Token，而不是散落的十六进制值。用语义色描述页面角色工程把主色、卡片背景、三级文字和阴影收在AppColors中，并由AppTheme选择浅色或深色调色板。页面组件拿到的是“正文色”“弱提示色”这类角色，业务组件不需要判断具...
内容型App的首页最怕把人物、事件、地图和听书入口堆成一面海报。用户看得到内容，却不知道下一步该点什么。《耳畔三国·将星落》把首页当作导航与筛选的协调层：先确定入口优先级，再让卡片负责承载具体内容。首页只处理“去哪儿”，不承载全部详情首页保留搜索、专题推荐、人物卡和事件筛选四类动作。人物详情、地图状态与播放器状态由后续模块维护，首页只传递清晰的目标标识和路由来源。这样的边界避免一个首页组件同时保存...
GIF编码是纯计算密集任务。把它直接压在UI线程上，页面按钮、进度和取消都会失去响应。动图魔方把并发边界缩到“索引帧编码为ArrayBuffer”这一件事，同时保留同步回退与统一收尾。并发函数只接收可序列化数据tsConcurrentfunctionencodeGifConcurrently(frames:IndexedGifFrame[],palette:number[],loopCount:number):ArrayBuffer{returnGifEncoderService.encodeIndexedFrames(frames,palette,loopCount);}PixelMap、文件句柄...
当听书从页面退到后台，播放状态不能只依赖前台组件。工程把TTS队列、媒体会话和后台音频任务放在同一条控制链上：系统发来的播放、暂停和切换指令先转成应用的播放动作，再同步可见的听书状态。媒体会话是控制桥梁首次播放时创建音频类型的AVSession，并注册播放、暂停、停止和切换事件。会话并不自己合成语音，它只负责把系统控制转换为已有的resume、stop和选集逻辑。tsconstsessionawaitavSession.createAVSession(context,...
人物传记往往比一条提示语长得多。整段交给TTS引擎朗读，暂停、跳转和恢复都会失去可控性。工程把正文切成带起止进度的短段，以队列方式驱动朗读，从而让听书状态能回到页面的进度条和播放列表。分段的目标是可恢复代码使用可读长度与硬上限共同决定切分位置，优先落在句子边界。每个分段都保留文本范围和预计时间，用户拖动进度后可以定位到相应段，而不是从全文开头重新朗读。tsconstAUDIOTTSSEGMENTREADABLELENGTH:number160...
历史地图的核心不是接入在线地图服务，而是把年份、势力、地点和收藏动作组织成可预测的离线交互。这个页面以本地地图资源为底图，所有切换都由MapFeature的状态和命令驱动，因此断网不会改变阅读流程。将地图状态拆成选择与视口MapFeature区分选中年份、选中势力、地点标记和全屏状态。年份改变后先刷新可见势力和标记，再由界面渲染对应的摘要；收藏事件只携带目标ID，不把收藏逻辑写进地图绘制代码。tsexporttypeMapCommandT...
单机内容App的收藏、笔记和听书进度都属于用户数据，但首个版本没有必要为了几组小数据立即引入关系数据库。这里选择Preferences保存JSON，目标是让读者在重启后仍能回到自己的记录，同时把序列化边界控制在页面之外。先定义稳定的存储键收藏、笔记、音频进度和主题模式分别对应固定键。键名一旦发布就应保持稳定，后续增加字段采用默认值兼容，而不是用新版本直接覆盖旧数据。tsconstPREFFAVORITES:string'favoritesjson';cons...
人物详情页需要把传记、年表、评价、收藏和听书入口放在一起，但它们不应变成一团页面状态。这个工程用稳定的targetId把内容对象与用户动作连起来，让“曹操”既是可阅读人物，也是收藏、笔记和听书的共同目标。模型先于界面领域模型把人物、事件、收藏记录、笔记记录和音频记录分别定义。详情页切换Tab时更换的是展示内容，人物身份不变；收藏或笔记写入时也使用同一目标标识，因此后续列表可以聚合来自人物、事件和地图的记录...
一、先搞清楚：什么是鸿蒙"闪控球"在动手之前，必须把"闪控球"这个术语搞准确。这是本文最关键的认知前提——"闪控球"在鸿蒙生态里是一个有精确含义的系统特性，不是泛指任何悬浮按钮。1.1官方定义根据华为开发者文档，闪控球（FloatingBall）是一种悬浮在设备屏幕上的非全屏应用窗口，为应用提供临时的全局能力，完成跨应用交互。它由系统统一调度，可以悬浮在桌面、甚至其它应用之上。典型场景包括：比价助手：你在购物App看...
系列收尾不该把“构建成功”直接等同于“可以发布”。工具App的发布前检查需要覆盖工程产物、核心入口、数据边界与声明范围。当前动图魔方已经取得构建、安装和前台启动证据，下面的清单用于约束后续验证，而不是宣称所有功能已经完成上线验收。先检查可交付的工程产物构建命令应在项目根目录执行，并明确目标产品。产物生成后，安装验证与前台启动要单独记录。若签名配置缺失或安装来源不可信，应停在该层处理，不能把问题归因...
离线知识应用的关键不只是把页面放进安装包，而是把内容、功能状态和用户数据分别放到稳定的位置。三国志App当前已经接入单机主框架：入口页面进入MainFrame，人物和地图等能力由独立功能模块承载，应用内内容集与收藏、笔记等本地状态分层管理。入口只负责进入主工作区应用入口保持轻量，直接交给共享主框架组合首页和各个功能页：tsimport{MainFrame}from'library2';EntryComponentstructIndex{build(){MainFrame()}}MainFram...
HarmonyOS工程遇到构建失败时，先把首个错误与当前SDK、模块和签名上下文对应起来，比反复修改业务代码更有效。动图魔方的当前源码构建已通过，本文整理的是可复用的排查顺序，而不是把一次构建通过扩大成发布完成。从首个错误定位配置边界构建日志中的第一个真实错误通常指向依赖、模块、资源或SDK版本之一。先确认命令运行在项目根目录，再检查构建配置引用的产品和模块；若错误发生在解析阶段，不应先修改页面代码。这样能避...
3D预览、单图合成动效和3DGS重建不是同一项能力。当前工程已经把它们拆成可检测的路线，但真实3DGS接口尚未接入，因此本文讨论的是可构建的能力路由与降级设计，不把占位入口写成已经完成的端侧重建。构建能力与设备能力都要满足tsexportconstBUILDAPISUPPORTS3DGSfalse;staticisBuildSupported():boolean{returnBUILDAPISUPPORTS3DGS;}设备API版本较高并不自动意味着安装包拥有可调用的实现。当前Recon3DService明确返回构建不...
GIF工具的验证不能停在“页面上有一组示例数据”。更可靠的设计是把真实素材的选择、帧处理、导出结果和作品列表连成一条可追踪的数据链。当前工程的帧处理服务从URI或PixelMap输入开始，在每个耗时节点保留取消检查。输入必须进入同一条处理服务tsstaticasyncbuildImageGifFrames(uris:string[],delayCs:number,options:FrameBuildOptions,signal:ExportSignal):Promise{if(uris.length0){thrownewError('NoimageURI');}逐张读...
动图编辑器的首页、编辑器与底部导航承担的任务完全不同：首页需要承载入口卡片，编辑器需要让参数区持续可滚动，底部导航则必须稳定留在触达位置。如果三个区域都用同一套“全宽+固定高度”规则，小屏容易出现内容被导航压住，大屏又会让阅读列拉得过宽。动图魔方当前把页面可用宽度收敛到一个方法里，而不是在每个卡片上分别写尺寸。screenWidthVp由系统显示宽度换算得到；当宽度达到700vp时，主内容限制为720vp，否则使用全...
作品列表、编辑草稿和主题偏好都属于本地状态，但它们的生命周期并不相同。当前工程没有把这些读写散在页面事件里，而是通过一个存储服务集中处理。页面只负责把用户动作转换成数据，服务负责序列化、写入和恢复。用明确键名隔离三类数据tsstaticasyncsaveWorks(context:common.UIAbilityContext,works:WorkEntry[]):Promise{conststoreawaitpreferences.getPreferences(context,PREFNAME);awaitstore.put(WORKSKEY,JSON.string...
GIF导出不该只留下一个“处理中”的按钮。当前工程把取消、阶段进度和异常结果收束到同一条信号链中：帧处理与量化在关键循环处主动检查取消，页面据此区分取消和失败。这样做的重点不是制造复杂的状态，而是让用户知道任务现在处于什么阶段，以及中断后是否还能继续操作。取消是协作式信号tsexportclassExportSignal{privatecanceled:booleanfalse;cancel():void{this.canceledtrue;}checkCancelled():void{if(this.canceled){...
浅色、深色和跟随系统不是两个开关和一个默认值，而是一份需要跨启动保持一致的主题偏好。当前工程在应用创建时先设置为不强制颜色模式，再由页面偏好决定后续显示策略，避免把系统跟随错误地当成固定浅色。主题模型保留三种有效值tsstaticasyncloadThemeMode(context:common.UIAbilityContext):Promise{conststoreawaitpreferences.getPreferences(context,PREFNAME);constrawawaitstore.get(THEMEKEY,'system');if(raw'light'...
工具类应用很容易把每个功能继续堆成一个独立页面。动图魔方当前采用顶层Tab管理主工作区，再由编辑器维护局部状态。这样做不是为了减少文件数量，而是让“切换工作区”和“在工作区内调整参数”拥有不同的状态边界。顶层路由只表达当前工作区顶层状态应当只回答用户当前位于编辑、作品、发现还是设置等工作区。局部选项、素材选择和导出参数不应反向污染这个状态。页面切换时，局部状态可以按业务需要保留或重置，规则会更容易...
