用戶
 找回密碼
 立即注冊

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空間
收藏
原作者: 夏海峰 來自: 簡書
必中分分彩在线计划 贵州快三开奖结果走势图 75秒时时彩官方开奖 湖北30选5开奖数据 旺牛配资 甘肃快三预测号码推荐今天 浙江6+1开奖号码查询 哪些证券公司股票开户 吉林十一选五昨天开奖 体彩江苏11 选5一等奖 股票发行数量 宁夏十一选五昨天开奖结果 36选7新浪走势图 股票交易日数据 分分彩打流水公式 青海西宁快3开奖 安微25选5开奖号