Environment Preparation
• OS: Windows 10
• Dev Tool: DevEco Studio 5.0.1 Release Build Version: 5.0.5.306
• Target Device: Huawei Mate60 Pro
• Language: ArkTS
• Framework: ArkUI
• API Version: API 13
Project Background & Value
In daily development, programmers often need to perform complex mathematical operations (e.g., trigonometric functions, complex numbers, exponentiation). However, traditional calculators face the following limitations:
Limited expression support: Most lack nested parentheses or multi-function combinations.
Disorganized scientific functions: Require repetitive button clicks.
This project leverages HarmonyOS NEXT’s Web component capabilities and JavaScript’s eval function to create a professional calculator supporting arbitrary mathematical expressions. Typical use cases:
// Complex number operations
Math.sqrt(-4) * 2 → 4i
// Trigonometric combinations
Math.sin(Math.PI/2) + Math.cos(0) → 2
// Complex expressions
(2+3)*Math.pow(2,5)/Math.sqrt(9) → 53.333
Technical Implementation
System Architecture
Three-layer architecture:
Presentation Layer: ArkUI for UI construction
Logic Layer: Web component for JavaScript execution
Communication Layer: JavaScriptProxy for bidirectional data flow
Key Technologies
Core Code Analysis
Communication Bridge
// Calculator service class
class CalculatorService {
// Result callback
postResult = (result: string) => {
this.context.eventHub.emit('formulaEvaluated', result);
}
}
// Web component configuration
Web({
src: $rawfile('eval.html'),
controller: this.webController
})
.javaScriptProxy({
name: "harmonyBridge",
object: this.calculatorService,
methodList: ['postResult']
})
Key points:
Use javaScriptProxy for bidirectional communication
Expose native methods via harmonyBridge namespace
Expression Evaluation
Invocation:
// On calculation button click
this.webController.runJavaScript(`evaluateExpression('${this.formulaInput}')`);
Security mechanisms:
try-catch wrapping for eval
Error message standardization
Result type conversion
Input Optimization
// Smart expression insertion
Text(' Math.sin() ')
.onClick(() => {
const pos = this.inputController.getCaretOffset().index;
this.formulaInput =
this.formulaInput.slice(0, pos) +
' Math.sin() ' +
this.formulaInput.slice(pos);
})
Interaction highlights:
Preserve function parameter placeholders ()
Automatic cursor positioning
Conclusion
This solution innovatively addresses the challenge of dynamic expression evaluation in ArkTS by leveraging HarmonyOS Web components. Key advantages:
Powerful functionality: Full JavaScript math library support
Excellent UX: Developer-friendly input design
Extensible architecture: Modular implementation
Open-source code: https://gitee.com/zhong-congxu/calculator20250322
