uniapp公式计算器

实现 Uniapp 公式计算器的步骤

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

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

<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>

安全与优化

• 避免直接使用 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>

扩展功能

• 支持历史记录：将计算结果存入本地存储（uni.setStorageSync）。
• 添加科学计算功能：利用 math.js 的 sin、log 等函数。
• 多平台适配：通过条件编译调整样式（如 #ifdef H5）。