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

拨打电话开发需求

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

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 和微信小程序上也照样能用。