当前位置： 首页 > news >正文

财务目标页面 UI 与进度展示 - Cordova与OpenHarmony混合开发实战

news 2026/5/31 3:11:24

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

本文对应模块：pages.js中“财务目标”页面的 HTML 模板与 UI 结构，以及与db.js中 goals 表的配合；同时会补充一段鸿蒙 ArkTS 代码，说明目标数据如何通过 FileManager 插件参与导出与导入。

1. 模块定位：从“记账”到“有目标地记账”

前面的模块更多关注日常收支、账户和预算，本模块要解决的是另一个问题：

不只是记录历史，而是给未来定一个可以量化的目标，并在页面中清楚地看到当前达成进度。

典型的财务目标示例：

  • 存 5 万元作为应急金；
  • 在一年内攒够首付；
  • 在半年内还清某笔贷款。

在 UI 层面，我们需要一个页面：

  • 列出所有目标；
  • 展示当前进度（进度条或百分比）；
  • 提供新增/编辑目标的入口。

2. 页面整体结构：目标列表 + 进度概览

在pages.js中，“财务目标”页面的结构可以设计为：

// ==================== 财务目标页面 ===================='goals':()=>`<div class="pc-page-container"> <div class="pc-page-header"> <h2>🎯 财务目标</h2> <p>制定和跟踪你的长期财务目标</p> </div> <div class="pc-card"> <div class="pc-card-header"> <h3>目标列表</h3> <button id="goal-add-btn" class="pc-button pc-button-primary">新增目标</button> </div> <div class="pc-card-body"> <div id="goals-list" class="pc-goals-list"> <!-- JS 动态渲染每个目标及其进度条 --> </div> </div> </div> </div>`,

这里沿用了熟悉的 PC 布局骨架：

  • pc-page-container+pc-page-header作为页面的统一头部；
  • 用一张pc-card承载“目标列表”；
  • goal-add-btn是新增目标的主入口；
  • goals-list容器承载每一个目标项的 UI 结构。

3. 单个目标项的 UI 结构

一个目标项至少需要展示：

  • 目标名称；
  • 目标金额；
  • 当前已完成金额；
  • 进度条和百分比；
  • 操作按钮（编辑 / 删除）。

示例结构：

functionrenderGoalItem(goal){constratio=goal.targetAmount>0?Math.min(goal.currentAmount/goal.targetAmount,1):0;constpercent=Math.round(ratio*100);return`<div class="pc-goal-item">${goal.id}"> <div class="pc-goal-main"> <div class="pc-goal-title">${goal.name}</div> <div class="pc-goal-amounts"> <span>目标：¥${goal.targetAmount.toFixed(2)}</span> <span>当前：¥${goal.currentAmount.toFixed(2)}</span> </div> <div class="pc-goal-progress"> <div class="pc-goal-progress-bar"> <div class="pc-goal-progress-inner" style="width:${percent}%;" ></div> </div> <span class="pc-goal-progress-text">${percent}%</span> </div> </div> <div class="pc-goal-actions"> <button class="pc-button pc-button-sm">`;}

通过pc-goal-progress-inner的宽度控制进度条长度，配合百分比文本，使用户一眼就能看到目标完成度。

4. 从数据库加载目标并渲染

在db.js中，我们可以有一个goals表，结构类似：

// 目标表if(!db.objectStoreNames.contains('goals')){constgoalStore=db.createObjectStore('goals',{keyPath:'id'});goalStore.createIndex('createdAt','createdAt',{unique:false});}asyncgetGoals(){returnthis.getAll('goals');}

在pages.js中加载并渲染：

asyncloadGoalsPage(){constcontainer=document.getElementById('goals-list');if(!container)return;constgoals=awaitwindow.financeDB.getGoals();if(!goals||goals.length===0){container.innerHTML='<p class="pc-text-muted">暂时还没有任何财务目标，可以点击右上角“新增目标”创建一个。</p>';return;}consthtml=goals.map(g=>renderGoalItem(g)).join('');container.innerHTML=html;}

这段逻辑与前面交易列表、账户列表的加载方式是同一种思路：

  • 从 IndexedDB 取出所有目标；
  • 映射成 HTML 片段；
  • 写入页面容器。

5. 新增和编辑目标：表单与保存逻辑

新增目标可以通过一个模态框或右侧表单来完成，这里展示一个简化的保存逻辑：

asyncsaveGoal(){constnameInput=document.getElementById('goal-name');consttargetInput=document.getElementById('goal-target');constcurrentInput=document.getElementById('goal-current');constname=nameInput?.value.trim();consttargetAmount=parseFloat(targetInput?.value||'0');constcurrentAmount=parseFloat(currentInput?.value||'0');if(!name){Toast.error('请输入目标名称');return;}if(!targetAmount||targetAmount<=0){Toast.error('请输入合理的目标金额');return;}if(currentAmount<0){Toast.error('当前金额不能为负数');return;}constgoal={name,targetAmount,currentAmount,};awaitwindow.financeDB.addGoal(goal);Toast.success('目标已保存');this.loadGoalsPage();}

对应的数据库操作（示例）：

asyncaddGoal(goal){goal.id=this.generateId();goal.createdAt=newDate().toISOString();returnthis.add('goals',goal);}

编辑目标则是在 UI 中找出对应data-id，从goals表读取后填充表单，再通过updateGoal保存修改即可。

6. ArkTS 侧：财务目标数据的导出与导入

财务目标作为goals表的一部分，同样需要在导出/导入时被保留下来。导出调用链和前面预算模块类似：

  1. Web 层调用financeDB.exportData()，返回包含goals在内的完整数据对象；
  2. JS 使用JSON.stringify序列化；
  3. 通过cordova.exec('FileManager', 'exportData', [json])把字符串交给 ArkTS 插件；
  4. ArkTS 插件使用fileIo将其写入备份文件。

