微信小程序实现打电话
phone.wxss
.phone-numbers-title {
text-align: center;/*文本居中*/
padding-top: 20rpx;
padding-bottom: 20rpx;/*顶部底部填充*/
font-size: 48rpx;
color:white;/*字体颜色*/
background-color: #328ca2;/*背景颜色*/
width:80%;
margin: 50rpx auto;/*设置4边距*/
}
.phone-numbers-main {
display: flex;
flex-direction: column;
width: 80%;
margin: 20rpx auto;
background-color: rgba(38, 165, 197, 0.3)
}
.single-number {
display: flex;
padding:24rpx;
border-bottom: 2px solid rgb(119, 119, 117);
font-size: 40rpx;
}
.button{
margin-right: 0.1cm;
font-size: 30rpx;
color:white;
background-color: #4a4e42;
width:3cm;
}
.text{
margin-left: 20rpx;
}
phone.wxml
<view class="phone-numbers-title">常用电话</view>
<view class="phone-numbers-main">
<block wx:for="{{phone_numbers}}" wx:key="phone_numbers" wx:for-item="item" >
<view class="single-number">
<text>{{item.organization}}</text>
<text class="text">{{item.num}}</text>
<button data-phonenum="{{item.num}}" class="button" bindtap="call">拨打</button>
<!--此处data-phonenum 已经将条目中的电话号放入,后端直接调用-->
</view>
</block>
</view>
phone.js
//主要方法
data: {//存放信息的数组
phone_numbers: [
{
id: "num-1",
organization: "公安",
num: "110"
}, {
id: "num-2",
organization: "火警",
num: "119"
}, {
id: "num-3",
organization: "救护",
num: "120"
}, {
id: "num-4",
organization: "燃气",
num: "962777"
}, {
id: "num-5",
organization: "物业",
num: "87855211"
}]
},
//调用手机拨号
call: function (e) {
var phone_num = e.target.dataset.phonenum;//获取设置的电话值
wx.makePhoneCall({
phoneNumber: phone_num
})
},
实现了电话简单的打出,也可改进成将输入的电话号播出,需要使用<input>组件