HarmonyOS 鸿蒙Next WebView 调用原生方法问题

import { BusinessError } from ‘@kit.BasicServicesKit’; import { router, promptAction } from ‘@kit.ArkUI’; import { webview }from ‘@kit.ArkWeb’; import { window } from ‘@kit.ArkUI’; import Logger from ‘…/common/utils/Logger’; import { CommonConstants } from ‘…/common/constants/CommonConstants’; import { ArkTSFunModel, BridgeProxy } from ‘…/model/ProductModel’; import { LogoutConfirmDialog } from ‘…/common/LogoutConfirmDialog’; import JSBridge from ‘…/common/constants/JSBridge’;

const TAG = ‘[IndexPage]’;

@Entry @Component struct IndexPage { @State @Watch(‘updateStatus’) webCanBack: boolean = false; @State webCanForward: boolean = false; @State controller: webview.WebviewController = new webview.WebviewController(); @State statusBarHeight: number = 0; @State sliderBarHeight: number = 0; arkTSObj: ArkTSFunModel = { jumpOrderConfirm: (detailStr: string) => this.jumpOrderConfirm(detailStr) };

private jsBridge: JSBridge = new JSBridge(this.controller);

bridgeProxy:BridgeProxy ={ object:this.arkTSObj, name: ‘arkTSFunObj’, methodList: [‘jumpOrderConfirm’], controller: this.controller }

aboutToAppear() { webview.WebviewController.setWebDebuggingAccess(true); window.getLastWindow(getContext(this), (err: BusinessError, windowClass: window.Window) => { if (err.code) { Logger.error(TAG, 'Failed to obtain the main window. Cause: ’ + JSON.stringify(err)); return; } Logger.info(TAG, 'Succeeded in obtaining the main window. Data: ’ + JSON.stringify(windowClass));

  // Realize the immersive effect.
  try {
    let type = window.AvoidAreaType.TYPE_SYSTEM;
    // Get status bar height.
    let area: window.AvoidArea = windowClass.getWindowAvoidArea(type);
    let statusBarHeight = px2vp(area.topRect.height);
    let sliderBarHeight = px2vp(area.bottomRect.height);
    this.statusBarHeight = statusBarHeight;
    this.sliderBarHeight = sliderBarHeight;
    if (statusBarHeight > 0) {
      windowClass.setWindowLayoutFullScreen(true);
    }
  } catch (exception) {
    Logger.error(TAG, 'Failed to set the system bar properties. Cause: ' + JSON.stringify(exception));
  }
});

}

onPageShow() { this.updateStatusBar(this.webCanBack); }

onPageHide() { this.updateStatusBar(false); }

updateStatus() { this.updateStatusBar(this.webCanBack); }

onBackPress() { if (this.webCanBack) { this.controller.backward(); return true; } return false; }

updateStatusBar(isDarkMode?: boolean): void {

}

dialogController?: CustomDialogController

private logout(){ if(!this.dialogController){ this.dialogController = new CustomDialogController({ builder: LogoutConfirmDialog({ cancel: ()=>{ }, controller:this.dialogController }), offset: {dx:0,dy:0}, autoCancel:true, customStyle:true, isModal:true, alignment: DialogAlignment.Center, // 可设置dialog的对齐方式，设定显示在底部或中间等，默认为底部显示 }) } this.dialogController?.open() }

jumpOrderConfirm(detailStr: string): string { this.logout() return “你点击了跳转111” }

build() { Column() { Web({ src: $rawfile(‘product_list.html’), controller: this.controller }) .margin({ top: AppStorage.get(‘statusBarHeight’) }) .layoutWeight(1) .javaScriptProxy(this.bridgeProxy) .onConfirm(() => { promptAction.showToast({ message: $r(‘app.string.toast_msg’), duration: CommonConstants.TOAST_DURATION }); return false; }) .onPageEnd(() => { this.webCanBack = this.controller.accessBackward(); this.webCanForward = this.controller.accessForward(); })

  Row() {
    Button() {
      Image(this.webCanBack ? $r('app.media.ic_back_on') : $r('app.media.ic_back_off'))
        .width($r('app.float.img_size'))
        .aspectRatio(1)
    }
    .width($r('app.float.btn_size'))
    .backgroundColor($r('app.color.common_bg'))
    .aspectRatio(1)
    .enabled(this.webCanBack)
    .onClick(() => {
      this.controller.backward();
    })

    Button() {
      Image(this.webCanForward ? $r('app.media.ic_next_on') : $r('app.media.ic_next_off'))
        .width($r('app.float.img_size'))
        .aspectRatio(1)
    }
    .width($r('app.float.btn_size'))
    .backgroundColor($r('app.color.common_bg'))
    .aspectRatio(1)
    .enabled(this.webCanForward)
    .onClick(() => {
      this.controller.forward();
    })

    Button() {
      Image($r('app.media.ic_home'))
        .width($r('app.float.img_size'))
        .aspectRatio(1)
    }
    .width($r('app.float.btn_size'))
    .backgroundColor($r('app.color.common_bg'))
    .aspectRatio(1)
    .onClick(() => {
      this.controller.backward();
    })
  }
  .justifyContent(FlexAlign.SpaceAround)
  .width(CommonConstants.FULL_PERCENT)
  .height($r('app.float.navi_height'))
}
.width(CommonConstants.FULL_PERCENT)
.height(CommonConstants.FULL_PERCENT)
.backgroundColor($r('app.color.common_bg'))
.padding({ top: this.statusBarHeight - 1, bottom: this.sliderBarHeight })

} } 这种方式能够弹窗dialog。但是 如果我讲bridge的相关东西 抽象到一个类里面就不行了，抽象到下面的类中 然后再indexPage中new JSbridge 并设置 .javaScriptProxy(this.jsBridge.javaScriptProxy) 这样就弹不出来，不知道为什么

import WebView from ‘@ohos.web.webview’; import { ArkTSFunModel, BridgeProxy } from ‘…/…/model/ProductModel’; import { LogoutConfirmDialog } from ‘…/LogoutConfirmDialog’;

export default class JSBridge{ controller: WebView.WebviewController; constructor(controller: WebView.WebviewController) { this.controller = controller; }

arkTSObj: ArkTSFunModel = { jumpOrderConfirm: (detailStr: string) => this.jumpOrderConfirm(detailStr) };

get javaScriptProxy():BridgeProxy{ let proxy:BridgeProxy = { object:this.arkTSObj, name: ‘arkTSFunObj’, methodList: [‘jumpOrderConfirm’], controller: this.controller }; return proxy; }

jumpOrderConfirm(detailStr: string): string { this.logout() return “你点击了跳转111” }

dialogController?: CustomDialogController

private logout(){ if(!this.dialogController){ this.dialogController = new CustomDialogController({ builder: LogoutConfirmDialog({ cancel: ()=>{ }, controller:this.dialogController }), offset: {dx:0,dy:0}, autoCancel:true, customStyle:true, isModal:true, alignment: DialogAlignment.Center, // 可设置dialog的对齐方式，设定显示在底部或中间等，默认为底部显示 }) } this.dialogController?.open() } }