微信小程序点击拨打电话

 

效果图：

需求：点击文字然后拨打电话

为防止这个功能会在多个地方使用，我们可以创建一个components。

1.在顶级目录下建立一个components文件夹，在这个文件夹下再建立一个文件夹，例如叫作CallPone。

右键点击CallPhone，在弹出的右键菜单中，点击新建Components，之后会生成4个components文件：

在CallPhone.wxml中写出我们的页面结构

<view class="mask" hidden="{{isHide}}">
  <view class="call-phone-wrap">
    <view class="list" wx:for="{{list}}" wx:for-item="item" bindtap="call" data-item="{{item}}">点击拨打：{{item}}</view>
    <button class="close-btn" bindtap="closeMask" type="primary">关闭</button>
  </view>
</view>

list是我们的电话号码。

在CallPhone.js中写出我们的方法和属性等：

在properties中的list就是我们的电话号码数组

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    list: {
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isHide: true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 拨打电话
    call: function(e){
      console.log(e);
      let phone = e.currentTarget.dataset.item
      wx.makePhoneCall({
        phoneNumber: phone//仅为示例，并非真实的电话号码
      })
    },
    // 关闭
    closeMask: function(){
      this.setData({
        isHide: true
      });
    },
    // 打开
    showMask: function(){
      this.setData({
        isHide: false
      });
    },
  }
})

以上就完成我们打电话的组件。

我们怎么使用呢，请继续看下边：

1、在要使用的页面的json文件中添加 

"usingComponents": {
    "callphone": "/components/CallPhone/CallPhone"
  }

 2、在.js文件中的onReady中添加：

onReady: function () {
    this.call = this.selectComponent('#call');
  },

 添加打开拨打窗口的方法：

  showCallPhone: function () {
    if (this.data.phones.length != 0) {
      this.call.showMask();
    }
  }

3、在.wxml文件中添加： 

<callphone id="call" list="{{phones}}"></callphone>

绑定打开拨打窗口的方法：

<text decode="{{true}}" bindtap="showCallPhone"> {{param.content  == '' ? '无具体内容' : param.content}}</text>

Ok，以上就是这个功能的所有内容。 

---

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！