当前位置：首页 > uni-app

uniapp公式计算器

2026-03-26 11:40:00uni-app

实现 Uniapp 公式计算器的步骤

开发环境准备
确保已安装 HBuilderX 并创建 Uniapp 项目，选择 Vue.js 作为开发语言。

页面结构设计
在 pages 目录下新建计算器页面（如 calculator.vue），使用 template 构建界面：

uniapp公式计算器

<template>
  <view class="calculator">
    <input v-model="formula" placeholder="输入公式，如 2+3*4" />
    <button @click="calculate">计算</button>
    <view class="result">结果：{{ result }}</view>
  </view>
</template>

逻辑实现
在 script 部分处理公式计算，推荐使用 eval（需注意安全性）或第三方库如 math.js：

<script>
import { evaluate } from 'mathjs'; // 需安装 math.js

export default {
  data() {
    return {
      formula: '',
      result: ''
    };
  },
  methods: {
    calculate() {
      try {
        this.result = evaluate(this.formula); // 使用 math.js
        // 或 this.result = eval(this.formula); （简单场景）
      } catch (e) {
        this.result = '公式错误';
      }
    }
  }
};
</script>

安全与优化

uniapp公式计算器

避免直接使用 eval：若必须使用，需对输入进行校验（如正则过滤非法字符）。
使用 math.js 更安全：支持复杂数学表达式且避免注入风险。
安装依赖：通过 npm 安装 math.js：
```
npm install mathjs
```

样式调整
在 style 部分添加基础样式：

<style>
.calculator {
  padding: 20px;
}
input {
  border: 1px solid #ddd;
  padding: 10px;
  width: 100%;
}
button {
  margin-top: 10px;
  background-color: #007AFF;
  color: white;
}
</style>

扩展功能