Getting Started with ScanKit in HarmonyOS (QR Code Generator)

#harmonyos #scankit #qrcodegenerator #arkts

Read the original article：Getting Started with ScanKit in HarmonyOS (QR Code Generator)

Learn how to build a simple QR code generator in HarmonyOS using ScanKit’s generateBarcode to create and display QR codes.

Introduction

Need a quick way to generate a QR code in your HarmonyOS app? With ScanKit and ImageKit, you can easily turn any string into a QR code and render it as a PixelMap.

What You Need

HarmonyOS Next environment
ScanKit and ImageKit libraries
An image placeholder for rendering the QR code

QR Code Generator Logic

Here’s a functional example:

1. Import Required Libraries

We import the necessary modules from ScanKit, ImageKit, and BasicServicesKit.

import { scanCore, generateBarcode } from '@kit.ScanKit';
import { image } from '@kit.ImageKit';
import { BusinessError } from "@kit.BasicServicesKit";

2. Define the Component

We define a component named Payment, with a state to hold the generated QR code as a PixelMap.

@Component
export struct Payment {
  @State pixelMap: image.PixelMap | undefined = undefined;

3. Generate QR Code in aboutToAppear

Inside aboutToAppear, we define the content and options, then generate the QR code using createBarcode(). We handle both success and error cases using .then() and .catch(), plus a try-catch.

  aboutToAppear(): void {
    this.pixelMap = undefined;
    let content: string = 'huawei';
    let options: generateBarcode.CreateOptions = {
      scanType: scanCore.ScanType.QR_CODE,
      height: 400,
      width: 400
    }

    try {
      generateBarcode.createBarcode(content, options).then((pixelMap: image.PixelMap) => {
        this.pixelMap = pixelMap;
      }).catch((error: BusinessError) => {
        console.log('Failed to get PixelMap by promise with options., message: ' + error.message);
      })
    } catch (error) {
      console.log('Failed to createBarcode by promise with options, message: ' + error.message);
    }
  }

4. Render the UI

The build method displays the title and conditionally shows the generated QR code if available.

  build() {
    Column() {
      Column() {
        Text('Payment')
          .fontColor(Color.White)
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 20 })

        if (this.pixelMap) {
          Image(this.pixelMap)
            .width('50%')
            .height('50%')
            .objectFit(ImageFit.Contain)
        }

      }
      .height('100%')
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
    }
  }
}

How It Works

aboutToAppear: Called when the component is about to render. Inside it, generateBarcode.createBarcode() is used to generate a QR code from a given string (e.g., “huawei”).
createBarcode: Accepts the text, barcode format (e.g., BarcodeFormat.QR_CODE), and options like width and height. Returns a PixelMap if successful.
try-catch: Used to wrap the generation logic to handle any potential errors safely and avoid crashes.

Conclusion

With just a few lines of code, you can generate and display QR codes using HarmonyOS ScanKit. Use this as a base to build dynamic, scannable UI features.

Next steps: Add a text input for dynamic QR generation or integrate scanning support.