HarmonyOS鸿蒙Next中外部H5页面如何调取扫码功能

HarmonyOS鸿蒙Next中外部H5页面如何调取扫码功能 【问题描述】

uniapp编译的H5页面，在鸿蒙APP中通过webview打开，这个对应的鸿蒙APP也是一个混合开发的模式鸿蒙的基座+H5的功能制品包。现在我作为这个uniapp编译的H5开发方，需要实现扫码能力。

【问题诉求】

目前有什么好的解决方案吗，另外鸿蒙这边实现扫码功能需要申请什么权限吗

【版本信息】

H5的开发框架是uniapp（版本2.0.2-3061520221228002），vue2+ts

调试手机鸿蒙版本5.1.0.150 SP9

5 回复

开发者您好，

uniapp的vue2项目转为H5代码后使用Web组件加载H5页面，可以快速完成应用在HarmonyOS平台上运行的任务，但是存在uniapp转H5和Web组件集成H5页面两方面的局限性，以下是此场景实现扫码的方案：

由于其项目转为H5代码后默认不支持扫码能力uni.scanCode(OBJECT)，因此如果在HarmonyOS Next系统上需要实现扫码功能，就需要进行额外的开发适配。

uniapp侧：

scanCode() {
  // #ifdef APP-PLUS
  // 只允许通过相机扫码
  uni.scanCode({
    onlyFromCamera: true,
    success: function(res) {
      uni.showModal({
        title: `条码类型${res.scanType}`,
        content: res.result
      })
    }
  });
  // #endif

  // #ifdef H5
  ohos.scanCode({
    onlyFromCamera: true,
    success: function(res) {
      uni.showModal({
        title: `条码类型${res.scanType}`,
        content: res.result
      })
    }
  });
  // #endif
},

HarmonyOS侧：注册Web组件和H5交互的JSBridge对象和方法。

.javaScriptProxy({
  object: this.webJsBridge,
  name: 'ohos',
  asyncMethodList: WebJsBridge.ALL_SYNC_METHOD,
  methodList: WebJsBridge.ALL_METHOD,
  controller: this.controller
})

实现HarmonyOS侧业务逻辑，参考scanCode函数。

scanCode(callback: JsBridgeCallback) {
  // 拉起相机扫码功能，返回扫码结果
  // 定义扫码参数options
  let options: scanBarcode.ScanOptions = {
    scanTypes: [scanCore.ScanType.ALL],
    enableMultiMode: true,
    enableAlbum: true
  };
  try {
    let context = AppStorage.get('ctx') as UIContext;
    // 可调用getHostContext接口获取当前页面关联的Context
    scanBarcode.startScanForResult(context.getHostContext(), options).then((result: scanBarcode.ScanResult) => {
      // 解析码值结果跳转应用服务页
      console.info(`Succeeded in getting ScanResult by promise with options, result is ${JSON.stringify(result)}`);
      callback.success(result);
    }).catch((error: BusinessError) => {
      console.error(`Failed to get ScanResult by promise with options. Code:${error.code}, message: ${error.message}`);
      callback.fail(error.message);
    });
  } catch (error) {
    console.error(`Failed to start the scanning service. Code:${error.code}, message: ${error.message}`);
    callback.fail(error.message);
  }
}

更多关于HarmonyOS鸿蒙Next中外部H5页面如何调取扫码功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


小伙伴你好，扫码功能的部分可以参考 1楼 小伙伴的回答。
H5和原生的交互可以参考一下 web迁移方案采纳的答复 中的 方案一：ArkWeb组件嵌入方案 的示例代码段

cke_1280.png

Scan Kit

Scan Kit

Scan Kit（统一扫码服务）作为软硬协同的系统级扫码服务，创新性地推出了更简单的“扫码直达”接入能力。只需少量的接入工作，无需在应用中开发专门的扫码模块，即可通过系统级扫码入口实现扫码到应用的跳转。同时还为开发者提供了面向各种场景的码图识别和生成能力。

Scan Kit应用了多项计算机视觉技术和AI算法技术，不仅实现了远距离自动扫码，同时还针对多种复杂扫码场景（如暗光、污损、模糊、小角度、曲面码等）做了识别优化，提升扫码成功率与用户体验。

使用它不需要申请任何权限。

import { scanCore, scanBarcode } from '@kit.ScanKit';
// 导入默认界面扫码需要的日志模块和错误码模块
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct ScanBarCodePage {
  build() {
    Column() {
      Row() {
        Button("Promise with options")
          .backgroundColor('#0D9FFB')
          .fontSize(20)
          .fontColor($r('sys.color.comp_background_list_card'))
          .fontWeight(FontWeight.Normal)
          .align(Alignment.Center)
          .type(ButtonType.Capsule)
          .width('90%')
          .height(40)
          .margin({ top: 5, bottom: 5 })
          .onClick(() => {
            // 定义扫码参数options
            let options: scanBarcode.ScanOptions = {
              scanTypes: [scanCore.ScanType.ALL],
              enableMultiMode: true,
              enableAlbum: true
            };
            try {
              // 可调用getHostContext接口获取当前页面关联的Context
              scanBarcode.startScanForResult(this.getUIContext().getHostContext(), options).then((result: scanBarcode.ScanResult) => {
                // 解析码值结果跳转应用服务页
                hilog.info(0x0001, '[Scan CPSample]', `Succeeded in getting ScanResult by promise with options, result is ${JSON.stringify(result)}`);
              }).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}`);
            }
          })
      }
      .height('100%')
    }
    .width('100%')
  }
}

如果想让H5实现调用系统扫码功能，请参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-in-page-app-function-invoking

在HarmonyOS Next中，外部H5页面可通过调用系统提供的JS接口访问扫码功能。具体使用@ohos.systemCapability模块的扫码API，需在H5中引入鸿蒙JS SDK并声明ohos.permission.CAMERA权限。页面通过systemCapability.scan方法触发扫码界面，成功后可返回二维码/条码数据。注意确保WebView组件已启用相关系统能力。

在HarmonyOS Next中，外部H5页面通过WebView调用扫码功能，可通过JavaScript与原生侧交互实现。以下是具体方案：

  1. 使用JSBridge桥接：在鸿蒙原生侧注册扫码接口，通过WebView的JavaScriptProxy暴露给H5。H5通过window.harmony.call('scan')触发扫码，原生侧返回结果至H5回调函数。

  2. 权限申请：鸿蒙应用需在module.json5中声明ohos.permission.CAMERA权限，并在应用中动态请求用户授权。H5无需单独申请权限，依赖原生容器处理。

  3. 代码示例：

    • 原生侧注册接口：
    webviewController.registerJavaScriptProxy({
  scan: () => {
    // 调用鸿蒙扫码能力（如使用@ohos.multimedia.camera）
    // 返回结果至H5：window.callbackHandler.scanResult(data)
  }
}, "harmony");
    • H5触发扫码：
    window.harmony.scan(); // 通过回调接收结果

  4. 兼容性注意：确保WebView启用JavaScript执行（默认开启），并注意鸿蒙5.1.0版本对相机API的支持情况。

此方案无需H5直接处理权限，由鸿蒙基座统一管理，符合混合开发架构。

回到顶部