欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

【二：BUG修改】微信小程序（全部代码）开发---跑步App+音乐播放器

发布：2018-01-25 16:51浏览： 次来源：网络 作者：tianshu

本次由于态度没摆正，晚上又跟我的指路明灯学长聊天到八点多。然后又跟我的迷途羔羊说了会话！然后花了半个多小时测评一个免费的VPN （具体情形请去看我的另一篇文章）再来搞开发就是十点半了。时间不是很多，所以调教好的Bug也不多，但是还是有的！
一、音乐界面最上层的滑动banner
原本采用自己写函数的方式来触发，后来改用官方组件--swiper 进行调控：
【二：BUG修改】微信小程序（全部代码）开发---跑步App+音乐播放器(图1)
效果图，设置为两次一次的转换

改进代码如下（github未更新，请读者自行更改）
  1. 《---music.wxml》
  2. <swiper  class="swiper" indicator-dots="{{indicatorDots}}"
  3.   autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" width="100" height="10">
  4.     <swiper-item wx:for="{{imgUrls}}">
  5.       <image src="{{item}}" class="slide-image" class="banner" mode="fullToFill"/>
  6.     </swiper-item>
  7. </swiper>
《---music.js》
  1. Page(
  2. {
  3.    onReady: function (e) {
  4.     // 使用 wx.createAudioContext 获取 audio 上下文 context
  5.     this.audioCtx = wx.createAudioContext('myAudio')
  6.   },
  7.  
  8.  
  9.   data: {
  10.  
  11.  
  12. count:1,
  13.     imgUrls: [
  14.       'https://159.203.250.111/banner1.png',
  15.       'https://159.203.250.111/banner2.png',
  16.       'https://159.203.250.111/banner3.png',
  17.     ],
  18.     indicatorDots: false,
  19.     autoplay: true,
  20.     interval: 2000,
  21.     duration: 1000,
  22.  
  23.   },
  24.   audioPlay: function () {
  25.     this.audioCtx.play()
  26.   },
  27.   audioPause: function () {
  28.     this.audioCtx.pause()
  29.   },
  30.   audio14: function () {
  31.     this.audioCtx.seek(14)
  32.   },
  33.   audioStart: function () {
  34.     this.audioCtx.seek(0)
  35.  
  36. },
  37.  
  38.  
  39. changeIndicatorDots: function(e) {
  40.     this.setData({
  41.       indicatorDots: !this.data.indicatorDots
  42.     })
  43.   },
  44.   changeAutoplay: function(e) {
  45.     this.setData({
  46.       autoplay: !this.data.autoplay
  47.     })
  48.   },
  49.   intervalChange: function(e) {
  50.     this.setData({
  51.       interval: e.detail.value
  52.     })
  53.   },
  54.   durationChange: function(e) {
  55.     this.setData({
  56.       duration: e.detail.value
  57.     })
  58.   },
  59.  
  60.  
  61.  
  62.    onShareAppMessage: function () {
  63.     return {
  64.       title: '欢迎使用颜大傻牌音乐播放器',
  65.       desc: '将你正在听的歌分享到~~~',
  66.       path: '/page/music/music.js'
  67.     }
  68.   },
  69.  
  70. })


二、增置了上一首下一首切歌功能
目前还在调试，官方给定的逻辑选择模块我还没吃透。敬请见谅！目前有了一点头绪，代码在下面。（PS：最新消息，制作成功！哈哈。可以流利的播放各种音乐了！！！我还在制作目录，请诸君稍后！）
《---music.wxml》
  1. <block wx:for="{{song}}" wx:key="id">
  2. <block wx:if="{{item.musicid==count}}"> 
  3.  
  4. <audio poster="{{item.poster}}" name="{{item.name}}" author="{{item.author}}" src="{{item.src}}" id="myAudio" controls="true" >
  5.  
  6. <button plain="true" type="primary" bindtap="audioPlay" class="button_anniu">开始播放</button>
  7. <button type="primary" bindtap="audioPause" class="button_anniu">暂停</button>
  8. <button type="primary" bindtap="audio14" class="button_anniu">设置当前播放时间为14秒</button>
  9. <button type="primary" bindtap="audioStart" class="button_anniu">停止</button>
  10. <button bindtap="NextMusic" class="button_anniu"> 上一首 </button>
  11. <button bindtap="LastMusic" class="button_anniu"> 下一首 </button>
  12. </audio>
  13. </block>
  14. </block>
《---music.js》

  1. data: {
  2.  
  3.     song:[{
  4.       musicid:1,
  5.       poster:'https://159.203.250.111/Carly.png',
  6.     name:'Call_Me_Baby',
  7.     author: 'Carly_Rae_Jepsen',
  8.     src:'https://159.203.250.111/Call_Me_Baby.mp3',
  9.     },
  10.  
  11.     {
  12.          musicid:2,
  13.        poster:'https://159.203.250.111/carly.png',
  14.     name:'Good_Time',
  15.     author: 'Carly_Rae_Jepsen',
  16.     src:'https://159.203.250.111/Good_Time.mp3',
  17.     },
  18.  
  19.     {   musicid:3,
  20.     poster:'https://159.203.250.111/five1.png',
  21.     name:'Maps',
  22.     author: 'Marron 5',
  23.     src:'https://159.203.250.111/maps.mp3',
  24.     },
  25.  
  26.     {   musicid:4,
  27.     poster:'https://159.203.250.111five2.png',
  28.     name:'Animals',
  29.     author: 'Marron 5',
  30.     src:'https://159.203.250.111/Animals.mp3',
  31.     },
  32.  
  33.     {   musicid:5,
  34.     poster:'https://159.203.250.111/five3.png',
  35.     name:'Sugar',
  36.     author: 'Marron 5',
  37.     src:'https://159.203.250.111/Sugar.mp3',
  38.     },
  39.  
  40. ],
  41.  
  42. count:1,
  43.     imgUrls: [
  44.       'https://159.203.250.111/banner1.png',
  45.       'https://159.203.250.111/banner2.png',
  46.       'https://159.203.250.111/banner3.png',
  47.     ],
  48.     indicatorDots: false,
  49.     autoplay: true,
  50.     interval: 2000,
  51.     duration: 1000,
  52.  
  53.   },
  54.   audioPlay: function () {
  55.     this.audioCtx.play()
  56.   },
  57.   audioPause: function () {
  58.     this.audioCtx.pause()
  59.   },
  60.   audio14: function () {
  61.     this.audioCtx.seek(14)
  62.   },
  63.   audioStart: function () {
  64.     this.audioCtx.seek(0)
  65.  
  66. },
  67.  
  68.    NextMusic: function(e) {
  69.     this.setData({
  70.       count: this.data.count + 1
  71.     })
  72.   },
  73.  
  74.    LastMusic: function(e) {
  75.     this.setData({
  76.       count: this.data.count - 1
  77.     })
  78.   },
  79.  
  80.  
  81.  
  82.  
  83.  
  84.    onShareAppMessage: function () {
  85.     return {
  86.       title: '欢迎使用颜大傻牌音乐播放器',
  87.       desc: '将你正在听的歌分享到~~~',
  88.       path: '/page/music/music.js'
  89.     }
  90.   },
  91.  
  92. })


【二：BUG修改】微信小程序（全部代码）开发---跑步App+音乐播放器(图2)




免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有