当前位置:主页 > 小程序开发 > API >

微信小程序拨打电话接口wx.makePhoneCall

栏目:API 来源: 微信小程序开发网 阅读: 2017-03-23
  在微信小程序里面用户可能输入电话,然后,调用拨打电话接口wx.makePhoneCall来打电话,因为,这个要在手机上面才可以测试,所以,后面测试代码仅为摸似打电话。

  要拨打电话无论在微信小程序里面还是在其它地方,首先要输入要拨打的电话,如果没有输入电话号码就无拨打电话 就无从谈起了。

示例:

//.wxml
      <view class="desc">请在下方输入电话号码</view>
      <input class="input" type="number" name="input" bindinput="bindInput" />
      <view class="btn-area">
        <button type="primary" bindtap="makePhoneCall" disabled="{{disabled}}">拨打</button>
      </view>


//.js
Page({
  data: {
    disabled: true
  },
  bindInput: function(e) {

    this.inputValue = e.detail.value

    if (this.inputValue.length > 0) {
      this.setData({
        disabled: false
      })
    } else {
      this.setData({
        disabled: true
      })
    }
  },
  makePhoneCall: function () {
    var that = this
    wx.makePhoneCall({
      phoneNumber: this.inputValue,
      success: function () {
        console.log("成功拨打电话")
      }
    })
  }
})


详细分析上面的代码:

  在刚进入到上面的打电话的界面时,我们看到上面的按扭是禁用状态的,这是因为在.js逻辑层里面设置了disabled值为true。



  当输入一个值时disabled值为false,因为,取消了禁用状态,如下图所示:


  这一过程是如何实现的呢?其实,实现这一功能很简单。

  当输入一个电话号码的值1时,其实,是触发了邦定的函数bindInput(bindinput="bindInput"),每输入一个值就会返回一个对象:


  也就是对象的里面的对象datail里面的value值为1,即e.detail.value=1

  如果e.detail.value值大于零,我们就设置禁用状态为false,这就是为什么我们输入一个值后,按扭由禁用状态变成了可用状态的原因了。

  实现这个功能的核心代码:

    if (this.inputValue.length > 0) {
      this.setData({
        disabled: false
      })
    }

  当用户输入完手机号时,点拨打按扭打电话时,也要用到e.detail.value,即phponeNumber的值。

  调用接口wx.makePhoneCall成功后,则提示一个“成功拨打电话”,因为,这里只是摸拟,所以,显示这行文字。