鸿蒙应用开发实战【91】— 完整功能串联从添加到换绑的全链路

鸿蒙应用开发实战【91】--- 完整功能串联从添加到换绑的全链路

本文是「号码助手全栈开发系列」第 91 篇,持续更新中...

开源社区:https://openharmonycrossplatform.csdn.net


前言

本篇将串联号码助手从「卡号添加」到「应用换绑」的完整功能链路,展示数据如何在 DAO 层、页面状态、组件之间流转。这是前面 90 篇文章知识点的实战整合。

本篇涵盖:全链路流程图、添加卡号 → 绑定应用 → 管理卡号 → 换绑操作 → 状态同步,每一步对应的文件、DAO 调用和状态管理。


一、全链路全景图

复制代码
添加卡号 (AddCardPage)
    │  CardDao.create()
    ▼
首页统计卡片 (HomePage)
    │  CardDao.countByStatus()
    ▼
绑定应用到卡号 (AddAppPage / bindSheet)
    │  AppBindingDao.create()
    ▼
卡号详情/应用列表 (CardDetailPage / AppDetailPage)
    │  AppBindingDao.findByCardId()
    ▼
换绑操作 (RebindPage)
    │  AppBindingDao.updateStatus()
    ▼
状态变更 → 首页自动更新
    │  AppStorage 状态同步
    ▼
筛选 / 搜索 (StatusListPage / SearchPage)
    │  CardDao.findAll() + predicates

二、第 1 步:卡号添加

文件 :pages/AddCardPage.ets

DAO :CardDao.create()

typescript 复制代码
// AddCardPage 核心逻辑
async addCard() {
  const now = Date.now()
  const newCard: CardEntity = {
    label: this.label,
    phone_number: this.phoneNumber,
    carrier: this.carrier,
    color: this.selectedColor,
    sort_order: 0,
    created_at: now,
    updated_at: now
  }
  const id = await CardDao.create(newCard)
  if (id > 0) {
    hilog.info(0x0000, 'AddCard', '卡号创建成功 id=%{public}d', id)
    // 刷新首页统计数据
    AppStorage.Set<number>('cardCount', await CardDao.countByStatus())
    router.back()
  }
}

第 3 步:绑定应用到卡号

文件 :pages/AddAppPage.ets + common/components/AppListItem.ets

DAO :AppBindingDao.create()

typescript 复制代码
// 从 bindSheet 确认绑定
async confirmBind() {
  const now = Date.now()
  const binding: AppBindingEntity = {
    app_name: this.selectedAppName,
    icon_key: this.selectedIcon,
    category: this.selectedCategory as AppCategory,
    card_id: this.currentCardId,
    status: '使用中',
    source: '手动',
    created_at: now,
    updated_at: now
  }
  await AppBindingDao.create(binding)
  // 刷新卡号详情页的应用列表
  this.loadBindings()
}

第 4 步:卡号详情与换绑

文件 :pages/RebindPage.ets

DAO :AppBindingDao.updateStatus()

typescript 复制代码
// 换绑工作流:旧绑定 → 注销 → 绑定新卡号
async rebind(oldBinding: AppBindingEntity, newCardId: number) {
  const now = Date.now()

  // 1. 旧绑定标记为待换绑
  await AppBindingDao.updateStatus(oldBinding.id!, '待换绑')

  // 2. 创建新绑定
  const newBinding: AppBindingEntity = {
    ...oldBinding,
    id: undefined,
    card_id: newCardId,
    status: '使用中',
    created_at: now,
    updated_at: now
  }
  await AppBindingDao.create(newBinding)

  // 3. 刷新首页数据
  AppStorage.Set<number>('cardCount', await CardDao.countByStatus())

  hilog.info(0x0000, 'Rebind', '换绑完成: %{public}s → card_%{public}d',
    oldBinding.app_name, newCardId)
}

四、状态流转矩阵

