HarmonyOS 在h5前端侧调用应用侧方法

如果要在前端侧用

quick.page.close({“para1”})

这种方式调用应用测的方法

应用侧应该如何来写

HarmonyOS

Heiang

2024-12-23 15:25:02

浏览

回答 1

按赞同

按时间

fox280

请参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#registerjavascriptproxy

应用侧代码：

import web_view from '@ohos.web.webview'

class testClass{
  constructor() {
  }
  //H5侧调用的方法
  test():string{
    return '1111111111111111111'
  }
  toString():void{
    console.log('222222222')
  }
}

@Entry
@Component
struct CallWeb {
  webviewController:web_view.WebviewController=new web_view.WebviewController();
  @State testObj:testClass=new testClass()

  build() {
    Column() {
      Button('将对象注入web').onClick(()=>{
        try{
          this.webviewController.registerJavaScriptProxy(
            this.testObj,
            'testObjName',
            ['test','toString']//H5侧可使用的方法
          )
        } catch (e) {
        }
      })
      Button('refresh').onClick(()=>{
        try{
          this.webviewController.refresh()
        } catch (e) {
        }
      })
      Web({src:$rawfile('webViewHtml/CallArkTs01.html'),controller:this.webviewController})
    }
  }
}
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.

H5侧代码：

<!doctype html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  </head>
  <body>
  <button type="button" onclick="callArkTs()">调用应用侧函数</button>
  <p id="webPage">Dose Web Call ArkTs Success?</p>
  <p id="demo"></p>

  </body>
  <script>
  function callArkTs(){
    let str = testObjName.test(); //调用HarmonyOS侧test方法
    document.getElementById('webPage').innerHTML='callweb1111'
    document.getElementById('demo').innerHTML=str
  }
  </script>
  </html>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

2024-12-23 18:51:34

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 在h5前端侧调用应用侧方法

订阅鸿蒙技术特刊，精选内容抢先看