微信小程序 模拟打电话 实践

模拟电话

模拟打电话功能，拨下指定的号码如10086，等待1.5秒后开始播放本地音频文件并计时。使用小程序官方API createInnerAudioContext()创建 InnerAudioContext对象。

小程序官方推荐使用更为强大的音频上下文对象InnerAudioContext，官方已经停止了对组件的维护。上述这个demo效果的具体实现，如下代码：

<template>
  "call">
    "top"wx:if"{{phone.length > 0}}">
"tip""{{calling}}">
wx:else{{formatMmSs}}</view>
</view>

"middle">
"row">
1</view>
2'3'3>
4</view>
5</view>
6</view>
'7'7'8'8'9'9'*'*'0'0'#'#</view>    
<imagesrc"{{img.ringIcon1}}"></image>
></image>
免提<!-- 底部区域 -->
></image>
></image>
</image>

</template>

import wepy from 'wepy'


  config = {

  data {
    phone''        // 10086
    calling// 是否拔通电话
    seconds 0// 计时
  computed {
    formatMmSs()      returnthismmss(seconds)
}
  mmss(count){
    let mm Mathfloorcount /60)
    ifmm <10 mm '0'+ mm
':' ss
// 音频上下文
      mixWithOther// 终止其他应用或微信内的音乐
})
    ctxsrc '/assets/media/10086.mp3'
onPlay(()=>{
)
onError((reserrMsg)
ctx  ctx
    numClicketargetdatasetnum)
phone  num
    handletypeswitch{
:
          !=='10086'            wepyshowToast({ title'请拔打10086' icon'none'})
            calling true
            // 延迟1.5秒后开始计时，并播放音频文件
timer  setInterval{
seconds 1
              1000)
'cancel':
          clearIntervaltimerseek(0)
''
0
// 删除电话号码的最后一位
          let arr  phonesplit          arrpop arrjoinbreak
:
true
defaultbreak
}

task   position absolute;
  bottom;
  right;
  background rgba1);
call     position;
      top48rpx;
      right      color #FDFDFD;
nums         row           width540rpx          marginauto          height158rpx          overflownum float left            margin30rpx            width120rpx            height            borderradius50%;
            text            line            font60rpx            color black}
// 免提等
}
68rpxbottom 940rpxbtn         displayinlineblock        border%;

                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!