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

123.gif

【环境准备】

• 操作系统：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

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

推荐阅读更多精彩内容