HarmonyOS鸿蒙Next中ArkTS H5跳转到手机端拨号页面

HarmonyOS鸿蒙Next中ArkTS H5跳转到手机端拨号页面

// xxx.ets
import web_webview from '@ohos.web.webview';
import { router } from '@kit.ArkUI';
import { call } from '@kit.TelephonyKit';
import { BusinessError } from '@kit.BasicServicesKit';

class testClass {
  constructor() {}

  test(): string {
    return 'ArkTS Hello World!';
  }
}

@Entry
@Component
struct Index {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  // 声明需要注册的对象
  @State testObj: testClass = new testClass();

  build() {
    Column() {
      // web组件加载本地index.html页面
      Web({ src: '自己的网页', controller: this.webviewController }) // 将对象注入到web端
        .onLoadIntercept((event) => {
          if (event) {
            let url: string = event.data.getRequestUrl();
            // 判断链接是否为拨号链接
            let aaa = url.indexOf('tel://')
            if (url.indexOf('tel:') === 0) {
              // 跳转拨号界面
              call.makeCall(url.substring(4), (err) => {
                if (!err) {
                  console.info('make call succeeded.');
                } else {
                  console.info('make call fail, err is:' + JSON.stringify(err));
                }
              });
              return true;
            }
          }
          return false;
        })
        .onControllerAttached(() => {
          //设置自定义UserAgent
          if (true) {
            this.webviewController.setCustomUserAgent("Mozilla/5.0 (Phone; Android; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile")
          }
        })
        .domStorageAccess(true) //开启文档对象模型存储接口
      /*
        .databaseAccess(true)// 是否开启数据库存储API权限
        .mixedMode(MixedMode.All)// 允许加载HTTP和HTTPS混合内容
        .onRefreshAccessedHistory(() => {
          let history = this.webviewController.getBackForwardEntries()
          //this.historyCurrIndex = history.currentIndex
        })*/
    }
  }
}

更多关于HarmonyOS鸿蒙Next中ArkTS H5跳转到手机端拨号页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，使用ArkTS实现H5跳转到手机拨号页面可通过调用系统能力完成。具体代码如下：

import webview from '@ohos.web.webview';
import abilityAccessCtrl from '@ohos.abilityAccessCtrl';

let abilityContext = ... // 获取当前Ability的Context

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({
        src: "your_h5_page_url",
        controller: this.controller
      })
      .onInterceptRequest((event) => {
        if (event.request.url.startsWith('tel:')) {
          let atManager = abilityAccessCtrl.createAtManager();
          atManager.requestPermissionsFromUser(abilityContext, ['ohos.permission.PLACE_CALL'])
            .then(() => {
              // 授权后跳转拨号
              let uri = event.request.url.replace('tel:', 'dial:');
              let want = {
                uri: uri,
                action: 'ohos.want.action.dial'
              };
              abilityContext.startAbility(want);
            });
          return true; // 拦截请求
        }
        return false;
      })
    }
  }
}

这段代码会拦截H5中的tel:协议请求，转为鸿蒙系统的拨号功能调用。需要先在config.json中声明ohos.permission.PLACE_CALL权限。

更多关于HarmonyOS鸿蒙Next中ArkTS H5跳转到手机端拨号页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中实现H5跳转到手机拨号页面，可以使用TelephonyKit的call.makeCall()接口。从代码来看，您已经正确实现了这个功能，但有几个优化点：

  1. 代码中判断了tel://和tel:两种格式，建议统一使用tel:前缀，这是标准格式。

  2. 建议在调用makeCall前增加电话号码有效性校验，例如：

let phoneNumber = url.substring(4);
if(!/^[0-9]+$/.test(phoneNumber)) {
  console.error('Invalid phone number');
  return false;
}

  1. 当前代码在拦截器中处理拨号请求，这种方式是可行的。也可以考虑使用Web组件的javascriptProxy能力，通过注入JS对象的方式让H5直接调用ArkTS方法。

  2. 确保在config.json中声明了所需的权限：

"reqPermissions": [
  {
    "name": "ohos.permission.PLACE_CALL"
  }
]

您的实现方案整体正确，通过拦截URL请求并调用makeCall接口实现了拨号功能。

回到顶部