HarmonyOS NEXT Development Case: Programmer Calculator - HarmonyOS Developer Community
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 function evaluateExpression(expr) { try { const result = eval(expr); harmonyBridge.postResult(String(result)); } catch (e) { harmonyBridge.postResult(`Error: ${e.message}`); } } 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
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
