当前位置：首页 > uni-app

uniapp 电压表

2026-02-06 08:52:58uni-app

uniapp 电压表实现方案

在 uniapp 中实现电压表功能，可以通过模拟或对接硬件设备两种方式完成。以下是具体实现方法：

模拟电压表界面

使用 Canvas 或 SVG 绘制电压表表盘，结合动画效果模拟指针摆动。关键代码如下：

// 在 vue 文件中
<template>
  <view>
    <canvas canvas-id="voltmeter" style="width: 300px; height: 300px;"></canvas>
    <slider @change="onVoltageChange" min="0" max="100" step="1"/>
  </view>
</template>

<script>
export default {
  data() {
    return {
      voltage: 0
    }
  },
  methods: {
    onVoltageChange(e) {
      this.voltage = e.detail.value
      this.drawVoltmeter()
    },
    drawVoltmeter() {
      const ctx = uni.createCanvasContext('voltmeter')
      // 绘制表盘
      ctx.beginPath()
      ctx.arc(150, 150, 140, 0, 2 * Math.PI)
      ctx.stroke()

      // 绘制刻度
      for(let i=0; i<=10; i++) {
        const angle = Math.PI * (0.8 + i * 0.34)
        ctx.moveTo(150 + 120 * Math.cos(angle), 150 + 120 * Math.sin(angle))
        ctx.lineTo(150 + 140 * Math.cos(angle), 150 + 140 * Math.sin(angle))
        ctx.stroke()
      }

      // 绘制指针
      const pointerAngle = Math.PI * (0.8 + this.voltage * 0.0034)
      ctx.moveTo(150, 150)
      ctx.lineTo(150 + 100 * Math.cos(pointerAngle), 150 + 100 * Math.sin(pointerAngle))
      ctx.strokeStyle = 'red'
      ctx.lineWidth = 3
      ctx.stroke()

      ctx.draw()
    }
  },
  onReady() {
    this.drawVoltmeter()
  }
}
</script>

对接硬件设备

通过蓝牙或串口连接真实电压测量设备，需要配合原生插件实现：

申请蓝牙权限，在 manifest.json 中添加：

"permission": {
"scope.userLocation": {
 "desc": "需要蓝牙权限"
}
}

使用 uni-app 的蓝牙 API 连接设备：

uni.openBluetoothAdapter({
success(res) {
 uni.startBluetoothDevicesDiscovery({
   services: ['设备UUID'],
   success(res) {
     uni.onBluetoothDeviceFound(foundDevices)
   }
 })
}
})

接收并处理电压数据：

function foundDevices(devices) {
devices.forEach(device => {
 if(device.name.includes('Voltmeter')) {
   uni.createBLEConnection({
     deviceId: device.deviceId,
     success(res) {
       uni.onBLECharacteristicValueChange(res => {
         const voltage = new Float32Array(res.value)[0]
         this.voltage = voltage
         this.drawVoltmeter()
       })
     }
   })
 }
})
}

注意事项

uniapp 电压表