微信小程序（有始有终，全部代码）开发---跑步App+音乐播放器 Bug修复

开篇语

昨晚发了一篇：

《简年15： 微信小程序（有始有终，全部代码）开发---跑步App+音乐播放器 》

然后上午起来吃完午饭之后，我就准备继续开工的，但是突然的，想要看B站。然后在一股神奇力量的推动下，我找到了它：

《克苏鲁的呼唤 2005 580P中字 经典名篇完美还原》

---

然后促成了吃完午饭之后，沉迷其中不可自拔。下午写到四点半，才最终完成了我的近四千字的心血之作：

简年16： 初涉《克苏鲁的呼唤》--克苏鲁神话体系入门

可惜明珠暗投：

心灰意冷之下，百无聊赖的打开简书，然后惊喜的发现，这篇文章上了首页今日看点了。这算是一个慰藉？还是很不错的，所以促使了我来写这一篇文章，也就是接着这篇火热的文章的续集，Bug修复 以及更深层次的开发！

正文

本次由于态度没摆正，晚上又跟我的指路明灯学长聊天到八点多。然后又跟我的迷途羔羊说了会话！然后花了半个多小时测评一个免费的VPN （具体情形请去看我的另一篇文章）再来搞开发就是十点半了。时间不是很多，所以调教好的Bug也不多，但是还是有的！

一、音乐界面最上层的滑动banner

原本采用自己写函数的方式来触发，后来改用官方组件--swiper 进行调控：

改进代码如下（github未更新，请读者自行更改）

《---music.wxml》
<swiper  class="swiper" indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" width="100" height="10">
    <swiper-item wx:for="{{imgUrls}}">
      <image src="{{item}}" class="slide-image" class="banner" mode="fullToFill"/>
    </swiper-item>
</swiper>

《---music.js》

Page(
{
   onReady: function (e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },

  data: {

count:1,
    imgUrls: [
      'http://159.203.250.111/banner1.png',
      'http://159.203.250.111/banner2.png',
      'http://159.203.250.111/banner3.png',
    ],
    indicatorDots: false,
    autoplay: true,
    interval: 2000,
    duration: 1000,

  },
  audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
  },
  audio14: function () {
    this.audioCtx.seek(14)
  },
  audioStart: function () {
    this.audioCtx.seek(0)

},

changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  },

   onShareAppMessage: function () {
    return {
      title: '欢迎使用颜大傻牌音乐播放器',
      desc: '将你正在听的歌分享到~~~',
      path: '/page/music/music.js'
    }
  },

})

二、增置了上一首下一首切歌功能

目前还在调试，官方给定的逻辑选择模块我还没吃透。敬请见谅！目前有了一点头绪，代码在下面。（PS：最新消息，制作成功！哈哈。可以流利的播放各种音乐了！！！我还在制作目录，请诸君稍后！）

《---music.wxml》

<block wx:for="{{song}}" wx:key="id">
<block wx:if="{{item.musicid==count}}"> 

<audio poster="{{item.poster}}" name="{{item.name}}" author="{{item.author}}" src="{{item.src}}" id="myAudio" controls="true" >

<button plain="true" type="primary" bindtap="audioPlay" class="button_anniu">开始播放</button>
<button type="primary" bindtap="audioPause" class="button_anniu">暂停</button>
<button type="primary" bindtap="audio14" class="button_anniu">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart" class="button_anniu">停止</button>
<button bindtap="NextMusic" class="button_anniu"> 上一首 </button>
<button bindtap="LastMusic" class="button_anniu"> 下一首 </button>
</audio>
</block>
</block>

《---music.js》

  data: {

    song:[{
      musicid:1,
      poster:'http://159.203.250.111/Carly.png',
    name:'Call_Me_Baby',
    author: 'Carly_Rae_Jepsen',
    src:'http://159.203.250.111/Call_Me_Baby.mp3',
    },

    {
         musicid:2,
       poster:'http://159.203.250.111/carly.png',
    name:'Good_Time',
    author: 'Carly_Rae_Jepsen',
    src:'http://159.203.250.111/Good_Time.mp3',
    },

    {   musicid:3,
    poster:'http://159.203.250.111/five1.png',
    name:'Maps',
    author: 'Marron 5',
    src:'http://159.203.250.111/maps.mp3',
    },

    {   musicid:4,
    poster:'http://159.203.250.111five2.png',
    name:'Animals',
    author: 'Marron 5',
    src:'http://159.203.250.111/Animals.mp3',
    },

    {   musicid:5,
    poster:'http://159.203.250.111/five3.png',
    name:'Sugar',
    author: 'Marron 5',
    src:'http://159.203.250.111/Sugar.mp3',
    },

],

count:1,
    imgUrls: [
      'http://159.203.250.111/banner1.png',
      'http://159.203.250.111/banner2.png',
      'http://159.203.250.111/banner3.png',
    ],
    indicatorDots: false,
    autoplay: true,
    interval: 2000,
    duration: 1000,

  },
  audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
  },
  audio14: function () {
    this.audioCtx.seek(14)
  },
  audioStart: function () {
    this.audioCtx.seek(0)

},

   NextMusic: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  },

   LastMusic: function(e) {
    this.setData({
      count: this.data.count - 1
    })
  },

   onShareAppMessage: function () {
    return {
      title: '欢迎使用颜大傻牌音乐播放器',
      desc: '将你正在听的歌分享到~~~',
      path: '/page/music/music.js'
    }
  },

})

结束语

小程序算是假期的一个调剂吧，不然可能就真的天天看小说，然后逛逛B站了。然后，我觉得我有必要show一下我的工作环境，最近都有点不想走人家，天天在家写代码了~~~~说好的今天去一个姑奶奶家，可是起床的时候已经是十点多了。外边还在下着蒙蒙小雨~没辙，今天是腐败堕落的一天！！！

但是明天我就要去同学聚会了，在县城，娘的，还要七点多起来搭车!虽然对像是一群男的。但是也还是要洗个澡换件衣服出门！这又把我的起床时间提前到六点半了 ** T_T ** 心塞！争取明天把电脑带上，然后找时间休息的时候继续出文吧！寒假快结束了。保持的好习惯多保留一天是一天啊！

---

大神的作品就不安利了。我自己写完的这些，我觉得应该比之前说的一些膜拜的作品要优秀了。

真正的主体（想看完整的代码，猛戳下面的链接吧！！）在这:

简年15： 微信小程序（有始有终，全部代码）开发---跑步App+音乐播放器

另外，对于有翻墙外出的需求的朋友，我刚才写了一篇免费180天优秀VPN的文章可供借鉴：

简年17： 免费的VPN 以及几种网络链接的测评

![我的工作环境，我觉得我越来越有程序员的气息了

~yeah yeah yeah](//upload-images.jianshu.io/upload_images/3810775-8a865a8876f6418c.gif?imageMogr2/auto-orient/strip)

个人宣言

知识传递力量，技术无国界，文化改变生活！