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

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

HarmonyOS
2024-11-06 11:26:06
浏览
收藏 0
回答 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

分享
微博
QQ
微信
回复
2024-11-06 17:40:09
相关问题
弹窗组件调用组件函数传递
1036浏览 • 1回复 待解决
Web组件访问本地资源并传递参数
856浏览 • 1回复 待解决
TS如何批量传递函数到native
988浏览 • 1回复 待解决
Native调用ArkTS函数
966浏览 • 1回复 待解决
HarmonyOS ArkTS如何调用web前端的js库
104浏览 • 1回复 待解决
HarmonyOS web组件onalert函数咨询
205浏览 • 1回复 待解决
HarmonyOS WebView组件前端页面调试
258浏览 • 1回复 待解决
HarmonyOS 应用访问前端页面方法
54浏览 • 1回复 待解决
组件给子组件传递函数
292浏览 • 1回复 待解决
返回页面router.back如何传递参数
999浏览 • 2回复 待解决