使用 Harmony ArkTS 开发数字钱包应用（Dompet App）

linpengteng
66 阅读6分钟

Dompet.webp

感谢由 Pixso 资源社区提供的共享作品 《Dompet数字页面设计》


推荐

  1. 使用 Flutter 开发数字钱包应用（Dompet App）
  2. 开发 ArkTS 版 HarmonyOS 日志库 —— logger

前言

在之前的 Flutter 版本中，我们探索构建了一个现代化的混合应用框架，专注于 状态管理、路由管理、国际化 ，并整合了 网络请求、本地存储、WebView 等核心能力，以便快速适配多种业务场景。

如今随着 HarmonyOS 兴起，我们将这一探索和搭建应用开发框架的方式延续到鸿蒙的设备和平台上，实现基于 ArkTS 构建现代化的 HarmonyOS 应用 开发方案。

  1. 基于 @Local、@Param、@Event 等 @ComponentV2 装饰器实现数据与UI双向交互
  2. 基于 @ohos/axios 第三方库提供 Restful 范式网络请求，并实现全局的请求和响应拦截器
  3. 基于 preferences 和 relationalStore 等 API 构建高效的本地数据持久化储存和读取方案
  4. 基于 ArkWeb 和 WebviewController 实现 Web 页面渲染，并支持 Web 与 App 端交互
  5. ......

选型

在构建 Harmony App 过程中，我们从 状态管理、路由管理、国际化 以及 日志库 等方面考虑，引入使用了 @hadss/hmrouter、@ohos/axios、@ohos/imageknife、@hitro/ark 和 logger 等插件。

在 UI 设计方面，我们延续了 Flutter 版本设计，继续采用 Pixso 社区 提供的 《Dompet 数字钱包》 设计风格。不过，就快捷登录部分，我们不再使用 Google 和 Github 第三方登录，而是采用了 华为账号一键登录 的方式。(需是企业开发者账号上架应用!!!)

image.png


特性

在技术上，我们选择了 @hadss/hmrouter、@ohos/axios、preferences、relationalStore 以及 ArkWeb 作为构建框架的核心基础设施，而在 UI 设计方面，则是选择了 《Dompet 数字钱包》 设计稿作为我们 App 用户界面。

在确定了 ArkTS/ArkUI 技术栈、核心插件以及 UI 设计稿后，我们开始着手梳理 Dompet 数字钱包 的 UI 界面和功能需求，以确保高效的开发效率，并成为一个用户体验极佳的 App。

  1. 使用 @hadss/hmrouter 来接管 App 的路由管理、权限拦截/认证、以及转场动画。
  2. 定义 entry/src/main/resources 中不同目录 (eg. zh_CN)，实现中英文语言和资源的切换
  3. 使用 @ComponentV2 装饰器 (eg. @Local、 @Param、@Event) 实现 UI 和数据的双向驱动
  4. 使用 relationalStore 数据库，实现用户、账单、消息、银行卡的数据流转，模拟业务处理
  5. 对于 华为本机账号一键登录 我们通过 Authentication kit 来实现其账号一键登录的流转和处理
  6. 对于 UI 设计稿中的折线图表，我们通过 ArkWeb 和 EChart 来实现其复杂的图表交互功能和效果
  7. 定义 size 单位转换/绘制 API (eg. size.vp、size.vw ...)，支持自动适配不同设备的屏幕以及翻转
  8. 借助 intl 和 setAppPreferredLanguage 自动处理不同语言和区域的格式 (eg. 日期本地化)
  9. 通过 photoAccessHelper 插件，实现 App 上传来自相册或拍照而的得图片，进而更新用户头像
  10. 虽然 relationalStore 模拟了业务的处理和流转，但网络请求作为 App 基础设施，我们依旧对 Axios 进行了封装，完善了 Request 和 Response 拦截处理 (携带 Token、异常处理等)
  11. ......

重要插件依赖如下：

  • @ohos/axios: 一个运行在 HarmonyOS 的网络请求库，支持 Axios 原有用法和特性
  • @hadss/hmrouter: 一款功能强大的路由框架，支持自定义拦截器、生命周期、转场动画...
  • @ohos/imageknife: 一款为 OpenHarmony 打造的图像加载缓存库，提供更高效、更轻便的 API
  • @ohos/crypto-js: 一款加密算法类库，可以非常方便地在 HarmonyOS 中进行加解密 (eg. MD5)
  • @hitro/ark: 一个基于 ArkTS 实现工具函数库 (eg. 数据类型转换、debounce、Signal 等 API)
  • logger: 一个简单、实用的 HarmonyOS 应用日志框架，支持多种数据类型和日志上报 详情

源码 - Configure 配置

  • configure/axios: 基于 Axios 封装 Request 和 Response 拦截处理 (Token/异常处理、日志埋点等)
  • configure/context: 存储 App 各类运行上下文，支持跨线程引用和传输 (eg. 为 Toast 提供上下文)
  • configure/device: 存储 App 设备相关信息，例如 设备宽高、设备翻转、设备安全区、设备状态等
  • configure/network: 存储 App 设备网络、wifi 连接状态，支持自动更新网络断开、网络重连时情况
  • configure/persistent: 基于 sendablePreferences 封装，支持数据持久化存储，支持跨线程使用
  • configure/scheme: 一个 App 路由调度器，接收并处理来 Want 的信息，使其访问正确 UI 页面
  • configure/socket: 封装了 WebSocket 系统，已实现网络异常处理、断开重连、ping 机制等功能
  • configure/sqlite: 封装了 Sqlite 数据库的初始化和管理，提供了数据库的创建、关闭、销毁等操作

源码 - Components 组件

  • components/Dialog: 提供基于 ArkTS 统一封装的对话框，并扩展了 cancel、confirm 对应事件
  • components/Imager: 封装了 imageknife 图像加载缓存库，预设了 loading、error 默认图片
  • components/Loading: 封装了一个通用的加载组件 <Loading>，支持 LoadingModifier 自定义
  • components/Toast: 结合 CtxManager 上下文专注于 Toast 提示，适用于无 UI 情况 (例如 Axios)

源码 - globals 全局服务

  • globals/store: 全局响应式状态，提供了用户登录登出、语言切换、消息/订单等数据的存取和清理
  • globals/event: 全局统一事件，提供用户登录登出、业务数据同步与更新，协调数据库与状态管理

源码 - utils 工具库

  • utils/crypto: 基于 @ohos/crypto-js 封装，支持对称密钥加解密处理，例如 AES-ECB、MD5
  • utils/grant: 封装权限管理逻辑，支持全局开关申请、动态权限请求、权限检测及引导跳转设置页
  • utils/size: 封装了设备尺寸相关的转换和渲染方法，用于自动适配不同屏幕尺寸和分辨率
  • utils/unit: 提供了多种单位之间的转换方法，如 lpx2vp、vp2lpx、any2vp、any2px

注意

虽然我们设计了 华为账号一键登录 以及 获取本机手机号 的 UI 页面和功能，但是调用这些 API 却是需要企业开发者账号才能申请其相关权限，所以比较可惜，目前 Dompet App 暂时无法使用一键登录。不过我们提供了 访客模式 ，无需注册便可进行登录演示。

image.png


演示

https://linpengteng.github.io/resource/dompet-app/hap.gif 前往


GitHub

Dompet App: https://github.com/DompetApp/Dompet.harmony 前往
Webview SDK: https://github.com/DompetApp/Dompet.webview 前往

前往点个赞 Star 👍

avatar
文章
阅读
粉丝