鸿蒙原生应用元服务开发-WEB跨应用跳转

李洋-蛟龙腾飞公司2024-05-29 13:51

Web组件可以实现点击前端页面超链接跳转到其他应用。

在下面的示例中，点击call.html前端页面中的超连接，跳转到电话应用的拨号界面。

应用侧代码。

复制代码

// xxx.ets
import web_webview from '@ohos.web.webview';
import call from '@ohos.telephony.call';

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

  build() {
    Column() {
      Web({ src: $rawfile('xxx.html'), controller: this.webviewController})
        .onUrlLoadIntercept((event) => {
          let url: string = event.data as string;
          // 判断链接是否为拨号链接
          if (url.indexOf('tel://') === 0) {
            // 跳转拨号界面
            call.makeCall(url.substring(6), (err) => {
              if (!err) {
                console.info('make call succeeded.');
              } else {
                console.info('make call fail, err is:' + JSON.stringify(err));
              }
            });
            return true;
          }
          return false;
        })
    }
  }
}

前端页面call.html代码。

复制代码

<!-- call.html -->
<!DOCTYPE html>
<html>
<body>
  <div>
    <a href="tel://xxx xxxx xxx">拨打电话</a>
  </div>
</body>
</html>

本文参考引用HarmonyOS官方开发文档，基于API9。