HarmonyOS 如何在WebView中调用JS侧有入参的方法？

我看到示例代码通过this.controller.runJavaScript(‘test()’)方式调用JS侧的test方法，但是如果JS侧声明的test方法是需要参数的呢，如何调用并且传参啊。

// xxx.ets 
import web_webview from '@ohos.web.webview'; 
import business_error from '@ohos.base'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController(); 
 
  build() { 
    Column() { 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
        .javaScriptAccess(true) 
        .onPageEnd(e => { 
          try { 
            this.controller.runJavaScript('test()') 
              .then((result) => { 
                console.log('result: ' + result); 
              }) 
              .catch((error: business_error.BusinessError) => { 
                console.error("error: " + error); 
              }) 
            if (e) { 
              console.info('url: ', e.url); 
            } 
          } catch (error) { 
            let e: business_error.BusinessError = error as business_error.BusinessError; 
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`); 
          } 
        }) 
    } 
  } 
}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.

HarmonyOS

FengTianYa

2024-11-06 10:41:22

浏览

回答 1

按赞同

按时间

zbw_apple

官网上只是提供如何实现，详细代码如下：

<!-- index.html --> 
  <!DOCTYPE html> 
  <html> 
  <meta charset="utf-8"> 
  <body> 
  Hello world! 
  </body> 
  <script type="text/javascript"> 
  function test(param) { 
    console.log('参数：'+ param) 
    return param 
  } 
  </script> 
  </html> 
 
xxx.ets 
import web_webview from '@ohos.web.webview'; 
import business_error from '@ohos.base'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController(); 
  @State webResult: string = '' 
  aboutToAppear() { 
    // 配置Web开启调试模式 
    web_webview.WebviewController.setWebDebuggingAccess(true); 
  } 
  build() { 
    Column() { 
      Text(this.webResult).fontSize(20) 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
        .javaScriptAccess(true) 
        .onPageEnd(e => { 
          let ob:string =JSON.stringify( 
            'messageTypecallbackplugin dName' 
          ) 
          let result:string=ob 
          try { 
            this.controller.runJavaScript( 
 
              ` test(${result})`, 
              (error, result) => { 
                if (error) { 
                  let e: business_error.BusinessError = error as business_error.BusinessError; 
                  console.error(`run JavaScript error, ErrorCode: ${e.code},  Message: ${e.message}`); 
                  return; 
                } 
                if (result) { 
                  this.webResult = result 
                  console.info(`The test() return value is: ${result}`) 
                } 
              }); 
            if (e) { 
              console.info('url: ', e.url); 
            } 
          } catch (error) { 
            let e: business_error.BusinessError = error as business_error.BusinessError; 
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`); 
          } 
        }) 
    } 
  } 
}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.

可以在h5页面的JS方法中，传入多个参数，返回一个数组或者JSON文件就好了，在应用侧页面里面把参数都写上去，然后解析出来就可以了。

2024-11-06 16:03:56

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 如何在WebView中调用JS侧有入参的方法？

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