Imitation Box Horse - Scan function (35)

Technology Stack
Appgallery Connect

Development Preparation
As the app gradually improves, we now need to polish more details. We have added many static buttons and components on the home page, and now we start to add functions to these components. The first function to implement is the scan feature at the top of the home page, which will redirect to the product details page after scanning a code.

Functional Analysis
To implement the scanning feature, we have two options: zxing and scankit. We choose scankit because it optimizes recognition for various complex scanning scenarios, improving scanning success rate and user experience, reducing the amount of content we need to handle. The main content we scan is the product ID. By scanning the QR code corresponding to the product ID, we carry the ID to the corresponding product details page and query the corresponding product details for display.

Code Implementation
First, add an event callback to the QR code scanning button:

typescript
private onSearchClick?: () => void;
Image($r('app.media.scan'))
.width(24)
.height(24)
.margin({ left: 12 })
.onClick(() => {
this.onSearchClick!();
});

Then, invoke Scankit where the component is referenced:

typescript
CommonSearchBar({ onSearchClick: () => {
const options: scanBarcode.ScanOptions = {
scanTypes: [scanCore.ScanType.ALL],
enableMultiMode: true,
enableAlbum: true
};
try {
scanBarcode.startScanForResult(getContext(this), options).then((result: scanBarcode.ScanResult) => {
hilog.info(0x0001, '[Scan CPSample]', Succeeded in getting ScanResult by promise with options, result is ${JSON.stringify(result)});
if (result.originalValue !== null) {
const product: ProductDetailModel = {
id: Number(result.originalValue)
};
router.pushUrl({
url: 'pages/component/ProductDetailsPage',
params: product
}, (err) => {
if (err) {
console.error(Invoke pushUrl failed, code is ${err.code}, message is ${err.message});
return;
}
console.info('Invoke pushUrl succeeded.');
});
}
}).catch((error: BusinessError) => {
hilog.error(0x0001, '[Scan CPSample]',
Failed to get ScanResult by promise with options. Code:${error.code}, message: ${error.message});
});
} catch (error) {
hilog.error(0x0001, '[Scan CPSample]',
Failed to start the scanning service. Code:${error.code}, message: ${error.message});
}
}})

In the callback, we obtain the scanned content and pass it to the product details page:

typescript
// First, create an entity to pass parameters
export class ProductDetailModel {
id: number = 0;
}

// The product details page queries the corresponding product based on the obtained ID
const databaseZone = cloudDatabase.zone('default');
const product = await router.getParams() as ProductDetailModel;
console.info('Received params:', product);
const condition1 = new cloudDatabase.DatabaseQuery(home_product_list);
condition1.equalTo("id", product.id);
const productDetail = await databaseZone.query(condition1);
const json = JSON.stringify(productDetail);
const list: HomeProductList[] = JSON.parse(json);
this.productParams = list[0];
hilog.error(0x0000, 'testTag', Failed to query data, code: ${this.productParams});

Executing the code shows the effect of scankit, implementing the function of scanning to enter the product details page.