uniapp 如何实现拨打电话功能

在uniapp中如何实现点击按钮拨打电话的功能？需要调用哪个API，是否需要特殊权限配置？在iOS和Android平台上是否有兼容性差异？求具体代码示例和实现步骤。

2 回复

在uni-app中，使用uni.makePhoneCall方法即可拨打电话。示例代码：

uni.makePhoneCall({
  phoneNumber: '10086'
})

传入手机号码参数即可调用系统拨号界面。


在 UniApp 中，可以通过调用 uni.makePhoneCall() API 实现拨打电话功能。这个 API 会唤起系统拨号界面，并自动填入指定的电话号码，用户确认后即可拨出。

实现步骤：

  1. 引入 API：无需额外配置，直接使用 UniApp 内置 API。
  2. 调用方法：传入包含 phoneNumber 参数的对象。
  3. 权限处理：在部分平台（如 Android）可能需要配置拨号权限。

示例代码：

// 在方法中调用
callPhone(phoneNumber) {
  uni.makePhoneCall({
    phoneNumber: phoneNumber // 要拨打的电话号码
  });
}

// 在模板中绑定事件
<button @tap="callPhone('10086')">拨打 10086</button>

注意事项：

  • 权限配置（仅 Android）：
    • 在 manifest.json 的 "app-plus" -> "distribute" -> "android" 中添加权限：
      "permissions": [
  "android.permission.CALL_PHONE"
]
    • 实际测试中，部分 Android 版本可能无需显式配置，但建议添加以避免权限问题。
  • 用户体验：调用后会跳转系统拨号界面，需用户手动确认拨打，符合平台规范。
  • 兼容性：全端支持（iOS/Android/微信小程序等）。

完整示例：

<template>
  <view>
    <button @tap="callCustomerService">联系客服</button>
  </view>
</template>

<script>
export default {
  methods: {
    callCustomerService() {
      uni.makePhoneCall({
        phoneNumber: '400-123-4567'
      });
    }
  }
}
</script>

通过以上代码即可快速实现拨打电话功能。

回到顶部