您的位置:

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>