uniapp or uniappx 中调用鸿蒙原生扫码能力的实践

<!-- pages/index/index.uvue -->
<template>
  <view class="content">
    <button @click="startScan">开始扫描</button>
    <text v-if="scanResult">扫描结果：{{scanResult}}</text>
  </view>
</template>

<script>
import { scanapiSync } from "@/uni_modules/hmos-scan/utssdk/app-harmony";

export default {
  data() {
    return {
      scanResult: ''
    }
  },
  methods: {
    async startScan() {
      try {
        const result = await scanapiSync()
        this.scanResult = result
        console.log('扫描结果：', result)
      } catch (error) {
        console.error('扫描失败：', error)
        this.scanResult = '扫描失败'
      }
    }
  }
}
</script>

<style>
.content {
  padding: 20px;
}
button {
  margin: 20px 0;
}
</style>

<!-- pages/advanced/index.uvue -->
<template>
  <view class="container">
    <view class="scan-area">
      <button @click="startScan" :disabled="isScanning">
        {{isScanning ? '扫描中...' : '开始扫描'}}
      </button>
    </view>
    
    <view class="result-area" v-if="scanHistory.length > 0">
      <text class="title">扫描历史</text>
      <view v-for="(item, index) in scanHistory" :key="index" class="history-item">
        <text class="time">{{item.time}}</text>
        <text class="content">{{item.content}}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { scanapiSync } from "@/uni_modules/hmos-scan/utssdk/app-harmony";

export default {
  data() {
    return {
      isScanning: false,
      scanHistory: []
    }
  },
  methods: {
    async startScan() {
      if (this.isScanning) return
      
      this.isScanning = true
      try {
        const result = await scanapiSync()
        this.scanHistory.unshift({
          time: new Date().toLocaleTimeString(),
          content: result
        })
      } catch (error) {
        console.error('扫描失败：', error)
      } finally {
        this.isScanning = false
      }
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
.scan-area {
  margin-bottom: 20px;
}
.result-area {
  border-top: 1px solid #eee;
  padding-top: 20px;
}
.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.history-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.time {
  font-size: 12px;
  color: #999;
}
.content {
  margin-top: 5px;
}
</style>