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}`); 
          } 
        }) 
    } 
  } 
}
HarmonyOS
2024-11-06 10:41:22
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

​相关链接:​https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-in-app-frontend-page-function-invoking-V5

官网上只是提供如何实现,详细代码如下:​

<!-- 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}`); 
          } 
        }) 
    } 
  } 
}

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

分享
微博
QQ
微信
回复
2024-11-06 16:03:56
相关问题
HarmonyOS js调用webview方法
344浏览 • 1回复 待解决
如何支持HarmonyOS调用JS方法及传
129浏览 • 1回复 待解决
JSBind 如何调用 JS 方法 callback
1599浏览 • 1回复 待解决
native如何调用静态方法
1033浏览 • 1回复 待解决
arkTS是否支持将类作为
1603浏览 • 1回复 待解决
在Native调用ArkTS全局普通方法
826浏览 • 1回复 待解决
如何在openharmony执行js脚本
2530浏览 • 0回复 待解决
HarmonyOS通过方法调用loading吗?
306浏览 • 0回复 待解决
c++可以直接调用tsstatic方法吗?
1939浏览 • 1回复 待解决
webviewoninterceptrequest调用异步操作
1944浏览 • 1回复 待解决
如何在ets引入zlib.js
2481浏览 • 1回复 待解决