微信小程序实现打电话​​​​​​​

                                     微信小程序实现打电话

 

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>组件