鸿蒙NEXT开发案例：程序员计算器

【环境准备】

• 操作系统：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函数，打造支持任意数学表达式的专业计算器。典型使用场景：

// 复数运算 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、通信桥接实现

// 计算服务类 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、表达式计算流程

<!-- eval.html --> <script>     function evaluateExpression(expr) {         try {             const result = eval(expr);             harmonyBridge.postResult(String(result));         } catch (e) {             harmonyBridge.postResult(`错误: ${e.message}`);         }     } </script> 

调用

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

安全机制：

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

3、输入优化设计

// 智能插入推荐表达式 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