微信小程序点击拨打电话

效果图：

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

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

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

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

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

<code><view>
  <view>
    <view>点击拨打：{{item}}/<view>
    <button>关闭/<button>
  /<view>
/<view>/<code>

list是我们的电话号码。

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

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

<code>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
      });
    },
  }
})/<code>

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

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

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

<code>"usingComponents": {
    "callphone": "/components/CallPhone/CallPhone"
  }/<code>

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

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

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

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

3、在.wxml文件中添加：

<code><callphone>/<code>

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

<code><text> {{param.content  == '' ? '无具体内容' : param.content}}/<text>/<code>

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

閱讀更多 肆拾手記 的文章

關鍵字: 点击 微信 拨打