HarmonyOS JsBridge分层设计思想

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

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 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.

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 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.