您现在的位置是:官网首页 > IT新观察 > 微信小程序 模拟打电话 实践

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

时间:2019-12-07 07:03  来源:   复制分享 我要评论

模仿打电话功用,拨下指定的号码如10086,等候1.5秒后开端播映本地音频文件并计时。运用小程序官方API createInnerAudioContext创立 InnerAudioContext目标。

小程序官方引荐运用更为强壮的音频上下文目标InnerAudioContext,官方现已中止了对组件的保护。上述这个demo作用的详细完成,如下代码:

 template 乐橙lc8view view !-- 顶部区域 -- view wx:if="{{phone.length 0}}" view {{phone}} /view view wx:if="{{calling}}" view wx:if="{{tipShow}}" 正在呼叫... /view view wx:else {{formatMmSs}} /view /view /view !-- 中心区域 -- view view wx:if="{{showNums}}" @tap="numClick" view view data-num='1' 1 /view view data-num='2' 2 /view view data-num='3' 3 /view /view view view data-num='4' 4 /view view data-num='5' 5 /view view data-num='6' 6 /view /view view view data-num='7' 7 /view view data-num='8' 8 /view view data-num='9' 9 /view /view view view data-num='*' * /view view data-num='0' 0 /view view data-num='#' # /view /view /view view wx:else view image src="{{img.ringIcon1}}" /image view 静音 /view /view view image src="{{img.ringIcon2}}" @tap="handle" /image view 拔号 /view /view view image src="{{img.ringIcon3}}" /image view 免提 /view /view /view /view !-- 底部区域 -- view image wx:if="{{!calling}}" src="{{img.call}}" @tap="handle" /image image wx:else src="{{img.cancel}}" @tap="handle" /image image wx:if="{{!calling phone.length 0}}" src="{{img.delete}}" @tap="handle" /image /view /view /view /template 
 script import wepy from 'wepy'import img from '@/assets'export default class Test extends wepy.page { config = { navigationBarTitleText: '模仿电话' } data = { img: img, phone: '', // 10086 tipShow: false, // 显现呼叫中 calling: false, // 是否拔通电话 showNums: true, // 显现数字面板 seconds: 0 // 计时 } computed = { // 通话计时 格式化 formatMmSs { return this.mmss } } // 格式化时刻 mmss { count = count % 3600 // 不考虑 HH let mm = Math.floor let ss = count % 60 if  mm = '0' + mm if  ss = '0' + ss return mm + ':' + ss } onLoad { // 音频上下文 wepy.setInnerAudioOption let ctx = wepy.createInnerAudioContext ctx.src = '/assets/media/10086.mp3' ctx.loop = true ctx.onPlay = { console.log }) ctx.onError = { console.log }) this.ctx = ctx } methods = { // 点击数字 numClick { console.log console.log const num = e.target.dataset.num this.phone = this.phone + num }, handle { switch  { case 'call': // 拔打电话 if  { wepy.showToast } else { this.calling = true this.tipShow = true // 推迟1.5秒后开端计时,并播映音频文件 setTimeout = { this.ctx.play this.showNums = false this.timer = setInterval = { this.tipShow = false this.seconds = this.seconds + 1 this.$apply }, 1000) }, 1500) } break case 'cancel': // 挂掉电话 clearInterval this.ctx.seek this.ctx.stop this.phone = '' this.calling = false this.showNums = true this.seconds = 0 break case 'delete': // 删去电话号码的最终一位 let phone = this.phone let arr = phone.split arr.pop this.phone = arr.join break case 'back': // 回来至数字键盘 this.showNums = true break default: break } } }} /script 
 style lang='less' .task { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; background: rgba; // 打电话区域 .call { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; .top { position: absolute; top: 48rpx; left: 0; right: 0; color: #FDFDFD; text-align: center; .phone { font-size: 72rpx; line-height: 100rpx; } .tip { font-size: 36rpx; line-height: 54rpx; } } .middle { position: absolute; top: 232rpx; left: 0; right: 0; // 数字面板 .nums { .row { width: 540rpx; margin: 0 auto; height: 158rpx; overflow: hidden; .num { float: left; margin: 0 30rpx; width: 120rpx; height: 120rpx; border-radius: 50%; background:rgba; text-align: center; line-height: 120rpx; font-size: 60rpx; color: black; } .num:active { background:rgba; } } } // 免提等 .icons { margin: 0 auto; width: 540rpx; height: 250rpx; overflow: hidden; padding-top: 196rpx; .icon { float: left; width: 120rpx; margin: 0 30rpx; image { display: block; width: 120rpx; height: 120rpx; border-radius: 50%; } image:active { opacity: 0.7; } view { font-size: 32rpx; color: #FDFDFD; text-align: center; line-height: 68rpx; } } } } .bottom { position: absolute; top: 940rpx; left: 0; right: 0; text-align: center; .btn { display: inline-block; width: 120rpx; height: 120rpx; border-radius: 50%; } .del { display: inline-block; width: 75rpx; height: 56rpx; position: absolute; top: 46rpx; right: 138rpx; } .btn:active { opacity: 0.7; } .del:active { opacity: 0.7; } } }} /style 

相关资讯