首页 h5开发 正文内容

uni-app 开发 H5 如何实现直接拨打电话的功能

2023年08月25日 , , 648

两种方法实现在 H5 里调用手机拨打电话,用户体验都不错。

拨打电话开发需求

在开发一些轻量的手机端 H5 营销落地页时,会遇到需求:点击客服电话图标直接调用手机拔打电话功能。有些开发为了偷懒,直接显示号码,让用户手动去拨打。这种体验是非常差的,而且对落地页的转化率影响很大,估计你们公司的产品大聪明也不会同意这么干。

uni-app 实现拨打电话
uni-app 实现拨打电话

H5 常规拨打电话的方法

尽管是用 uni-app 来开发项目,但只要是发行为 H5,其实跟常规的 web 开发没什么区别,最简单的办法就是使用 <a> 标签来实现,代码如下:

<a href="tel:12306">拨打电话</a>

原理很简单,网页上我们经常用的 <a> 标签,除了可以用来打开网页,还有这些作用:

  • 直接调用邮件客户端发送邮件,语法为 href="mailto:abc@xxx.com"
  • 调用手机拨号键盘打电话,语法为 href="tel:12306"
  • 跳转到本页面某个锚点位置,语法为 href="#main-content"
  • 甚至还可以直接执行 js 代码,语法是 href="javascript:alert('你好')"

所以这个方法可以实现拨打电话,无论是在安卓还是 iOS 手机上访问 H5,都没问题,这也是我一直以来使用的方法。不过这个方法必须要用 <a> 标签,需要写 CSS 样式覆盖默认的样式,让它看起来像一个按钮。

使用 uni-app 内置方法

既然项目是用 uni-app 开发的,那也可以使用官方封装的方法来调用手机拨打电话,好处就是直接调用 javascript 方法,任意的标签元素都可以使用,比如可以直接使用 <button>,实现代码如下:

<template>
  <button @click="callByNumber('12306')">拨打客服电话</button>
</template>
<script>
  export default {
    methods: {
      callByNumber(phoneNumber) {
        // 注意 phoneNumber 参数是字符串类型,不是数字
        // 调用 uni api
        uni.makePhoneCall({
	  phoneNumber,
	  success: (res) => {}, // 成功回调
	  fail: (res) => {} // 失败回调
	});
      }
    }
  }
</script>

这两种方法都能实现手机端 H5 拨打电话功能uni.makePhoneCall 应用更广泛,作为一个跨端通用的 api,在 APP微信小程序上也照样能用。