web组件中应用侧调用前端页面函数无法传递参数

在应用侧执行this.controller.runJavaScript(‘htmlTest()’)，可以调用前端页面的htmlTest方法，但是当给htmlTest传递参数时，使用…runJavaScript(‘htmlTest(abc)’)时，就无法调用前端页面的htmlTest方法了。如果runJavaScript无法实现调用前端页面方法并传递参数的话，如何实现此功能？

HarmonyOS

put_get

2024-11-06 11:26:06

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

可以使用注册给前端页面的方式实现向页面传参，参考demo。

// xxx.ets 
import web_webview from '@ohos.web.webview'; 
import business_error from '@ohos.base'; 
 
 
class Dddd{ 
  private ccc : string = '1234' 
  constructor() { 
  } 
 
  cccShow (){ 
    return this.ccc//需要传的参数 
  } 
 
  bbbShow(){ 
    return 'sdsdasda' 
  } 
} 
 
@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController(); 
  private ddd : Dddd = new Dddd() 
  build() { 
    Column() { 
      Button('loadUrl') 
        .onClick(() => { 
          try { 
            // 需要加载的URL是string类型。 
            this.controller.loadUrl('https://www.huawei.com'); 
          } catch (error) { 
            let e: business_error.BusinessError = error as business_error.BusinessError; 
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`); 
          } 
        }) 
      Button('test') 
        .onClick(() => { 
          this.controller.runJavaScript( 
            'myFunction001()', 
            () =>{ 
              console.log('sdsdsdsd') 
            } 
          ); 
        }) 
 
      Button('test001') 
        .onClick(() => { 
          this.controller.registerJavaScriptProxy(this.ddd, "objName", ['cccShow','bbbShow']); //进行注册函数 
          this.controller.refresh(); 
          this.controller.runJavaScript( 
            'myFunction002()', 
            () => { 
              console.log('sdasdadsa') 
            } 
          ) 
        }) 
 
      Web({ src: $rawfile('hello.html'), controller: this.controller }) 
        .javaScriptAccess(true) 
        .onAlert((event) => { 
          if (event) { 
            console.log("event.url:" + event.url) 
            console.log("event.message:" + event.message) 
            AlertDialog.show({ 
              title: 'onAlert', 
              message: event.message, 
              primaryButton: { 
                value: 'cancel', 
                action: () => { 
                  event.result.handleCancel() 
                } 
              }, 
              secondaryButton: { 
                value: 'ok', 
                action: () => { 
                  event.result.handleConfirm() 
                } 
              }, 
              cancel: () => { 
                event.result.handleCancel() 
              } 
            }) 
          } 
          return true 
        }) 
        .onConfirm((event) => { 
          if(event){ 
            AlertDialog.show({ 
              title: '中奖结果', 
              message:'恭喜您抽中:' + event.message, 
              confirm: { 
                value: '确认', 
                action: () => { 
                  event.result.handleConfirm(); 
                } 
              }, 
              cancel: () => { 
                event.result.handleCancel(); 
              } 
            }) 
          } 
 
          return true; 
        }) 
    } 
  } 
}

HTML：

<!--index.html--> 
  <!DOCTYPE html> 
  <html> 
  <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 
  </head> 
  <body> 
  <h1>WebView onAlert Demo</h1> 
  <button onclick="myFunction()">Click here</button> 
  <script> 
  function myFunction() { 
    alert("Hello World"); 
  } 
 
 
function myFunction001() { 
  alert("Hello World001"); 
} 
 
function myFunction003(sss) { 
  alert("Hello World003" + sss); 
} 
 
function myFunction002() { 
  let str = objName.cccShow() + objName.bbbShow();//传过来的参数 
  myFunction003(str)//放入参数调用函数 
} 
function myFunction004() { 
  let str = objName.bbbShow(); 
  myFunction003(str) 
} 
</script> 
  </body> 
  </html>

注册函数可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-webview-V5#registerjavascriptproxy

2024-11-06 17:40:09

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

发布

51CTO

51CTO博客

51CTO学堂

web组件中应用侧调用前端页面函数无法传递参数

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