微信小程序（有始有终，全部代码）开发---跑步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+音乐播放器
另外，对于有FQ外出的需求的朋友，我刚才写了一篇免费180天优秀VPN的文章可供借鉴：
简年17： 免费的VPN 以及几种网络链接的测评
- 
个人宣言
知识传递力量，技术无国界，文化改变生活！
