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>