微信小程序点击拨打电话

效果图:

微信小程序点击拨打电话


微信小程序点击拨打电话

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

为防止这个功能会在多个地方使用,我们可以创建一个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,以上就是这个功能的所有内容。



分享到:


相關文章: