运用uniapp使用图片和按键功能制作一个计算器，制作工具为hbuilder,写出代码

UniApp是一个基于Vue.js的跨平台应用开发框架，HBuilderX是其官方提供的IDE。为了创建一个基本的图片按钮和计算功能的计算器，我们可以按照以下步骤进行：

首先，在HBuilderX项目中，你需要引入必要的UI组件库，如`button`和`image`。

<template>
  <view class="calculator">
    <view class="display" v-model.number="result">{{ result }}</view>
    <!-- 图片数组，用于显示数字 -->
    <view class="buttons">
      <view :key="num" @tap="handlePress(num)" :class="{ active: isCurrent(num) }">
        <image src="~/assets/images/numbers/{{ num }}.png" slot="custom" />
      </view>
      <!-- 其他操作符按钮 -->
      <view @tap="handleOperator('+')">+</view>
      <view @tap="handleOperator('-')">-</view>
      <view @tap="handleOperator('*')">*</view>
      <view @tap="handleOperator('/')">/</view>
      <view @tap="clearDisplay">C</view>
      <view @tap="equals">=</view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const result = ref(0);
const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
const operators = ['+', '-', '*', '/'];

function handlePress(num) {
  result.value += parseInt(num);
}

function handleOperator(op) {
  // 这里可以添加处理运算逻辑，比如保存当前结果、清空结果等
  console.log('Pressed operator:', op);
}

function clearDisplay() {
  result.value = 0;
}

function equals() {
  // 计算结果
}
// 初始化界面
onMounted(() => {
  // 遍历数字并设置初始按钮状态
  numbers.forEach((num) => (numbers[num] = true));
});
</script>

<style scoped>
/* 样式省略 */
</style>

这个例子展示了如何通过监听按钮点击事件`@tap`来更新显示的结果。对于实际的计算器功能，需要在`handleOperator`函数中添加复杂的数学计算，并在`equals`中整合所有操作。这只是一个基础模板，你还需要根据需求进一步完善。