HarmonyOS web加载H5页面点击扫码成功后如何将结果返回给前端

web加载H5页面点击扫码成功后如何将结果通过前端提供的方法返回给前端显示再页面上

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

scanBarcode.startScanForResult可以返回扫码结果,然后@State去设置返回的结果,参考demo如下

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

let options: scanBarcode.ScanOptions = {
  scanTypes: [scanCore.ScanType.ALL],
  enableMultiMode: true,
  enableAlbum: true
};

class TestClass {
  Result:string = ""
  // ArkTS h5都用await保障执行顺序
  async scan(): Promise<string> {
    let scanResult = await scanBarcode.startScanForResult(getContext(this), options)
    // 收到扫码结果后返回
    this.Result = scanResult.originalValue
    return scanResult.originalValue;
  }
}

@Entry
@Component
export struct PageWeb {
  readonly webUrl: string | Resource = 'www.huawei.com'
  readonly controller: WebviewController = new web_webview.WebviewController()
  userAgentAlreadySet: boolean = false
  @State customUserAgent?: string = undefined
  @State @Watch("passResult") testObj: TestClass = new TestClass();
  // 返回的结果
  @State results:string = "扫码结果"
  passResult(){
    this.results = this.testObj.Result
  }
  build() {
    if (this.customUserAgent) {
      Column() {
        Text(this.results).fontColor("red")
        Web({ src: $rawfile('index.html'), controller: this.controller })
          .domStorageAccess(true)
          .javaScriptProxy({
            object: this.testObj,
            name: "testObjName",
            methodList: ["scan"],
            controller: this.controller
          })

      }
    }
  }

  aboutToAppear(): void {
    // 模拟异步构建 customUserAgent 过程
    setTimeout(() => this.customUserAgent = 'ua/value', 200)
  }

  applyCustomUserAgent(): void {
    this.userAgentAlreadySet = true
    let defaultUserAgent = this.controller.getUserAgent()
    this.controller.setCustomUserAgent(defaultUserAgent + ' ' + this.customUserAgent)
    this.controller.loadUrl(this.webUrl)
  }

  onBackPress(): boolean | void {
    // 自定义页面返回逻辑
    // if (this.controller.accessBackward()) {
    // this.controller.backward()
    // return true
    // }
    return true;
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS Web组件加载在线H5页面
275浏览 • 1回复 待解决
HarmonyOS h5拉起系统页面的demo
281浏览 • 1回复 待解决
HarmonyOS H5调用原生功能
77浏览 • 1回复 待解决
HarmonyOS H5页面加载缓存机制
330浏览 • 1回复 待解决
Web组件和h5页面如何交互?
252浏览 • 1回复 待解决
Web能直接加载h5吗?
3091浏览 • 2回复 待解决
HarmonyOS web组件加载h5h5拉起摄像头
613浏览 • 1回复 待解决
HarmonyOS Web组件加载H5白屏
24浏览 • 1回复 待解决
HarmonyOS h5页面缩放问题
592浏览 • 0回复 待解决