Ce guide pratique présente comment générer un code QR et lire son contenu à l'aide des fonctionnalités de scan sur HarmonyOS NEXT.

Composant QRCode

Le composant QRCode est utilisé pour afficher un code QR unique. Il accepte une chaîne de caractères comme contenu.

Utilisation

QRCode(valeur: string)

• valeur: La chaîne de caractères à encoder dans le code QR. La longueur maximale supportée est de 512 caractères ; les caractères au-delà seront tronqués. Il est crucial que cette valeur soit valide et ne soit ni null, ni undefined, ni vide, sous piene de générer un code QR invalide.

Propriétés du composent QRCode

• color: Définit la couleur du code QR. La valeur par défaut est '#ff000000' et ne change pas avec les thèmes clairs ou sombres du système.
• backgroundColor: Définit la couleur de fond du code QR. La valeur par défaut est Color.White. À partir de la version 11 de l'API, la valeur par défaut devient '#ffffffff' et reste fixe, indépendamment des modes d'affichage du système.
• contentOpacity: Ajuste la transparence du contenu du code QR. La valeur doit être comprise entre 0 (totalement transparent) et 1 (totalement opaque). Les valeurs hors de cette plage seront traitées comme la valeur par défaut.

Fonctionnalité de Scan de Code QR (scanBarcode)

Le module scanBarcode offre la capacité de scanner des codes QR via une interface utilisateur par défaut.

Types de résultats

• ScanResult: Contiant les informations relatives au code lu.
• ScanCodeRect: Indique la position du code dans l'image. Les interfaces de scan par défaut (startScan et startScanForResult) ne retournent pas cette information.
• Point: Représente les coordonnées d'un point, avec l'origine {0, 0} située en haut à gauche.
• ScanOptions: Permet de configurer les paramètres du scan et de la reconnaissance de codes.

Propriétés de ScanResult

• scanType: Le type de code identifié (par exemple, QR Code, Code 128, etc.).
• originalValue: La donnée brute extraite du code.
• scanCodeRect: Les coordonnées du rectangle englobant le code détecté.
• cornerPoints: Les coordonnées des quatre points d'angle du code détecté.

Propriétés de ScanOptions

• scanTypes: Spécifie les types de codes à rechercher. La valeur par défaut est ScanType.ALL, ce qui signifie que tous les types de codes sont recherchés.
• enableMultiMode: Un booléen indiquant si la reconnaissance de plusieurs codes est activée. La valeur par défaut est false (reconnaissance d'un seul code). Mettez à true pour activer la détection multiple.
• enableAlbum: Un booléen pour activer ou désactiver la possibilité de scanner des codes à partir d'images dans l'album photo. La valeur par défaut est true.

Méthodes de scan

• scanBarcode.startScanForResult: Lance l'interface de scan par défaut avec des paramètres configurables. Le résultat du décodage est renvoyé via une promesse asynchrone. Cette méthode doit être appelée dans le cycle de vie approprié de la page ou du composant.
• scanBarcode.startScan: Similaire à startScanForResult, mais renvoie le résultat du scan via une promesse asynchrone.

Exemple pratique : ScanCodeDemoPage

L'exemple suivant illustre comment générer un code QR et utiliser le bouton pour lancer une session de scan.

import { scanBarcode, scanCore } from '@kit.ScanKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct ScanCodeDemoPage {
  // Contenu initial pour le code QR
  private qrContent: string = 'Informations typiques : URLs, données JSON';
  // État pour afficher le contenu lu par le scan
  @State scannedValue: string = '';

  build() {
    Column({ space: 15 }) {
      Text('Application Démo Scan Code QR')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)

      Text('Génération de Code QR :')
        .fontSize(18)
        .margin({ top: 20 });

      // Composant QRCode pour afficher le contenu
      QRCode(this.qrContent)
        .width(160)
        .height(160)
        .margin({ bottom: 30 });

      Button('Lancer le Scan')
        .onClick(() => {
          // Configuration des options pour le scan
          const scanOptions: scanBarcode.ScanOptions = {
            scanTypes: [scanCore.ScanType.QR], // Recherche uniquement les QR codes
            enableMultiMode: false, // Désactive la reconnaissance multiple
            enableAlbum: true     // Permet le scan depuis l'album
          };

          try {
            // Appel de la fonction de scan
            scanBarcode.startScan(scanOptions, (error: BusinessError, result?: scanBarcode.ScanResult) => {
              if (error) {
                // Gestion des erreurs
                hilog.error(0x0001, '[Scan Demo]',
                  `Erreur lors du scan : Code ${error.code}, Message: ${error.message}`);
                this.scannedValue = 'Erreur de scan.';
                return;
              }
              // Affichage du résultat du scan
              if (result && result.originalValue) {
                 hilog.info(0x0001, '[Scan Demo]', `Scan réussi : ${result.originalValue}`);
                 this.scannedValue = result.originalValue;
              } else {
                 hilog.warn(0x0001, '[Scan Demo]', 'Scan terminé sans données valides.');
                 this.scannedValue = 'Aucune donnée lue.';
              }
            });
          } catch (e) {
            // Gestion des exceptions lors de l'appel de startScan
            const err = e as BusinessError;
            hilog.error(0x0001, '[Scan Demo]', `Exception lors du lancement du scan : Code ${err.code}, Message: ${err.message}`);
            this.scannedValue = 'Impossible de lancer le scan.';
          }
        })
        .width('80%')
        .height(50);

      Text('Contenu lu par le scan :')
        .fontSize(18)
        .margin({ top: 20 });

      Text(this.scannedValue)
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .width('100%')
        .maxLines(3)
        .textOverflow({ overflow: TextOverflow.Ellipsis });
    }
    .height('100%')
    .width('100%')
    .padding({ left: 20, right: 20, top: 20, bottom: 20 })
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center);
  }
}