【环境准备】

• 操作系统：Windows 10

• 开发工具：DevEco Studio 5.0.1 Release Build Version: 5.0.5.306

• 目标设备：华为Mate60 Pro

• 开发语言：ArkTS

• 框架：ArkUI

• API版本：API 13

【项目背景与价值】

在程序员日常开发中，常常需要进行复杂的数学运算（如三角函数、复数计算、幂运算等），但传统计算器存在以下痛点：

1、表达式支持有限：多数不支持括号嵌套或多函数组合
2、科学函数分散：需要多次点击查找功能按钮
本项目基于鸿蒙NEXT的Web组件能力，结合JavaScript的eval函数，打造支持任意数学表达式的专业计算器。典型使用场景：

?
1
2
3
4
5
6
// 复数运算
Math.sqrt(-4) * 2 → 4i
// 三角函数组合
Math.sin(Math.PI/2) + Math.cos(0) → 2
// 复杂表达式
(2+3)*Math.pow(2,5)/Math.sqrt(9) → 53.333

【技术实现方案】

1、系统架构设计

采用三层架构模式：
表现层：ArkUI构建可视化界面
逻辑层：Web组件执行JavaScript计算
通信层：JavaScriptProxy实现双向通信

2、关键技术选型

【核心代码解析】

1、通信桥接实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 计算服务类
class CalculatorService {
   // 结果回调方法
   postResult = (result: string) => {
     this .context.eventHub.emit( 'formulaEvaluated' , result);
   }
}
 
// Web组件配置
Web({
   src: $rawfile( 'eval.html' ),
   controller: this .webController
})
.javaScriptProxy({
   name: "harmonyBridge" ,
   object: this .calculatorService,
   methodList: [ 'postResult' ]
})

实现要点：
使用javaScriptProxy建立双向通道
通过命名空间harmonyBridge暴露原生方法

2、表达式计算流程

?
1
2
3
4
5
6
7
8
9
10
11
<!-- eval.html -->
<script>
     function evaluateExpression(expr) {
         try {
             const result = eval(expr);
             harmonyBridge.postResult(String(result));
         } catch (e) {
             harmonyBridge.postResult(`错误: ${e.message}`);
         }
     }
</script>

调用

?
1
2
// 点击计算按钮时
this .webController.runJavaScript(`evaluateExpression( '${this.formulaInput}' )`);

安全机制：

try-catch包裹eval执行
错误信息统一处理
结果强制转换为字符串

3、输入优化设计

?
1
2
3
4
5
6
7
8
9
// 智能插入推荐表达式
Text( ' Math.sin() ' )
   .onClick(() => {
     const pos = this .inputController.getCaretOffset().index;
     this .formulaInput =
       this .formulaInput.slice(0, pos) +
       ' Math.sin() ' +
       this .formulaInput.slice(pos);
   })

交互亮点：

保留函数参数占位符()
自动维护光标位置

【总结】

本方案创新性地利用鸿蒙Web组件解决了ArkTS无法直接执行动态表达式的难题，主要优势体现在：

功能强大：完整支持JavaScript数学库
体验优秀：开发者友好的输入体验
扩展灵活：模块化架构设计

完整代码已开源：https://gitee.com/zhong-congxu/calculator20250322

 

原创作者: zhongcx 转载于: https://www.cnblogs.com/zhongcx/p/18786652
# harmonyos # 华为
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

【开发者故事】集成 HarmonyOS App Linking 能力，搜觅 App 重塑高效专注搜索新体验

avatar HarmonyOS开发者社区
cover

7月27日AI日报 | Claude Opus 5 上线灵知，WorkBuddy 鸿蒙 PC 版上架

avatar HarmonyOS开发者社区

鸿蒙 构建：Hvigor插件开发（二）

本文介绍了Hvigor插件开发的两种方式：hvigorfile脚本和TypeScript项目。hvigorfile脚本开发快速但难以复用，适合临时需求；TypeScript项目开发流程较复杂但支持复用和分发，推荐用于正式插件开发。详细说明了TypeScript项目从初始化、开发到发布的全流程，包括配置镜像、添加依赖、编写实现HvigorPlugin接口的代码、编译发布等步骤。最后对比了两种方式的优

avatar HarmonyOS开发者社区