前端页面调用应用侧函数

2024-02-16 13:39 更新

开发者使用Web组件将应用侧代码注册到前端页面中,注册完成之后,前端页面中使用注册的对象名称就可以调用应用侧的函数,实现在前端页面中调用应用侧方法。

注册应用侧代码有两种方式,一种在Web组件初始化使用调用,使用javaScriptProxy()接口。另外一种在Web组件初始化完成后调用,使用registerJavaScriptProxy()接口。

在下面的示例中,将test()方法注册在前端页面中, 该函数可以在前端页面触发运行。

  • javaScriptProxy()接口使用示例如下。
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview';
    3. class testClass {
    4. constructor() {
    5. }
    6. test(): string {
    7. return 'ArkTS Hello World!';
    8. }
    9. }
    10. @Entry
    11. @Component
    12. struct WebComponent {
    13. webviewController: web_webview.WebviewController = new web_webview.WebviewController();
    14. // 声明需要注册的对象
    15. @State testObj: testClass = new testClass();
    16. build() {
    17. Column() {
    18. // web组件加载本地index.html页面
    19. Web({ src: $rawfile('index.html'), controller: this.webviewController})
    20. // 将对象注入到web端
    21. .javaScriptProxy({
    22. object: this.testObj,
    23. name: "testObjName",
    24. methodList: ["test"],
    25. controller: this.webviewController
    26. })
    27. }
    28. }
    29. }
  • 应用侧使用registerJavaScriptProxy()接口注册。
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview';
    3. import business_error from '@ohos.base';
    4. class testClass {
    5. constructor() {
    6. }
    7. test(): string {
    8. return "ArkUI Web Component";
    9. }
    10. toString(): void {
    11. console.log('Web Component toString');
    12. }
    13. }
    14. @Entry
    15. @Component
    16. struct Index {
    17. webviewController: web_webview.WebviewController = new web_webview.WebviewController();
    18. @State testObj: testClass = new testClass();
    19. build() {
    20. Column() {
    21. Button('refresh')
    22. .onClick(() => {
    23. try {
    24. this.webviewController.refresh();
    25. } catch (error) {
    26. let e: business_error.BusinessError = error as business_error.BusinessError;
    27. console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
    28. }
    29. })
    30. Button('Register JavaScript To Window')
    31. .onClick(() => {
    32. try {
    33. this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
    34. } catch (error) {
    35. let e: business_error.BusinessError = error as business_error.BusinessError;
    36. console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
    37. }
    38. })
    39. Web({ src: $rawfile('index.html'), controller: this.webviewController })
    40. }
    41. }
    42. }
    说明

    使用registerJavaScriptProxy()接口注册方法时,注册后需调用refresh()接口生效。

  • index.html前端页面触发应用侧代码。
    1. <!-- index.html -->
    2. <!DOCTYPE html>
    3. <html>
    4. <body>
    5. <button type="button" onclick="callArkTS()">Click Me!</button>
    6. <p id="demo"></p>
    7. <script>
    8. function callArkTS() {
    9. let str = testObjName.test();
    10. document.getElementById("demo").innerHTML = str;
    11. console.info('ArkTS Hello World! :' + str);
    12. }
    13. </script>
    14. </body>
    15. </html>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号