复制代码
┌──────────┐   添加    ┌──────────┐   换绑    ┌──────────┐
│ 使用中   │ ──────→  │ 待换绑   │ ──────→  │ 使用中   │
│ (初始态) │          │          │          │ (新卡)   │
└──────────┘          └──────────┘          └──────────┘
     │                      │
     │ 注销                 │ 确认注销
     ▼                      ▼
┌──────────┐          ┌──────────┐
│ 待注销   │          │ 已停用   │
└──────────┘          └──────────┘
     │
     │ 完成
     ▼
┌──────────┐
│ 已停用   │
└──────────┘

五、数据流分析

5.1 数据写入路径

复制代码
UI Page → State 变量 → DAO.create/update → RdbStore.insert/update → SQLite

5.2 数据读取路径

复制代码
SQLite → RdbStore.query → ResultSet → DAO.parseRow → Entity → UI 渲染

5.3 跨页面状态同步

复制代码
CardDao.countByStatus()
    → AppStorage.Set('cardCount', count)
    → @Watch('cardCount') 装饰的首页统计卡片自动刷新

六、涉及的完整文件列表

步骤 页面文件 DAO 文件 数据模型 状态变更
添加卡号 AddCardPage.ets CardDao.ets CardEntity ---
首页统计 HomePage.ets CardDao.ets 聚合查询 ---
绑定应用 AddAppPage.ets AppBindingDao.ets AppBindingEntity ---
卡号详情 CardDetailPage.ets AppBindingDao.ets 关联查询 ---
换绑操作 RebindPage.ets AppBindingDao.ets 状态更新 待换绑 → 使用中
注销操作 AppDetailPage.ets AppBindingDao.ets 状态更新 待注销 → 已停用
筛选搜索 StatusListPage.ets CardDao.ets predicates 查询 ---

小结

阶段 核心动作 涉及文件
卡号添加 CardDao.create → router.back AddCardPage + CardDao
首页联动 CardDao.countByStatus → AppStorage HomePage + CardDao
应用绑定 AppBindingDao.create → 列表刷新 AddAppPage + AppBindingDao
换绑 旧绑定更新 → 新绑定创建 RebindPage + AppBindingDao
状态同步 @Watch + AppStorage → UI 自动更新 所有页面联动

如果这篇文章对你有帮助,欢迎点赞👍、收藏⭐、关注🔔,你的支持是我持续创作的动力!


相关资源:

相关推荐
2501_919749037 小时前
华为鸿蒙免费记账与生活统计APP—小羊统计
华为·生活·harmonyos·鸿蒙
Fate_I_C7 小时前
Capacitor 应用鸿蒙化实战:用 hionic 把 React 应用跑在 OpenHarmony 上
react.js·华为·harmonyos
SuperHeroWu77 小时前
华为云码道接入 DevEco CLI 鸿蒙应用开发AICoding
华为·华为云·harmonyos
ChinaDragonDreamer8 小时前
HarmonyOS:User Authentication Kit简介
华为·harmonyos
m0_738185828 小时前
Flutter 鸿蒙化实战:qrcode_flutter 适配 OpenHarmony,二维码生成与识别
数码相机·flutter·华为·harmonyos·鸿蒙
万物智能信息科技8 小时前
血氧心跳传感器MAX30100芯片驱动开发—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
人工智能·驱动开发·华为·开源·harmonyos·鸿蒙
老陈说编程9 小时前
1. 鸿蒙 (HarmonyOS) 2012 至 2026 年的发展历程
分布式·华为·个人开发·harmonyos·鸿蒙·鸿蒙系统·程序员创富
m0_7381858210 小时前
Flutter 鸿蒙化实战:open_app_settings 适配 OpenHarmony,一键跳转系统设置
flutter·华为·harmonyos·鸿蒙
Fate_I_C10 小时前
拆解一个鸿蒙化插件:CPF-Ionic 是如何把 43 个 Capacitor 插件搬上 OpenHarmony 的
华为·harmonyos
m0_7381858210 小时前
Flutter 鸿蒙化实战:qr_code_scanner 适配 OpenHarmony,相机扫码实时识别
数码相机·flutter·华为·harmonyos·鸿蒙