下面是FileManagerPlugin.ets中的鸿蒙 ArkTS 片段（与前文保持一致风格）：

import{CordovaPlugin,CallbackContext}from'@magongshou/harmony-cordova/Index';import{PluginResult,MessageStatus}from'@magongshou/harmony-cordova/Index';import{common}from'@kit.AbilityKit';import{fileIo}from'@kit.CoreFileKit';exportclassFileManagerPluginextendsCordovaPlugin{asyncexportData(callbackContext:CallbackContext,args:string[]):Promise<void>{try{constjson=args[0];// 其中包含 goals 表以及其他所有表的数据constcontext=getContext()ascommon.UIAbilityContext;constcacheDir:string=context.cacheDir;constfilePath:string=`${cacheDir}/finance-backup.json`;constfile=awaitfileIo.open(filePath,fileIo.OpenMode.WRITE_ONLY|fileIo.OpenMode.CREATE);awaitfileIo.write(file.fd,json);awaitfileIo.close(file.fd);constresult=PluginResult.createByString(MessageStatus.OK,filePath);callbackContext.sendPluginResult(result);}catch(error){constresult=PluginResult.createByString(MessageStatus.ERROR,(errorasError).message);callbackContext.sendPluginResult(result);}}}

从目标模块视角看：

  • Web 层专注于目标的创建、进度计算和展示；
  • ArkTS 插件专注于“把包含目标在内的全部数据安全写入文件”；
  • 当在新设备上导入备份后，只要goals表被正确恢复，目标页面 UI 就能重新渲染出所有目标及其进度。

7. 小结：财务目标页面 UI 的关键设计点

  1. 统一 PC 布局与组件风格：

    • 继续复用pc-page-container、pc-card等组件，让目标页面在整体视觉上与其他模块保持一致；

  2. 进度条直观表达完成度：

    • 通过pc-goal-progress-inner的宽度和百分比文本，让用户一眼看懂“目标完成了多少”；

  3. 与 goals 表结构紧密结合：

    • 目标名称、目标金额、当前金额在 UI 与数据库之间一一映射，便于后续做统计或报表；

  4. 新增/编辑操作与列表展示解耦：

    • 使用独立的表单负责新增/编辑，列表只负责展示和触发操作事件，代码结构更清晰；

  5. 与 ArkTS FileManager 插件协同：

    • 目标数据作为整体数据库快照的一部分，由 ArkTS 插件负责导出/导入，保证在多设备之间迁移时不会丢失；

通过本模块，你的应用从“记录历史 + 管理当前”进一步扩展到了“规划未来”：用户不仅能看到资产现状，还能在目标页面上持续跟踪自己距离目标的差距和进展，这也是一个财务管理工具真正开始“有温度”的地方。

http://www.cnnetsun.cn/news/175348.html

相关文章：

  • 备份恢复-Cordovaopenharmony本地安全方案
  • 创建目标模块 Cordova 与 OpenHarmony 混合开发实战
  • 解决MQ消息丢失问题的5种方案
  • 芜湖，千兆网络下载速率只有10MB秒，过的什么苦日子
  • AI一周大事盘点（2025年12月14日~2025年12月20日）
  • K3s + Sysbox：让容器拥有“虚拟机的灵魂”
  • 8 个降AI率工具推荐，继续教育学生必备
  • 从开发一个AI美女聊天群组开始
  • 12.2K Star 爆火！开源免费的 FileConverter：右键一键搞定音视频 / 图片 / 文档转换，告别多工具切换
  • Java毕设项目：基于springboot的养宠物指南服务平台系统的设计与实现(源码+文档，讲解、调试运行，定制等)
  • 10 个降AI率工具，继续教育学生高效避坑指南
  • Java毕设项目推荐-基于SpringBoot的演唱会门票在线预定系统的设计与实现基于springboot的演唱会购票系统的设计与实现【附源码+文档，调试定制服务】
  • 升压芯片很简单(一)，快速选择升压芯片+利用升压芯片设计LED电源
  • 基于web的人才招聘网站设计 nodejs vue
  • 测试20个降AI率工具后，我找到了2个去ai痕迹效果好的网站，还有免费降AI额度。
  • Thinkphp和Laravel在线点餐系统的设计与实现vue
  • 现代cpp在传统内存分配上的改进
  • Java毕设项目：基于springboot的物业报修系统的设计与实现(源码+文档，讲解、调试运行，定制等)
  • 【计算机毕业设计案例】基于springboot的物业报修系统的设计与实现线上化的报修管理平台(程序+文档+讲解+定制)
  • Java毕设选题推荐：基于springboot的社区团购系统的设计与实现、拼团下单、配送调度、资金结算【附源码、mysql、文档、调试+代码讲解+全bao等】
  • Java计算机毕设之基于springboot的幼儿园管理系统的设计与实现为幼儿园(含普惠园、民办园、连锁园)设计的 “家园共育 + 日常运营 + 安全监管（完整前后端代码+说明文档+LW，调试定制等）
  • I/O多路复用
  • 视频播放器PotPlayer下载安装教程：超详细图文步骤（PC+安卓）
  • Semantic Kernel 实战系列（六） - Memory与向量存储
  • 一个基于 .NET MAUI 的开箱即用的 UI 组件库，可快速搭建面向业务的应用程序界面！
  • Semantic Kernel 实战系列（七） - 高级主题 - Agents 与多代理系统
  • LeetCode每日一题——K个一组翻转链表
  • 大模型后训练：中美路径与商业闭环｜附56页PDF文件下载
  • 震惊！选对云服务器代理商，这5个关键指标必须知道！
  • 2025年度复盘与总结