技术栈
Appgallery connect
开发准备
随着app的逐渐完善，我们现在需要在细节处做更多的打磨，在首页我们添加了很多静态的按钮和组件，现在我们开始对这些组件进行功能的添加，这次首先实现的是首页头部的扫一扫功能，扫一扫我们实现扫码后跳转商品详情页
功能分析
要实现扫一扫的功能，我们有两种选择，首先是zxing，然后是scankit，这里我们选择使用scankit，因为它针对多种复杂扫码场景做了识别优化，提升扫码成功率与用户体验，我们自己要处理的内容就会少很多，我们主要扫码内容就是商品的id，通过扫描商品id对应的二维码，携带id跳转到对应的商品详情页面，查询出对应的商品详情展示
代码实现
首先我们在二维码扫描的按钮添加事件回调
private onSearchClick?: () => void
Image($r('app.media.scan'))
.width(24)
.height(24)
.margin({
left: 12 })
.onClick(()=>{
this.onSearchClick!()
})
然后我们在引用组件的地方调用Scankit
CommonSearchBar({
onSearchClick:()=>{
let 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) {
let 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}`);
}
}})
在回调中我们获取了扫码的内容，把扫码内容传递到商品详情页
//先新建一个传递参数的实体
export class ProductDetailModel {
id: number = 0;
}
//商品详情页根据获取的id查询对应的商品
let databaseZone = cloudDatabase.zone('default');
let product = await router.getParams() as ProductDetailModel;
console.info('Received params:',product);
let condition1 = new cloudDatabase.DatabaseQuery(home_product_list);
condition1.equalTo("id",product.id)
let productDetail = await databaseZone.query(condition1);
let json = JSON.stringify(productDetail)
let list:HomeProductList[]= JSON.parse(json)
this.productParams=list[0]
hilog.error(0x0000, 'testTag', `Failed to query data, code: ${
this.productParams}`);
到这里就实现了扫码进入商品详情的功能
