用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2019-11-20 00:50

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

模拟电话

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

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

  1. <template>
  2. <view class="task">
  3. <view class="call">
  4. <!-- 顶部区域 -->
  5. <view class="top" wx:if="{{phone.length > 0}}">
  6. <view class="phone">{{phone}}</view>
  7. <view class="tip" wx:if="{{calling}}">
  8. <view wx:if="{{tipShow}}">正在呼叫...</view>
  9. <view wx:else>{{formatMmSs}}</view>
  10. </view>
  11. </view>
  12. <!-- 中间区域 -->
  13. <view class="middle">
  14. <view class="nums" wx:if="{{showNums}}" @tap="numClick">
  15. <view class="row">
  16. <view class="num" data-num='1'>1</view>
  17. <view class="num" data-num='2'>2</view>
  18. <view class="num" data-num='3'>3</view>
  19. </view>
  20. <view class="row">
  21. <view class="num" data-num='4'>4</view>
  22. <view class="num" data-num='5'>5</view>
  23. <view class="num" data-num='6'>6</view>
  24. </view>
  25. <view class="row">
  26. <view class="num" data-num='7'>7</view>
  27. <view class="num" data-num='8'>8</view>
  28. <view class="num" data-num='9'>9</view>
  29. </view>
  30. <view class="row">
  31. <view class="num" data-num='*'>*</view>
  32. <view class="num" data-num='0'>0</view>
  33. <view class="num" data-num='#'>#</view>
  34. </view>
  35. </view>
  36. <view class="icons" wx:else>
  37. <view class="icon">
  38. <image src="{{img.ringIcon1}}"></image>
  39. <view>静音</view>
  40. </view>
  41. <view class="icon">
  42. <image src="{{img.ringIcon2}}" @tap="handle('back')"></image>
  43. <view>拔号</view>
  44. </view>
  45. <view class="icon">
  46. <image src="{{img.ringIcon3}}"></image>
  47. <view>免提</view>
  48. </view>
  49. </view>
  50. </view>
  51. <!-- 底部区域 -->
  52. <view class="bottom">
  53. <image wx:if="{{!calling}}" class="btn" src="{{img.call}}" @tap="handle('call')"></image>
  54. <image wx:else class="btn" src="{{img.cancel}}" @tap="handle('cancel')"></image>
  55. <image wx:if="{{!calling && phone.length>0}}" class="del" src="{{img.delete}}" @tap="handle('delete')"></image>
  56. </view>
  57. </view>
  58. </view>
  59. </template>
  1. <script>
  2. import wepy from 'wepy'
  3. import img from '@/assets'
  4. export default class Test extends wepy.page {
  5. config = {
  6. navigationBarTitleText: '模拟电话'
  7. }
  8. data = {
  9. img: img,
  10. phone: '', // 10086
  11. tipShow: false, // 显示呼叫中
  12. calling: false, // 是否拔通电话
  13. showNums: true, // 显示数字面板
  14. seconds: 0 // 计时
  15. }
  16. computed = {
  17. // 通话计时 格式化
  18. formatMmSs() {
  19. return this.mmss(this.seconds)
  20. }
  21. }
  22. // 格式化时间
  23. mmss(count) {
  24. count = count % 3600 // 不考虑 HH
  25. let mm = Math.floor(count / 60)
  26. let ss = count % 60
  27. if (mm < 10) mm = '0' + mm
  28. if (ss < 10) ss = '0' + ss
  29. return mm + ':' + ss
  30. }
  31. onLoad() {
  32. // 音频上下文
  33. wepy.setInnerAudioOption({
  34. mixWithOther: false, // 终止其他应用或微信内的音乐
  35. obeyMuteSwitch: false // 在静音模式下,也能播放声音
  36. })
  37. let ctx = wepy.createInnerAudioContext()
  38. ctx.src = '/assets/media/10086.mp3'
  39. ctx.loop = true
  40. ctx.onPlay(() => {
  41. console.log('开始播放')
  42. })
  43. ctx.onError((res) => {
  44. console.log(res.errMsg)
  45. })
  46. this.ctx = ctx
  47. }
  48. methods = {
  49. // 点击数字
  50. numClick(e) {
  51. console.log(e)
  52. console.log(e.target.dataset.num)
  53. const num = e.target.dataset.num
  54. this.phone = this.phone + num
  55. },
  56. handle(type) {
  57. switch (type) {
  58. case 'call':
  59. // 拔打电话
  60. if (this.phone !== '10086') {
  61. wepy.showToast({ title: '请拔打10086', icon: 'none' })
  62. } else {
  63. this.calling = true
  64. this.tipShow = true
  65. // 延迟1.5秒后开始计时,并播放音频文件
  66. setTimeout(() => {
  67. this.ctx.play()
  68. this.showNums = false
  69. this.timer = setInterval(() => {
  70. this.tipShow = false
  71. this.seconds = this.seconds + 1
  72. this.$apply()
  73. }, 1000)
  74. }, 1500)
  75. }
  76. break
  77. case 'cancel':
  78. // 挂掉电话
  79. clearInterval(this.timer)
  80. this.ctx.seek(0)
  81. this.ctx.stop()
  82. this.phone = ''
  83. this.calling = false
  84. this.showNums = true
  85. this.seconds = 0
  86. break
  87. case 'delete':
  88. // 删除电话号码的最后一位
  89. let phone = this.phone
  90. let arr = phone.split('')
  91. arr.pop()
  92. this.phone = arr.join('')
  93. break
  94. case 'back':
  95. // 返回至数字键盘
  96. this.showNums = true
  97. break
  98. default:
  99. break
  100. }
  101. }
  102. }
  103. }
  104. </script>
  1. <style lang='less'>
  2. .task {
  3. position: absolute;
  4. top: 0;
  5. bottom: 0;
  6. left: 0;
  7. right: 0;
  8. overflow: hidden;
  9. background: rgba(0, 0, 0, 1);
  10. // 打电话区域
  11. .call {
  12. position: absolute;
  13. top: 0;
  14. right: 0;
  15. bottom: 0;
  16. left: 0;
  17. z-index: 2;
  18. .top {
  19. position: absolute;
  20. top: 48rpx;
  21. left: 0;
  22. right: 0;
  23. color: #FDFDFD;
  24. text-align: center;
  25. .phone {
  26. font-size: 72rpx;
  27. line-height: 100rpx;
  28. }
  29. .tip {
  30. font-size: 36rpx;
  31. line-height: 54rpx;
  32. }
  33. }
  34. .middle {
  35. position: absolute;
  36. top: 232rpx;
  37. left: 0;
  38. right: 0;
  39. // 数字面板
  40. .nums {
  41. .row {
  42. width: 540rpx;
  43. margin: 0 auto;
  44. height: 158rpx;
  45. overflow: hidden;
  46. .num {
  47. float: left;
  48. margin: 0 30rpx;
  49. width: 120rpx;
  50. height: 120rpx;
  51. border-radius: 50%;
  52. background:rgba(229,229,229,1);
  53. text-align: center;
  54. line-height: 120rpx;
  55. font-size: 60rpx;
  56. color: black;
  57. }
  58. .num:active {
  59. background:rgba(229,229,229,0.5);
  60. }
  61. }
  62. }
  63. // 免提等
  64. .icons {
  65. margin: 0 auto;
  66. width: 540rpx;
  67. height: 250rpx;
  68. overflow: hidden;
  69. padding-top: 196rpx;
  70. .icon {
  71. float: left;
  72. width: 120rpx;
  73. margin: 0 30rpx;
  74. &>image {
  75. display: block;
  76. width: 120rpx;
  77. height: 120rpx;
  78. border-radius: 50%;
  79. }
  80. &>image:active {
  81. opacity: 0.7;
  82. }
  83. &>view {
  84. font-size: 32rpx;
  85. color: #FDFDFD;
  86. text-align: center;
  87. line-height: 68rpx;
  88. }
  89. }
  90. }
  91. }
  92. .bottom {
  93. position: absolute;
  94. top: 940rpx;
  95. left: 0;
  96. right: 0;
  97. text-align: center;
  98. .btn {
  99. display: inline-block;
  100. width: 120rpx;
  101. height: 120rpx;
  102. border-radius: 50%;
  103. }
  104. .del {
  105. display: inline-block;
  106. width: 75rpx;
  107. height: 56rpx;
  108. position: absolute;
  109. top: 46rpx;
  110. right: 138rpx;
  111. }
  112. .btn:active {
  113. opacity: 0.7;
  114. }
  115. .del:active {
  116. opacity: 0.7;
  117. }
  118. }
  119. }
  120. }
  121. </style>


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 夏海峰 来自: 简书