《仿盒马》app开发技术分享-- 扫一扫功能（35）

技术栈

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}`);

到这里就实现了扫码进入商品详情的功能