HarmonyOS 鸿蒙Next中前端页面调用应用侧方法

HarmonyOS 鸿蒙Next中前端页面调用应用侧方法 想写一个web方法注入实现打电话，h5侧js调用的代码是这样的

var t = new window.JSBridge.default;

t.dial({

number: e

})

跟普通的不一样，请问各位大佬应该侧应该怎么写呢

6 回复

【背景知识】

【解决方案】

  1. h5页面如果使用了<a href="">链接，需要通过Web组件的onLoadIntercept回调拦截“tel://”链接跳转，调用ArkTS API拉起对应应用。
  2. 如果需要通过点击按钮或者其他方式调用应用侧的方法，需要使用javaScriptProxy()接口或者registerJavaScriptProxy()接口。

实现代码参考：

import { call } from '@kit.TelephonyKit';
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

class TestClass {
  constructor() {
  }

  test() {
    call.makeCall('11111111111', (err) => {
      if (!err) {
        console.info('make call succeeded.');
      } else {
        console.error(`make call fail, err is: ${err}`);
      }
    });
  }
}

@Entry
@Component
struct WebTellCall {
  webviewController: webview.WebviewController = new webview.WebviewController();
  @State testObj: TestClass = new TestClass();

  build() {
    Column() {
      Button('deleteJavaScriptRegister')
        .onClick(() => {
          try {
            this.webviewController.deleteJavaScriptRegister("testObjName");
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: $rawfile('telCall.html'), controller: this.webviewController })
        .onLoadIntercept((event) => {
          if (event) {
            let url: string = event.data.getRequestUrl();
            // 判断链接是否为拨号链接
            if (url.indexOf('tel://') === 0) {
              // 跳转拨号界面
              call.makeCall(url.substring(6), (err) => {
                if (!err) {
                  console.info('make call succeeded.');
                } else {
                  console.error(`make call fail, err is: ${err}`);
                }
              });
              return true;
            }
          }
          return false;
        })
        .geolocationAccess(false)
        .fileAccess(false)
        // 注册方法
        .javaScriptProxy({
          object: this.testObj,
          name: "testObjName",
          methodList: ["test"],
          controller: this.webviewController,
        })
    }
  }
}

<!-- Start solution1 -->
<!DOCTYPE html>
<html>
<body>
<div>
    <a href="tel://11111111111" style="font-size: 40px;">拨打电话</a>
    <button onclick="callArkTS()" style="font-size: 40px;">h5拨打电话</button>
</div>
<script>
    function callArkTS() {
        let str = testObjName.test();
    }
</script>
</body>
</html>
<!-- End solution1 -->

更多关于HarmonyOS 鸿蒙Next中前端页面调用应用侧方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


var t = new window.JSBridge.default;
t.dial();

请问你们前端是使用Cordova实现的吗？

h5吗，这个不是很清楚。，

在HarmonyOS Next中，前端页面通过Ability框架调用应用侧方法。使用ArkTS语言开发，通过Ability的UIAbility和ParticleAbility组件实现交互。前端使用@Entry装饰的组件，通过FeatureAbility.callAbility()方法调用指定Ability，传递参数并处理返回结果。应用侧在目标Ability的onAbilityResult()中接收请求并执行逻辑，使用ParticleAbility返回数据。整个过程基于鸿蒙分布式能力，支持跨设备调用。

在HarmonyOS Next中，可以通过Web组件的前端页面注入JavaScript方法来实现H5调用应用侧功能。以下是实现步骤：

  1. 应用侧注入JS对象： 使用WebView的javaScriptProxy方法注入一个名为JSBridge的对象，并定义dial方法：

    webView.javaScriptProxy({
  object: {
    name: "JSBridge",
    method: {
      dial: (number) => {
        // 调用系统电话功能
        call.makeCall(number);
      }
    }
  }
});

  2. H5侧调用方式： 在H5页面中，直接通过JSBridge.dial调用：

    JSBridge.dial("123456789");

  3. 注意事项：

    • 确保Web组件已正确加载并注入对象。
    • 参数传递需符合鸿蒙的序列化要求（如基本类型或可序列化对象）。
    • 需在module.json5中声明makeCall权限。

这种方式避免了实例化new的操作，直接通过注入的全局对象调用方法。

回到顶部