HarmonyOS鸿蒙Next中Web组件如何通过H5调用系统拨打电话

HarmonyOS鸿蒙Next中Web组件如何通过H5调用系统拨打电话

3 回复

点击拨打电话按钮后，会触发页面加载。可以通过监听Web组件的onLoadIntercept事件来识别拨打电话按钮的点击事件，然后再通过call.makeCall方法拉起拨号界面并指定号码。 参考代码：

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { call } from '@kit.TelephonyKit';

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile('call.html'), controller: this.webviewController })
        .onLoadIntercept((event) => {
          if (event) {
            let url: string = event.data.getRequestUrl();
            // 判断链接是否为拨号链接
            if (url.startsWith('tel:')) {
              // 跳转拨号界面
              call.makeCall(url.match(/\d+/)[0], (err) => {
                if (!err) {
                  console.info('make call succeeded.');
                } else {
                  console.error(`make call fail, err is: ${JSON.stringify(err)}`);
                }
              });
              return true;
            }
          }
          return false;
        })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中Web组件如何通过H5调用系统拨打电话的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，Web组件可通过H5的<a href="tel:电话号码">标签调用系统拨号功能。需在module.json5配置文件中声明ohos.permission.PLACE_CALL权限。Web组件会自动识别tel协议链接，用户点击后将触发系统拨号界面。此功能依赖系统WebView组件的协议处理能力，无需额外桥接代码。权限需在应用安装时由用户授权，否则调用将失败。

在HarmonyOS Next中，可以通过Web组件的loadUrl()方法结合tel:协议实现H5页面调用系统拨号功能。具体实现步骤如下：

  1. 在H5页面中设置电话链接：

    <a href="tel:10086">拨打10086</a>

  2. 在ArkTS中配置Web组件的url访问拦截：

    import web_webview from '[@ohos](/user/ohos).web.webview'

[@Entry](/user/Entry)
[@Component](/user/Component)
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  
  aboutToAppear() {
    // 设置url加载拦截
    this.controller.on('urlLoadIntercept', (event) => {
      if (event?.data?.url.startsWith('tel:')) {
        // 使用系统能力拨打电话
        let phoneNumber = event.data.url.replace('tel:', '')
        // 调用系统电话功能（需申请ohos.permission.PLACE_CALL权限）
        call.makeCall(phoneNumber)
        return true // 拦截url加载
      }
      return false
    })
  }

  build() {
    Column() {
      Web({
        src: $rawfile('index.html'),
        controller: this.controller
      })
    }
  }
}

  3. 在module.json5中声明权限：

    {
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.PLACE_CALL"
      }
    ]
  }
}

注意事项：

  • 需要确保H5页面中的电话链接使用正确的tel:协议格式
  • 调用系统电话功能前需要动态申请CALL_PHONE权限
  • 实际电话号码应从url参数中安全提取并验证格式
  • 此实现方式同时适用于HarmonyOS Next的Stage模型和FA模型
回到顶部