uniapp直接拨打电话

一、调用系统拨打电话

uniapp可以通过调用系统的拨打电话功能来实现直接拨打电话的功能。要实现这个功能，需要使用uniapp的API uni.makePhoneCall()。

uni.makePhoneCall({
  phoneNumber: '10086',
  success: function() {
    console.log('拨打电话成功！');
  },
  fail: function() {
    console.log('拨打电话失败！');
  }
});

其中，phoneNumber表示要拨打的电话号码，success表示拨打电话成功的回调函数，fail表示拨打电话失败的回调函数。

二、自定义拨打电话界面

除了调用系统的拨打电话功能，uniapp还可以自定义拨打电话界面，给用户提供更好的用户体验。

要实现自定义拨打电话界面，需要使用uniapp的API uni.createInnerAudioContext()和uni.showModal()。

首先，创建一个播放音乐的对象，并设置要播放的音乐文件：

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = '/static/phone.mp3';

这里使用了一个名为phone.mp3的音乐文件。

接下来，当用户点击拨打电话按钮时，触发拨打电话的事件：

onCallPhone: function() {
  const that = this;
  uni.showModal({
    title: '拨打电话',
    content: '确认拨打电话吗？',
    success: function(res) {
      if (res.confirm) {
        //播放拨打电话的音乐
        innerAudioContext.play();
        //拨打电话
        uni.makePhoneCall({
          phoneNumber: '10086',
          success: function() {
            console.log('拨打电话成功！');
          },
          fail: function() {
            console.log('拨打电话失败！');
          }
        });
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
}

在这个事件中，首先弹出一个确认框，让用户确认是否要拨打电话。如果用户确认要拨打电话，则播放拨打电话的音乐，并调用uni.makePhoneCall()函数进行拨打电话操作。如果用户取消拨打电话，则不进行任何操作。

三、优化用户体验

虽然自定义拨打电话界面可以给用户带来更好的用户体验，但是如果每次拨打电话都弹出确认框，会影响用户体验。因此，我们需要对自定义拨打电话界面进行优化，让用户体验更加流畅。

要优化自定义拨打电话界面，可以使用uniapp的API uni.showToast()和uni.hideToast()。

当用户点击拨打电话按钮时，首先调用uni.showToast()函数显示一个加载中的提示框：

onCallPhone: function() {
  const that = this;
  uni.showToast({
    title: '正在拨打电话...',
    icon: 'loading',
    duration: 10000
  });
  setTimeout(function() {
    uni.hideToast();
    that.doCallPhone();
  }, 2000);
}

这里设置了一个10秒的显示时间，如果2秒内拨打电话成功，就取消提示框。如果2秒内拨打电话失败，则提示用户重新拨打电话。

在doCallPhone()函数中，可以直接调用uni.makePhoneCall()函数进行拨打电话：

doCallPhone: function() {
  const that = this;
  uni.makePhoneCall({
    phoneNumber: '10086',
    success: function() {
      console.log('拨打电话成功！');
    },
    fail: function() {
      uni.hideToast();
      uni.showModal({
        title: '拨打电话失败',
        content: '请重新拨打电话',
        showCancel: false,
        success: function(res) {
          if (res.confirm) {
            that.onCallPhone();
          }
        }
      });
    }
  });
}

在这个函数中，如果拨打电话成功，则直接打印拨打电话成功的信息。如果拨打电话失败，则调用uni.showModal()函数提示用户重新拨打电话。

四、小结

以上就是uniapp直接拨打电话的实现方法。通过调用系统的拨打电话功能，可以方便地实现直接拨打电话的功能。通过自定义拨打电话界面和优化用户体验，可以更好地为用户提供更好的用户体验。

完整代码示例：

<template>
  <view class="container">
    <button class="btn" @tap="onCallPhone">拨打电话</button>
  </view>
</template>

<script>
export default {
  data: function() {
    return {}
  },
  methods: {
    onCallPhone: function() {
      const that = this;
      uni.showToast({
        title: '正在拨打电话...',
        icon: 'loading',
        duration: 10000
      });
      setTimeout(function() {
        uni.hideToast();
        that.doCallPhone();
      }, 2000);
    },
    doCallPhone: function() {
      const that = this;
      uni.makePhoneCall({
        phoneNumber: '10086',
        success: function() {
          console.log('拨打电话成功！');
        },
        fail: function() {
          uni.hideToast();
          uni.showModal({
            title: '拨打电话失败',
            content: '请重新拨打电话',
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                that.onCallPhone();
              }
            }
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  .btn {
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border: 1rpx solid #000;
    border-radius: 10rpx;
  }
}
</style>