HarmonyOS JsBridge分层设计思想

this.webviewController.runJavaScript('arkTsCallJs("arkTs调用前端函数")');

import web_webview from '@ohos.web.webview'; 
import business_error from '@ohos.base'; 
@Entry 
@Component 
struct WebJsPages { 
  webviewController: web_webview.WebviewController = new web_webview.WebviewController(); 
  //创建传入对象 
  @State arkObj: arkTSClass = new arkTSClass(); 
  @State regProObj: registerProxyClass = new registerProxyClass(); 
 
  aboutToAppear() { 
    // 配置Web开启调试模式 
    web_webview.WebviewController.setWebDebuggingAccess(true); 
  } 
 
  build() { 
    Column() { 
      Button('runJavaScript') 
        .onClick(() => { 
          this.webviewController.runJavaScript('arkTsCallJs("arkTs调用前端函数")'); 
        }) 
      Button('registerJavaScriptProxy') 
        .onClick(() => { 
          try { 
            this.webviewController.registerJavaScriptProxy(this.regProObj, "regObj", ["regTest", "toString"]); 
          } catch (error) { 
            let e: business_error.BusinessError = error as business_error.BusinessError; 
            console.log(`ErrorCode: ${e.code},  Message: ${e.message}`); 
          } 
        }) 
      //看业务需要，Web组件初始化调用，使用javaScriptProxy()接口 
      Web({ src: $rawfile('jsBridge.html'), controller: this.webviewController }) 
        .javaScriptProxy({ 
          object: this.arkObj, 
          name: "arkObj", 
          methodList: ["test"], 
          controller: this.webviewController 
        }) 
    } 
  } 
} 
 
class arkTSClass { 
  constructor() { 
 
  } 
  test(): string { 
    return 'js call ArkTS success!'; 
  } 
} 
 
class registerProxyClass { 
  constructor() { 
 
  } 
  regTest(): string{ 
    console.log("regTest==================") 
    return 'ArkTS  Use registerJavaScriptProxy Success!'; 
  } 
 
  toString(param:String): string { 
    console.log('reg proxy toString' + param); 
    return 'reg proxy toString' + param 
  } 
}

import web_webview from '@ohos.web.webview'; 
import business_error from '@ohos.base'; 
@Entry 
@Component 
struct RegProxyPage { 
  webviewController: web_webview.WebviewController = new web_webview.WebviewController(); 
  //创建传入对象 
  @State regProObj: registerProxyClass = new registerProxyClass(); 
 
  aboutToAppear() { 
    // 配置Web开启调试模式 
    // web_webview.WebviewController.setWebDebuggingAccess(true); 
  } 
 
  build() { 
    Column() { 
      //刷新web 这样web那边才能获得注入对象 
      Button('refresh') 
        .onClick(()=>{ 
          try{ 
            this.webviewController.refresh(); 
          }catch(error){ 
            let e:business_error.BusinessError = error as business_error.BusinessError; 
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`) 
          } 
        }) 
      //1.注入对象 
      Button('registerJavaScriptProxy') 
        .onClick(() => { 
          try { 
            this.webviewController.registerJavaScriptProxy(this.regProObj, "regObj", ["regTest", "toString"]); 
          } catch (error) { 
            let e: business_error.BusinessError = error as business_error.BusinessError; 
            console.log(`ErrorCode: ${e.code},  Message: ${e.message}`); 
          } 
        }) 
      Web({ src: $rawfile('jsBridge.html'), controller: this.webviewController }) 
    } 
  } 
} 
 
class registerProxyClass { 
  constructor() { 
 
  } 
  regTest(): string{ 
    console.log("regTest==================") 
    return 'ArkTS  Use registerJavaScriptProxy Success!'; 
  } 
 
  toString(param:String): string { 
    console.log('regTest proxy toString' + param); 
    return 'regTest proxy toString' + param 
  } 
}