小程序点击事件无效_微信小程序点击拨打电话

效果图：

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

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

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

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

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

点击拨打：{{item}}关闭  

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文件中添加：

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

 {{param.content  == '' ? '无具体内容' : param.content}}

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

---

个人公众号：肆拾手记