HarmonyOS掌上记账APP开发实践第51篇：AGC 生态集成：Toast、Dialog、日志服务的统一治理

051 —简介鸿蒙生态中AGCAppGallery Connect提供了一套完整的工具包帮助开发者高效构建应用。MoneyTrack 深度集成了多个 AGC 工具包——hw-agconnect系列的 ToastDialog 和 UIDialog 用于统一 UI 提示util-log 用于日志治理。这些工具在 SettingPage 中得到了充分展示用户操作需要确认时弹出 UIDialog 确认弹框操作成功后以 ToastDialog 轻提示反馈同时通过 util-log 记录用户行为日志用于后续分析。核心知识点1. hw-agconnect 系列包AGC 工具包通过hw-agconnectnamespace 统一导出主要包含工具包功能核心 APIhw-agconnect/uiUI 组件Toast、DialogToastDialog, UIDialoghw-agconnect/util-log日志服务Loggerhw-agconnect/cloud云服务CloudDB, CloudFunctionhw-agconnect/auth认证服务Auth2. AGC 工具包组件关系渲染错误:Mermaid 渲染失败: Parse error on line 6: ...框] Log[日志工具包hw-agc ---------------------^ Expecting SEMI, NEWLINE, SPACE, EOF, subgraph, end, acc_title, acc_descr, acc_descr_multiline_value, AMP, COLON, STYLE, LINKSTYLE, CLASSDEF, CLASS, CLICK, DOWN, DEFAULT, NUM, COMMA, NODE_STRING, BRKT, MINUS, MULT, UNICODE_TEXT, direction_tb, direction_bt, direction_rl, direction_lr, direction_td, got LINK_ID3. ToastDialog 更多用法ToastDialog 支持多种自定义配置满足不同场景的提示需求特性说明示例位置控制设置显示位置顶部、居中、底部{ align: Alignment.Top }带图标在文本前显示图标{ icon: $r(app.media.success) }自定义样式设置背景色、圆角、文本颜色{ backgroundColor: #4CAF50 }多行文本支持长文本自动换行{ text: 长文本... }// 带图标的成功提示ToastDialog.show({text:操作成功,icon:$r(app.media.ic_success),duration:2000,alignment:Alignment.Center});// 底部警告提示自定义颜色ToastDialog.show({text:网络连接不稳定,duration:3000,backgroundColor:#FF9800,textColor:#FFFFFF});4. UIDialog 更多类型UIDialog 支持多种弹框类型适用于不同的交互场景弹框类型适用场景核心配置确认弹框需要用户确认的操作退出、删除title, message, confirmButton, cancelButton提示弹框无需交互仅展示信息title, message, confirmButton单选列表从多个选项中选择一个title, items, selectedIndex多选列表从多个选项中选择多个title, items, selectedIndices确认弹框UIDialog.show({title:退出登录,message:确定要退出当前账号吗,confirmButton:{value:确定,onClick:()performLogout()},cancelButton:{value:取消}});单选列表UIDialog.show({title:选择报表导出格式,items:[PDF,Excel,CSV],selectedIndex:0,onItemClick:(index){exportReport(formats[index]);}});多选列表UIDialog.show({title:选择要同步的数据,items:[账单记录,资产信息,预算设置,分类标签],selectedIndices:[0,1],onItemClick:(indices){syncSelectedData(indices);}});5. util-log 日志分级util-log的 Logger 提供了完整的日志分级系统日志级别方法说明使用场景DEBUGLogger.debug(tag, msg)调试信息开发阶段调试发布后通常关闭INFOLogger.info(tag, msg)常规信息用户行为的常规记录WARNLogger.warn(tag, msg)警告信息非预期但可恢复的情况ERRORLogger.error(tag, msg)错误信息需要排查的异常和错误import{Logger}fromhw-agconnect/util-log;// 不同级别的日志记录Logger.debug(Feedback,用户打开反馈页面);Logger.info(Feedback,用户提交反馈附件数3);Logger.warn(Feedback,上传超时正在重试第2次);Logger.error(Feedback,上传失败服务器返回 500);6. 日志治理策略在生产环境中日志治理至关重要。以下是 MoneyTrack 采用的策略策略说明实现方式级别控制发布包关闭 DEBUG 日志根据构建配置切换日志级别隐私过滤自动过滤用户敏感信息自定义日志包装器替换手机号、身份证等日志上传用户授权后上传日志用于问题排查设置页提供上传日志按钮日志轮转本地日志文件大小控制设置最大文件大小超限自动清理// 隐私过滤的日志包装器functionsafeLog(level:string,tag:string,message:string){// 替换手机号138****1234constfilteredmessage.replace(/(1[3-9]\d)\d{4}(\d{4})/g,$1****$2);Logger[level](tag,filtered);}项目代码案例文件路径feature_settings/SettingPage.etsimport{ToastDialog,UIDialog}fromhw-agconnect/ui;import{Logger}fromhw-agconnect/util-log;// 退出登录确认弹框functionshowLogoutDialog(){UIDialog.show({title:退出登录,message:确定要退出当前账号吗,confirmButton:{value:确定,onClick:(){performLogout();ToastDialog.show({text:已退出登录,icon:$r(app.media.ic_info),duration:2000});Logger.info(SettingPage,用户退出登录);}},cancelButton:{value:取消}});}// 清除缓存成功提示functionclearCache(){// 清除缓存逻辑...ToastDialog.show({text:缓存已清除,duration:1500,alignment:Alignment.Center});Logger.info(SettingPage,缓存清除完成);}// 导出数据单选列表functionshowExportDialog(){UIDialog.show({title:导出格式,items:[PDF 报表,Excel 数据,CSV 备份],selectedIndex:0,onItemClick:(index){exportData([pdf,excel,csv][index]);Logger.info(SettingPage,用户导出数据格式${[PDF,Excel,CSV][index]});}});}AGC 工具包的统一治理让 UI 提示和日志管理不再分散各处提升了代码的规范性和可维护性。最佳实践统一弹框风格全应用统一使用 UIDialog避免同时混用系统AlertDialog和 UIDialog 导致视觉不一致。Toast 时长控制简单提示 1.5s 足矣重要操作反馈 2~3s过长的 Toast 会干扰用户操作。日志分级规范INFO 记录关键业务节点页面进入、操作完成WARN 记录可恢复异常网络超时重试ERROR 记录不可恢复异常崩溃前上下文。DEBUG 日志仅在开发环境开启。隐私合规所有日志在记录前必须经过脱敏处理手机号、身份证号等敏感信息不可明文输出。用户可控的日志上传提供日志上传功能但必须在用户明确授权后才能执行且在上传前告知用户日志包含的信息范围。组件复用将常用的 UIDialog 封装为工厂方法如showConfirm、showPicker减少重复代码保持交互一致性。推荐参考文档AGC 生态工具包指南hw-agconnect/ui API 参考hw-agconnect/util-log API 参考