751496032 / DSBridge-HarmonyOS

鸿蒙原生ArkTS与JavaScript的交互桥接库
113 stars 19 forks source link

通过JavaScriptInterface声明的方法应该如何同步所在页面组件状态 #17

Closed yaoliyc closed 4 months ago

yaoliyc commented 4 months ago

通过JavaScriptInterface声明的方法应该如何同步所在页面组件状态 如果通过javaScriptProxy或registerJavaScriptProxy来注册方法,示例:

import web_webview from '@ohos.web.webview';

interface ArkTSFunModel {
  jumpOrderConfirm: (detailStr: string) => void;
}

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  hybridehChooseOptionDialog: CustomDialogController = new CustomDialogController({
    builder: HybridehChooseOptionDialog({
      onFirst:()=>{  },
      onSecond:()=>{
      }
    }),
    alignment: DialogAlignment.Bottom
  })
  // 声明需要注册的对象
  arkTSObj: ArkTSFunModel = {
    jumpOrderConfirm: (detailStr: string) => this.jumpOrderConfirm(detailStr)
  };

  jumpOrderConfirm(detailStr: string): void {
//
  }

  build() {
    Column() {
      // web组件加载本地index.html页面
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
        // 将对象注入到web端
       .javaScriptProxy({
          object: this.arkTSObj,
          name: 'arkTSFunObj',
          methodList: ['jumpOrderConfirm'],
          controller: this.controller
        })
    }
  }
}

这样arkTSObj中实现的所有方法可以访问WebComponent 下的所有属性方法。 通过JavaScriptInterface声明的方法有什么好的办法做到同样的事呢? 脱离Component直接声明CustomDialogController并调用方法open试了下好像不行,没反应。

751496032 commented 4 months ago

通过JavaScriptInterface声明的方法应该如何同步所在页面组件状态 如果通过javaScriptProxy或registerJavaScriptProxy来注册方法,示例:

import web_webview from '@ohos.web.webview';

interface ArkTSFunModel {
  jumpOrderConfirm: (detailStr: string) => void;
}

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  hybridehChooseOptionDialog: CustomDialogController = new CustomDialogController({
    builder: HybridehChooseOptionDialog({
      onFirst:()=>{  },
      onSecond:()=>{
      }
    }),
    alignment: DialogAlignment.Bottom
  })
  // 声明需要注册的对象
  arkTSObj: ArkTSFunModel = {
    jumpOrderConfirm: (detailStr: string) => this.jumpOrderConfirm(detailStr)
  };

  jumpOrderConfirm(detailStr: string): void {
//
  }

  build() {
    Column() {
      // web组件加载本地index.html页面
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
        // 将对象注入到web端
       .javaScriptProxy({
          object: this.arkTSObj,
          name: 'arkTSFunObj',
          methodList: ['jumpOrderConfirm'],
          controller: this.controller
        })
    }
  }
}

这样arkTSObj中实现的所有方法可以访问WebComponent 下的所有属性方法。 通过JavaScriptInterface声明的方法有什么好的办法做到同样的事呢? 脱离Component直接声明CustomDialogController并调用方法open试了下好像不行,没反应。

可以CustomDialogController对象传入到JsBridge中作为成员属性,或者在Jsbridge中暴露一个监听函数,然后在组件中设置监听回调。

751496032 commented 4 months ago

通过JavaScriptInterface声明的方法应该如何同步所在页面组件状态 如果通过javaScriptProxy或registerJavaScriptProxy来注册方法,示例:

import web_webview from '@ohos.web.webview';

interface ArkTSFunModel {
  jumpOrderConfirm: (detailStr: string) => void;
}

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  hybridehChooseOptionDialog: CustomDialogController = new CustomDialogController({
    builder: HybridehChooseOptionDialog({
      onFirst:()=>{  },
      onSecond:()=>{
      }
    }),
    alignment: DialogAlignment.Bottom
  })
  // 声明需要注册的对象
  arkTSObj: ArkTSFunModel = {
    jumpOrderConfirm: (detailStr: string) => this.jumpOrderConfirm(detailStr)
  };

  jumpOrderConfirm(detailStr: string): void {
//
  }

  build() {
    Column() {
      // web组件加载本地index.html页面
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
        // 将对象注入到web端
       .javaScriptProxy({
          object: this.arkTSObj,
          name: 'arkTSFunObj',
          methodList: ['jumpOrderConfirm'],
          controller: this.controller
        })
    }
  }
}

这样arkTSObj中实现的所有方法可以访问WebComponent 下的所有属性方法。 通过JavaScriptInterface声明的方法有什么好的办法做到同样的事呢? 脱离Component直接声明CustomDialogController并调用方法open试了下好像不行,没反应。

已更新案例