【环境准备】
• 操作系统：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
复制代码
【技术实现方案】
采用三层架构模式：
表现层：ArkUI 构建可视化界面
逻辑层：Web 组件执行 JavaScript 计算
通信层：JavaScriptProxy 实现双向通信
【核心代码解析】
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
评论