AI大模型时代的职业机遇与技术实践指南
2026/7/22 4:33:17
051 —![]()
简介
鸿蒙生态中，AGC（AppGallery Connect）提供了一套完整的工具包，帮助开发者高效构建应用。MoneyTrack 深度集成了多个 AGC 工具包——@hw-agconnect系列的 ToastDialog 和 UIDialog 用于统一 UI 提示，util-log 用于日志治理。这些工具在 SettingPage 中得到了充分展示：用户操作需要确认时弹出 UIDialog 确认弹框，操作成功后以 ToastDialog 轻提示反馈，同时通过 util-log 记录用户行为日志用于后续分析。
核心知识点
1. @hw-agconnect 系列包
AGC 工具包通过@hw-agconnectnamespace 统一导出，主要包含：
| 工具包 | 功能 | 核心 API |
|---|---|---|
| @hw-agconnect/ui | UI 组件（Toast、Dialog） | ToastDialog, UIDialog |
| @hw-agconnect/util-log | 日志服务 | Logger |
| @hw-agconnect/cloud | 云服务 | CloudDB, CloudFunction |
| @hw-agconnect/auth | 认证服务 | Auth |
2. 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_ID'
@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_ID'
3. 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 提供了完整的日志分级系统：
| 日志级别 | 方法 | 说明 | 使用场景 |
|---|---|---|---|
| DEBUG | Logger.debug(tag, msg) | 调试信息 | 开发阶段调试，发布后通常关闭 |
| INFO | Logger.info(tag, msg) | 常规信息 | 用户行为的常规记录 |
| WARN | Logger.warn(tag, msg) | 警告信息 | 非预期但可恢复的情况 |
| ERROR | Logger.error(tag, msg) | 错误信息 | 需要排查的异常和错误 |
import{Logger}from'@hw-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****1234constfiltered=message.replace(/(1[3-9]\d)\d{4}(\d{4})/g,'$1****$2');Logger[level](tag,filtered);}项目代码案例
文件路径：feature_settings/SettingPage.ets
import{ToastDialog,UIDialog}from'@hw-agconnect/ui';import{Logger}from'@hw-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 参考