Practice of calling Hongmeng's native code scanning ability in uniapp or uniappx

About HarmonyOS 5

HarmonyOS 5 (also known as HarmonyOS Next) represents a revolutionary step in the evolution of Huawei's distributed operating system. As someone who has been following its development closely, I can attest to the remarkable improvements in this version. The system's microkernel architecture not only enhances security but also provides unprecedented flexibility in cross-device collaboration. What excites me most about HarmonyOS 5 is its focus on developer experience - the new ArkTS language, enhanced UI components, and improved debugging tools have made development much more efficient. The distributed capabilities allow us to create truly seamless experiences across different devices, from smartphones to tablets, smart TVs, and IoT devices.

About the Author

I am a dedicated HarmonyOS developer based in China, with over three years of experience in the ecosystem. My journey with HarmonyOS began with its early versions, and I've witnessed its remarkable evolution. As a developer who has contributed to several open-source HarmonyOS projects, I've gained valuable insights into its architecture and best practices. I'm particularly passionate about cross-platform development and native capabilities integration, which led me to develop this comprehensive scanning module. Through my blog and GitHub repositories, I've been sharing my experiences and helping other developers navigate the exciting world of HarmonyOS development.

I. Background Introduction

Recently, while developing a HarmonyOS application, we encountered a need for scanning functionality. We had tried many scanning solutions before, but none were ideal. Until we discovered the hmos-scan plugin, which finally solved our pain points. Let me share our experience.

1.1 Why Choose hmos-scan?

To be honest, we've encountered many pitfalls before:

Traditional scanning solutions were problematic:
- WebView scanning was painfully slow and often froze
- Third-party libraries doubled the app size
- Different phones had different performance
- Poor recognition of slightly blurry codes, terrible user experience
Native development was painful:
- Writing native code took too much time
- Had to write code for each platform
- Maintenance was particularly troublesome
- Development cycle was too long, boss couldn't wait
hmos-scan is excellent:
- Uses HarmonyOS native capabilities, scanning is super fast
- High recognition rate, can scan even at angles
- Just a few lines of code, very convenient
- Good performance, low memory usage
- Can select images from gallery, very user-friendly

1.2 Practical Use Cases

E-commerce Price Comparison:

   // Scan product code for price comparison
   async function scanProduct() {
     try {
       const barcode = await scanapiSync()
       // Call price comparison API
       const priceInfo = await comparePrice(barcode)
       showPriceResult(priceInfo)
     } catch (error) {
       showError('Scan failed, please try again')
     }
   }

Express Tracking:

   // Scan express tracking number
   async function scanExpress() {
     try {
       const trackingNumber = await scanapiSync()
       // Query logistics information
       const expressInfo = await queryExpress(trackingNumber)
       showExpressInfo(expressInfo)
     } catch (error) {
       showError('Scan failed, please try again')
     }
   }

Meeting Check-in:

   // Scan meeting code for check-in
   async function scanMeeting() {
     try {
       const meetingCode = await scanapiSync()
       // Verify meeting code
       const checkInResult = await verifyMeeting(meetingCode)
       showCheckInResult(checkInResult)
     } catch (error) {
       showError('Check-in failed, please try again')
     }
   }

II. Environment Preparation

Development Tools:
- HBuilderX 3.8.0 or above
- DevEco Studio (required for HarmonyOS development)
Project Requirements:
- Use uni-app x framework
- Choose Vue 3

III. Plugin Usage

1. Plugin Installation

Visit plugin market: hmos-scan plugin
Download and import into HBuilderX

IV. Using in Project

1. Basic Example

<!-- pages/index/index.uvue -->
<template>
  <view class="content">
    <button @click="startScan">Start Scanning</button>
    <text v-if="scanResult">Scan Result: {{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('Scan Result:', result)
      } catch (error) {
        console.error('Scan Failed:', error)
        this.scanResult = 'Scan Failed'
      }
    }
  }
}
</script>

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

2. Advanced Example (with History)

<!-- pages/advanced/index.uvue -->
<template>
  <view class="container">
    <view class="scan-area">
      <button @click="startScan" :disabled="isScanning">
        {{isScanning ? 'Scanning...' : 'Start Scan'}}
      </button>
    </view>

    <view class="result-area" v-if="scanHistory.length > 0">
      <text class="title">Scan History</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('Scan Failed:', 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>

V. Features

Multiple Mode Support:
- QR codes and barcodes
- Gallery image selection
Error Handling:
- Comprehensive exception handling
- User-friendly error messages
- Detailed logging
User Experience:
- Simple operation
- Status feedback
- Asynchronous processing

VI. Notes

Compatibility:
- Only supports HarmonyOS
- Ensure device has scanning capability
Performance Optimization:
- Monitor memory usage
- Release resources promptly
- Avoid repeated scanning

VII. Common Issues

Scanning Failure:
- Check device compatibility
- Check logs for errors
Result Parsing Errors:
- Check result format
- Handle various return types
- Add error handling

VIII. Summary

After using the hmos-scan plugin, scanning functionality development has become very simple. Native capabilities are fully preserved, development experience is excellent, highly recommended!